如何为平面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