OpenLayers3加载百度地图

BaiduMapSource.js

/**
 * 加载百度地图
 * @returns {ol.layer.Tile}
 */
function loadBaiduMap() {
    //数据源信息
    var attribution = new ol.Attribution({
        html: 'Copyright:© 2015 Baidu, i-cubed, GeoEye'
    });
    //地图范围
    var extent = [-20037508.34, -20037508.34, 20037508.34, 20037508.34];
    //瓦片大小
    var tileSize = 256;
    //瓦片参数原点
    var origin = [0, 0];
    //百度地图在线服务地址
    var urlTemplate = "http://online2.map.bdimg.com/tile/?qt=tile&x=" + '{x}' + "&y=" + '{y}' + "&z=" + '{z}' + "&styles=pl&udt=20141219&scaler=1";
    //通过范围计算得到地图分辨率数组resolutions
    var resolutions = getResolutions(extent, tileSize);
    //实例化百度地图数据源
    var baiduSource = new ol.source.TileImage({
        attributions: [attribution],
        tileUrlFunction: function (tileCoord, pixelRatio, projection) {
            //判断返回的当前级数的行号和列号是否包含在整个地图范围内
            if (this.tileGrid != null) {
                var tileRange = this.tileGrid.getTileRangeForExtentAndZ(extent, tileCoord[0], tileRange);
                if (!tileRange.contains(tileCoord)) {
                    return;
                }
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            return urlTemplate.replace('{z}', z.toString())
                .replace('{y}', y.toString())
                .replace('{x}', x.toString());
        },
        projection: ol.proj.get('EPSG:3857'), //投影坐标系
        tileGrid: new ol.tilegrid.TileGrid({
            origin: origin, //原点，数组类型，如[0,0],
            resolutions: resolutions, //分辨率数组
            tileSize: tileSize //瓦片图片大小
        })
    });
    //实例化百度地图瓦片图层
    var baiduLayer = new ol.layer.Tile({
        source: baiduSource
    });
    //map.addLayer(baiduLayer); //添加Baidu地图图层
    return baiduLayer;
}

/**
 * 加载百度卫星地图
 * @returns {ol.layer.Tile}
 */
function loadBaiduMapSate() {
    //数据源信息
    var attribution = new ol.Attribution({
        html: 'Copyright:© 2015 Baidu, i-cubed, GeoEye'
    });
    //地图范围
    var extent = [-20037508.34, -20037508.34, 20037508.34, 20037508.34];
    //瓦片大小
    var tileSize = 256;
    //瓦片参数原点
    var origin = [0, 0];
    //百度地图在线服务地址
    var urlTemplate = "https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/starpic/?qt=satepc&u=x="+ '{x}' +";y="+ '{y}' +";z="+'{z}'+";v=009;type=sate&fm=46&app=webearth2&v=009&udt=20190425";
    //通过范围计算得到地图分辨率数组resolutions
    var resolutions = getResolutions(extent, tileSize);
    //实例化百度地图数据源
    var baiduSource = new ol.source.TileImage({
        attributions: [attribution],
        tileUrlFunction: function (tileCoord, pixelRatio, projection) {
            //判断返回的当前级数的行号和列号是否包含在整个地图范围内
            if (this.tileGrid != null) {
                var tileRange = this.tileGrid.getTileRangeForExtentAndZ(extent, tileCoord[0], tileRange);
                if (!tileRange.contains(tileCoord)) {
                    return;
                }
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            return urlTemplate.replace('{z}', z.toString())
                .replace('{y}', y.toString())
                .replace('{x}', x.toString());
        },
        projection: ol.proj.get('EPSG:3857'), //投影坐标系
        tileGrid: new ol.tilegrid.TileGrid({
            origin: origin, //原点，数组类型，如[0,0],
            resolutions: resolutions, //分辨率数组
            tileSize: tileSize //瓦片图片大小
        })
    });
    //实例化百度地图瓦片图层
    var baiduLayer = new ol.layer.Tile({
        source: baiduSource
    });
    //map.addLayer(baiduLayer); //添加Baidu地图图层
    return baiduLayer;
}

/**
 * 通过范围计算得到地图分辨率数组resolutions
 * @param extent
 * @param tileSize
 * @returns {any[]}
 */
function getResolutions(extent, tileSize) {
    var width = ol.extent.getWidth(extent);
    var height = ol.extent.getHeight(extent);
    var maxResolution = (width <= height ? height : width) / (tileSize);//最大分辨率
    var resolutions = new Array(16);
    var z;
    for (var z = 0; z < 16; ++z) {
        resolutions[z] = maxResolution / Math.pow(2, z);
    }
    return resolutions; //返回分辩率数组resolutions
}

/**
 * 重新设置地图视图
 * @param {ol.Coordinate} center 中心点
 * @param {number} zoom 缩放级数
 */
function setMapView(center, zoom) {
    var view = map.getView(); //获取地图视图
    view.setCenter(center); //平移地图
    view.setZoom(zoom); //地图缩放
}

实现效果：