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

You may also like...