OpenLayers3加载离线百度地图(百度迁徙底图)

关于openlayers加载离线百度地图的东东好几年前就做过了，不过当时做的是2.0版本的。

自从好久没有去做可视化分析之后，也很少接触这些前端的JS的东西了。最近想实现一个东西的时候，才想起需要用到一些比较干净的底图。

于是刚好选用了百度迁徙后面的底图。

由于百度的JS包东西太多，需要的东西太复杂，于是就选用openlayers来进行测试。果然还是非常流畅。

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://localhost:8080/baidu2/"+z+"/"+parseInt(tileCoord[1]/100)+"/"+parseInt(tileCoord[1]/100)+"/"+x+"_"+y+".png"
        }
    });


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

通过上述模式，调用展示结果如下：