如何将 MapTile 图像转换为查看

Question

我使用 MapTiler 创建了一组图像的平铺集。 MapTiler 使用以下代码生成一个 OL 2 脚本，该脚本将平铺图像在查看窗口中居中：

var map, layer;
var mapBounds = new OpenLayers.Bounds(0.000000, -9350.000000, 14450.000000, 0.000000);
var mapMinZoom = 0;
var mapMaxZoom = 6;
var mapMaxResolution = 1.000000;
var gridBounds = new OpenLayers.Bounds(0.000000, -9350.000000, 14450.000000, 0.000000);
function init() {
  var options = {
    controls: [],
    maxExtent : gridBounds,
    minResolution: mapMaxResolution,
    numZoomLevels: mapMaxZoom+1
  };
  map = new OpenLayers.Map('map', options);
  layer = new OpenLayers.Layer.XYZ( "MapTiler layer", "${z}/${x}/${y}.png", {
    transitionEffect: 'resize',
    tileSize: new OpenLayers.Size(256, 256),
    tileOrigin: new OpenLayers.LonLat(gridBounds.left, gridBounds.top)
  });
  map.addLayer(layer);
  map.zoomToExtent(mapBounds);

我想使用 OL3 来显示平铺地图，但不知道如何实现等效的 OL3 方法来实现这一点。使用以下脚本，我可以显示平铺图像，但我无法弄清楚如何将平铺放在视图中。

map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        url: map_path + '{z}/{x}/{y}.png'
      })
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
}); 

我检查了地图范围，结果是：

-20037508.342789244,-20037508.342789244,20037508.342789244,20037508.342789244

我的平铺图像范围在 O​​L2 代码中给出，但我不知道如何在 OL3 中使用此信息。我认为这可能与转换或 fitExtent 有关，但没有进一步的方向，看来我只是在猜测该怎么做。

Answer 1

您必须创建一个像素投影才能正常工作。然后你可以使用fit（替换之前的fitExtent），正如你已经猜到的那样，放大到图像的全部范围。

翻译成 OpenLayers 3 的整个 OpenLayers 2 代码如下所示：

var mapBounds = [0.000000, -9350.000000, 14450.000000, 0.000000];
var mapMaxZoom = 6;
var gridBounds = [0.000000, -9350.000000, 14450.000000, 0.000000];
var projection = new ol.proj.Projection({
  code: 'pixels',
  units: 'pixels',
  extent: gridBounds
});
var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    extent: mapBounds,
    projection: projection
  })
});
var layer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: '{z}/{x}/{y}.png',
    projection: projection,
    maxZoom: mapMaxZoom
  })
});
map.addLayer(layer);
map.getView().fit(mapBounds, map.getSize());