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

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 baidu_map_source = 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 ;
}
 var baidu_source = new ol.source.TileImage({
 	projection: projection,
 	tileGrid: tilegrid,
 	tileUrlFunction: baidu_map_source
 });
 var map_baidu = new ol.layer.Tile({
 	source: baidu_source,
 	visible: true
 });