时间戳

首页 > 解决方案 > 如何在固定缩放地图上以像素为单位更改平铺大小？

javascript - 如何在固定缩放地图上以像素为单位更改平铺大小？

问题描述

我正在使用 OpenLayers 以固定缩放 (zoom=8) 渲染虚拟世界（不是地球）的自定义地图。我检查了渲染的画布，每个图块都是 256 像素的平方。我想将平铺尺寸更改为更小的尺寸（如 16 像素），但我无法在任何地方找到如何做到这一点。谁能帮我吗？谢谢！

我在做什么：

var zoom = 8;
var side = 800
var extent = [0, 0, zoom*side*2, zoom*side*2];
var center = [zoom*side+400/8/2, zoom*side-400/8/2];

var projection = new ol.proj.Projection({
  code: 'decentraland-images',
  units: 'pixels',
  extent: extent,
});
var map = new ol.Map({
target: 'map',
layers: [
  new ol.layer.Tile({
    source: new ol.source.TileImage({
      url: 'map/{z},{x},{y}.png',
      wrapX: false,
    }),
  }), 
],
view: new ol.View({
    projection: projection,
    center: center, //ol.extent.getCenter(extent),
    zoom: zoom,
    minZoom: zoom,
    maxZoom: zoom,
  })
});

如果您想查看，这是我当前的完整代码：https ://pastebin.com/TCHCBh5c 。这是一个部署的版本：https ://maraoz.com/decentraland-maps/

标签： javascriptsizezoomingopenlayerstile

解决方案

您应该设置一个 tilegrid 来反映您正在使用的数据。似乎只有 z = 5 时才有 784 x 783 像素的图块。左上角图块是https://maraoz.com/decentraland-maps/map/5,8,8.png右下角是https:// maraoz.com/decentraland-maps/map/5,22,21.png 然后您可以通过将实际图块大小除以您想要的大小来设置视图中所需的分辨率（对于整页地图来说，16 似乎非常小，所以此示例使用 64)。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
 
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
 
    <script type="text/javascript">
      function initialize() {
        tileSize = [784, 783];
        extent = [0, 0, tileSize[0] * 15, tileSize[1] * 14];
        center = ol.extent.getCenter(extent);
        origin = [tileSize[0] * -8, tileSize[1] * 22];
        var projection = new ol.proj.Projection({
          code: 'decentraland-images',
          units: 'pixels',
          extent: extent,
        });
        var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.TileImage({
              url: 'https://maraoz.com/decentraland-maps/map/{z},{x},{y}.png',
              tileGrid: new ol.tilegrid.TileGrid({
                extent: extent,
                origin: origin,
                tileSize: tileSize,
                resolutions: [32, 16, 8, 4, 2, 1],
                minZoom: 5
              }),
              projection: projection
            }),
          })
        ],
        view: new ol.View({
            projection: projection,
            center: center,
            resolutions: [tileSize[0] / 64],
            zoom: 0
          })
        });
      }
    </script>
    <style type="text/css">
      #map {
        min-height: 100%; 
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(51,51,51,0.7);
      }
      html, body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body onload="initialize()">
    <div id="map">
    </div>
  </body>
</html>

推荐阅读