OpenLayer加载离线百度地图实现及其问题
OpenLayer加载离线百度地图实现及其问题
1.离线地图使用切片为太乐地图下载器下载,下载格式为百度地图切片,下载方法可看我之前写的博客;
2.使用百度API转换坐标后定位北客站准确,使用ol api转换地点偏移较大,猜测是由于百度地图切片还存在偏移算法问题,请大神指教;
3.搭建虚拟地图服务路径之前博客已详细介绍;
4.参考资料
http://www.360doc.com/content/18/0126/16/52383422_725304419.shtml
http://blog.csdn.net/sparkexpert/article/details/53899463
5.代码如下;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Openlayer加载离线百度地图</title>
<link href="../css/ol.css">
<script src="../js/ol,js.js"></script>
<script src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<div style="float: left;width: 50%">
<p>百度地图api转后的北客站坐标</p>
<div id="map" style="height: 500px;"></div>
</div>
<div style="float: right;width: 50%">
<p>OpenLayer自带api转后的北客站坐标</p>
<div id="map2" style="height: 500px;"></div>
</div>
</body>
<script>
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:8087/itms/baidumap/"+z+"/"+x+"/"+y+".jpg"
}
});
var baidu_layer = new ol.layer.Tile({
source: baidu_source
});
/* 百度转换方法填入坐标系,地址统一为北客站
var projection =new BMap.MercatorProjection();
百度地图拾取的坐标
var point = projection.lngLatToPoint(new BMap.Point(108.94318,34.385242));
x:12127631.28
y:4056293.97
*/
var map = new ol.Map({
target: 'map',
layers: [baidu_layer],
view: new ol.View({
center:[12127787.24,4056019],
zoom: 15
})
});
/*
使用ol自带的转换使用方式,,因为地图是百度切片的原因出现比较大的偏差
*/
var map = new ol.Map({
target: 'map2',
layers: [baidu_layer],
view: new ol.View({
//谷歌地图拾取的坐标
center : ol.proj.transform([108.938981,34.375414], 'EPSG:4326', 'EPSG:3857'),
zoom: 15
})
});
</script>
</html>
转载自:https://blog.csdn.net/wo_buzhidao/article/details/79174940