openlayers-3 – OpenLayers 3,静态拼贴和XYZ坐标

我们的目标是能够放大我分成256×256方格的高分辨率图像(11520×11520).我拍摄了大图,并将其调整为80%,60%,40%,20%和8.89%.然后,对于每个图像从100%到8.89%,我将它们分开.这是制作一个像这样的互动视频游戏地图:
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
    })
});

结果:我只看到所用缩放的左上角.我已经看过很多例子和很多问题,但结合静态图块和XYZ(像素)从未出现过.

这是JS Fiddle.

如何基于像素系统组合静态切片和XYZ坐标?

最佳答案 你有一个非常奇怪的瓷砖布局.您描述的内容映射到这组解决方案:

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
})

请参阅更新的小提琴,了解完整代码:https://jsfiddle.net/6moqu7q8/4/.

点赞