欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

解决openlayers6加载百度地图出现偏移问题

程序员文章站 2022-04-28 08:55:23
...

1、问题
ol6加载百度地图出现的问题
解决openlayers6加载百度地图出现偏移问题
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;
}