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

如何将静态瓦片和基于像素的XYZ坐标结合起来？

- Vincent Poirier

---

你看到这个例子了吗？ - Jonatas Walker

我添加了JS Fiddle以展示它在我的端上的效果。 - Vincent Poirier

顺便问一下，你用什么来分割图像的？ - Jonatas Walker

我使用了TileMage图像分割器。（http://tilemage.50webs.com/） - Vincent Poirier

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

请查看更新后的 fiddle 以获取完整代码：https://jsfiddle.net/6moqu7q8/4/。

- ahocevar

---

你能解释一下哪个元素很奇怪，并且你是如何计算出所做的分辨率数组的吗？有时它似乎有点故障，可能是因为缩放必须遵循我没有正确遵循的某些准则吗？ - Vincent Poirier

通常，瓦片网格从缩放级别零开始只有一个瓦片，然后始终将一个瓦片分成四个瓦片以供下一个缩放级别使用。幸运的是，OpenLayers 支持任意网格配置，包括您的配置。实际上，我通过结合试错和您提供的信息来确定了您的分辨率。 - ahocevar

不确定您所说的故障是什么意思，但要获得更清晰的图像，您需要与源具有相同的视图分辨率。这可以通过将相同的分辨率数组传递给视图配置来轻松实现。缺点是，除非为视图添加更多分辨率，否则您将无法查看整个世界。请参见https://jsfiddle.net/6moqu7q8/5/以获取更新的代码片段。 - ahocevar