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

高德WMTS瓦片地图服务地图图源规律

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

【增加】调用百度的蓝黑色背景地图

/**
 * 默认地图样式(normal)
 * 清新蓝风格(light)
 * 黑夜风格(dark)
 * 红色警戒风格(redalert)
 * 精简风格(googlelite)
 * 自然绿风格(grassgreen)
 * 午夜蓝风格(midnight)
 * 浪漫粉风格(pink)
 * 青春绿风格(darkgreen)
 * 清新蓝绿风格(bluish)
 * 高端灰风格(grayscale)
 * 强边界风格(hardedge)
 */
var baidu_layer = getBaiduCustomimage("midnight");

function getBaiduCustomimage(customid){

    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://api2.map.bdimg.com/customimage/tile?&x="+x+
                "&y="+y+"&z="+z+
                "&udt=20170428&scale=1&ak=E4805d16520de693a3fe707cdc962045&customid="+customid;
        }
    });
    return new ol.layer.Tile({
        source: baidu_source
    });
}