如何为平面1：1像素坐标系配置Openlayers？

Question

我正在尝试构建游戏激战2的地图，但是无法让openlayers正确处理坐标系并完全呈现地图。

这里是什么，我有一个小提琴：两轴https://jsfiddle.net/ndqb8rqx/

激战世界广场和49152像素。坐标原点（[0, 0]）应该是西北。东南应该是[49152, 49152]。游戏开发商制作了地图图块可以作为一项服务：https://wiki.guildwars2.com/wiki/API:Tile_service

我创建了一个基于Zoomify一个Projection设法处理这个问题：

var gw2Projection = new ol.proj.Projection({ 
    code: 'ZOOMIFY', 
    units: 'pixels', 
    extent: [0, -49152, 49152, 0] 
}) 

而且我还添加了游戏的瓷砖作为来自XYZ源的Tilelayer，如下所示：

new ol.layer.Tile({ 
    source: new ol.source.XYZ({ 
    url: 'https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg', 
    projection: gw2Projection 
    }), 
}), 

第一个问题是，openlayers不显示完整的映射。地图实际上比小提琴表演更向南和东​​延伸。实际上在小提琴中显示的右下边缘实际上是[32768, 32768]，但是该地图延伸到[49152, 49152]。看起来，当完全缩小时，openlayers只需将坐标系缩小到单个区域的区域即可。相反，我希望坐标与像素匹配1：1。

另一个问题是目前北方向的y坐标增加。我想反转y轴，使得y坐标在南方向增加。

Answer 1

@ahocevar将我推向正确的方向。创建自定义tilegrid的建议是必要的，但不是设置缩放级别，而是需要设置实际分辨率。

所以通过添加这样的tilegrid：

var tilegrid = new ol.tilegrid.TileGrid({ 
    extent: extent, 
    resolutions: [128, 64, 32, 16, 8, 4, 2, 1] 
}); 

层源像这样在使用它：

source: new ol.source.XYZ({ 
    tileGrid: tilegrid, 
    url: 'https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg', 
    projection: gw2Projection 
}), 

最后将它添加到视图，以及：

view: new ol.View({ 
    center: ol.extent.getCenter(extent), 
    zoom: 1, 
    projection: gw2Projection, 
    extent:extent, 
    resolutions: tilegrid.getResolutions() 
}) 

现在显示整个地图，并且坐标是正确的。 Y轴仍然是负面的。

这里有结果的小提琴，我还包括良好的措施的TileDebug层：https://jsfiddle.net/kay99yor/1/

Answer 2

以使这项工作的关键是一个自定义的tile网格的定义，即用正确程度和MAXZOOM：

var tilegrid = new ol.tilegrid.createXYZ({ 
    extent: gw2Projection.getExtent(), 
    maxZoom: 7 
}); 

然后XYZ源与tilegrid配置：

source: new ol.source.XYZ({ 
    url: 'https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg', 
    projection: gw2Projection, 
    tileGrid: tilegrid 
}) 

同时配置该视图与该瓷砖网格的决议：

view: new ol.View({ 
    center: ol.extent.getCenter(gw2Projection.getExtent()), 
    extent: gw2Projection.getExtent(), 
    zoom: 1, 
    resolutions: tilegrid.getResolutions() 
} 

我有crea提供了一个更新的小提琴，使您的地图工作：https://jsfiddle.net/kay99yor/。