openlayers-3 - OpenLayers 3，静态图 block 和 XYZ 坐标

Question

目标是能够放大我已分割成 256x256 方 block 的高分辨率图片 (11520x11520)。我拍摄了大图像并将其大小调整为 80%、60%、40%、20% 和 8.89%。然后，对于从 100% 到 8.89% 的每个图像，我将它们分割。就是制作一个这样的互动视频游戏 map :http://www.ark-survival.net/en/dynamic-livemap/

我已经尝试过这个:

var map = new ol.Map({
    target: 'ark_map',
    layers: [
        new ol.layer.Tile({
        source: new ol.source.XYZ({
                url: 'images/map/{z}/map_{x}_{y}.png',
                tileSize: 256,
                maxZoom: 5
            })
        })
    ],
    view: new ol.View({
        center: [50, 50],
        zoom: 5,
        minZoom: 0
    })
});

结果:我在使用的任何缩放中都只能看到左上角。我见过很多例子和很多问题，但从未出现过将静态图 block 和 XYZ(在像素上)相结合的情况。

这是JS Fiddle .

如何基于像素系统组合静态图 block 和 XYZ 坐标？

Answer 1

你的图 block 布局非常奇怪。您所描述的内容映射到这组分辨率:

var resolutions = [
  45/4,
  45/4/2*0.889,
  45/4/4*0.889,
  45/4/6*0.889,
  45/4/8*0.889
];

这样，您就可以配置 ol.tilegrid.TileGrid:

new ol.tilegrid.TileGrid({
  origin: [0, 11520],
  resolutions: resolutions
})

请参阅更新的 fiddle 以获取完整代码:https://jsfiddle.net/6moqu7q8/4/ .