使用OpenLayers顯示百度地圖

代碼1：

    var projection = ol.proj.get("EPSG:3857");
    var resolutions = [];
    for(var i=0; i<19; i++){
        resolutions[i] = Math.pow(2, 18-i);
    }
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],
        resolutions: resolutions
    });

    var baidu_source = new ol.source.TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            if(!tileCoord){
                return "";
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            console.log(x+" "+y+" "+z);
            if(x<0){
                x = "M"+(-x);
            }
            if(y<0){
                y = "M"+(-y);
            }

            return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
        }
    });

    var baidu_layer = new ol.layer.Tile({
        source: baidu_source
    });

    var map = new ol.Map({
        target: 'map',
        layers: [baidu_layer],
        view: new ol.View({
            center:  [12959773,4853101],
            zoom: 12
        })
    });

參考：https://blog.csdn.net/qingyafan/article/details/49403989

問題是怎么傳入經緯度坐標呢？

代碼二：

var projection = ol.proj.get("EPSG:3857");       //加載百度地圖采用3857坐標系
var resolutions = [];
for(var i=0; i<19; i++){
    resolutions[i] = Math.pow(2, 18-i);
}
var tilegrid  = new ol.tilegrid.TileGrid({
    origin: [2200,23],
    resolutions: resolutions
});
var baidu_source = new ol.source.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];
        console.log(x+" "+y+" "+z);
        if(x<0){
            x = "M"+(-x);
        }
        if(y<0){
            y = "M"+(-y);
        }
        return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
    }
});
var baidu = new ol.layer.Tile({
    title : "百度地圖衛星服務",
    source : baidu_source
});
var map = new ol.Map({
    layers: [
       baidu
    ],
    // 設置顯示地圖的視圖
    view: new ol.View({
        center: [120.65527228569908, 31.296768058299392],
        projection: 'EPSG:4326',                       //指定投影采用4326坐標系
        zoom: 13               // 並且定義地圖顯示層級為13
    }),
    target: 'map'
});

 

參考：https://blog.csdn.net/u013594477/article/details/83988055

https://github.com/openlayers/openlayers/issues/3522