1. 程式人生 > 實用技巧 >使用OpenLayers顯示百度地圖

使用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 }) });

問題是怎麼傳入經緯度座標呢?

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'
});