OpenLayers 3，静态图块和 XYZ 坐标答案

【问题标题】：OpenLayers 3, static tiles and XYZ coordinatesOpenLayers 3，静态图块和 XYZ 坐标
【发布时间】：2016-03-10 21:59:17
【问题描述】：

目标是能够放大我已分割成 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 坐标？

【问题讨论】：

你看到this example了吗？
我添加了 JS Fiddle 来向您展示它在我的最后做了什么。
对了，你是用什么分割图片的？
我使用了 TileMage 图像分割器。 (tilemage.50webs.com)

标签： openlayers-3

【解决方案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/。

【讨论】：

你能解释一下什么元素很奇怪，以及你是如何计算出你制作的分辨率数组的吗？有时似乎有点小故障，是不是缩放必须遵循我没有正确遵循的某些准则？
通常，瓦片网格从缩放级别为零的瓦片开始，然后总是将一个瓦片分成四个瓦片以用于下一个缩放级别。幸运的是，OpenLayers 支持像你这样的任意网格配置就好了。实际上，我通过将反复试验与您提供的信息相结合，得出了您的解决方案。
不确定您所说的故障是什么意思，但要获得更清晰的图像，您需要与源具有相同的视图分辨率。这可以通过将相同的分辨率数组传递给视图配置来轻松实现。缺点是您将无法查看整个世界，除非您为视图添加更多分辨率。有关更新的小提琴，请参阅 jsfiddle.net/6moqu7q8/5。