openlayers 3加载百度高德google瓦片地图

Posted 2020-10-02 marost

1、加载高德地图

      //高德地图
      var AMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: ‘http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}‘
            })
          });

2、google地图

      //google地图
      var googleMapLayer = new ol.layer.Tile({  
            source: new ol.source.XYZ({  
                url: ‘http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0‘  
            })  
        });

3、百度地图

    //百度地图
    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];  
            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=20170809&scaler=1&p=1";  
        }  
    });  
  
    var baiduMapLayer = new ol.layer.Tile({  
        source: baidu_source  
    });

4、map中调用

      var map = new ol.Map({
        layers: [googleMapLayer],//AMapLayer, baiduMapLayer
        target: ‘map‘,
        view: new ol.View({
          center: [10997148, 4569099],
          zoom: 4
        })
      });