目标是能够缩放到我将其分成256x256平方的高分辨率图片(11520x11520)。我将大图像调整为80%,60%,40%,20%和8.89%。然后,对于从100%到8.89%的每个图像,我都进行了拆分。这是为了制作一个交互式视频游戏地图,就像这样:http://www.ark-survival.net/en/dynamic-livemap/
我尝试过这个:
结果:在任何缩放级别下,我只能看到左上角。我看过很多示例和问题,但从未出现过结合静态瓦片和基于像素的XYZ坐标的情况。
这是 JS Fiddle。
如何将静态瓦片和基于像素的XYZ坐标结合起来?
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坐标结合起来?