OpenLayers 3，靜態切片和XYZ坐標

Question

我們的目標是能夠放大我分成256x256方格的高分辨率圖像（11520x11520）。 我拍攝了大圖，並將其調整為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小提琴 。

如何基於像素系統組合靜態切片和XYZ坐標？

Answer 1

你有一個非常奇怪的瓷磚布局。 您描述的內容映射到這組解決方案：

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/ 。