解决openlayers6加载百度地图出现偏移问题
程序员文章站
2022-04-28 08:55:23
...
1、问题
ol6加载百度地图出现的问题
2、原因
由于openlayers6加载地图的方式是右下递增,原先是右上递增,所以在原先加载百度地图的基础之上,将tileUrlFunction中的y坐标变为原先的相反数即可。
3、解决方法
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var tilegrid = new TileGrid({
origin: [0, 0],
resolutions: resolutions
});
var BmapSource = function (type) {
let url = '';
const bmapsource = new TileImage({
projection: 'EPSG:3857',
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
if (!tileCoord) {
return "";
}
var z = tileCoord[0];
var x = tileCoord[1];
//var y = tileCoord[2];
var y = -tileCoord[2]; //y坐标变成相反数
if (x < 0) {
x = "M" + (-x);
}
if (y < 0) {
y = "M" + (-y);
}
return "http://online1.map.bdimg.com/onlinelabel/?qt=tile&x=" +x + "&y=" + y + "&z=" + z +"&styles=pl&udt=20151021&scaler=1&p=1"
}
});
return bmapsource;
}
下一篇: ELK 日志分析系统(三)