如何为平面1:1像素坐标系配置Openlayers?

我正在尝试构建游戏激战2的地图,但是无法让openlayers正确处理坐标系并完全呈现地图。如何为平面1:1像素坐标系配置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坐标在南方向增加。

回答:

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

回答:

以使这项工作的关键是一个自定义的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/。

以上是 如何为平面1:1像素坐标系配置Openlayers? 的全部内容, 来源链接: utcz.com/qa/258304.html

回到顶部