关于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
})
});
通过上述模式，调用展示结果如下：
