解决openlayers6加载百度地图出现偏移问题_openlayer6 坐标偏移很大

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32