openlayers加载百度地图作为底图坐标偏移的解决办法

最新推荐文章于 2024-08-16 16:06:24 发布

aiqi1964

最新推荐文章于 2024-08-16 16:06:24 发布

阅读量1.8k

点赞数

原文链接：http://www.cnblogs.com/mr-hu2009/p/10873668.html

版权

本文介绍了在OpenLayers中加载百度地图作为底图时遇到的坐标偏移问题及其解决方案。由于百度地图使用了加密的BD-09坐标系，直接加载会导致与其它地图服务（如天地图）存在坐标差异。通过将百度地图坐标转换为baiduMercator投影，可以显著减小这种偏差。参考了SegmentFault和GitHub上的相关讨论，经过处理后的代码成功实现了百度地图在OpenLayers中的正确显示。

摘要由CSDN通过智能技术生成

openlayers加载天地图作为底图，在网上找了公开的服务资源，要做到百度地图与天地图之间切换，同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差，最初的代码是这样的：

var projection = ol.proj.get("EPSG:3857");       //加载百度地图采用3857坐标系
var resolutions = [];
for(var i=0; i<19; i++){
    resolutions[i] = Math.pow(2, 18-i);
}
var tilegrid  = new ol.tilegrid.TileGrid({
    origin: [2200,23],
    resolutions: resolutions
});
var baidu_source = new ol.source.TileImage({
    projection: "EPSG:3857",
    tileGrid: tilegrid,
    tileUrlFunction: function(tileCoord, pixelRatio, proj){
        if(!tileCoord){
            return "";
        }
        var z = tileCoord[0];
        var x = tileCoord[1];
        var y = tileCoord[2];
        console.log(x+" "+y+" "+z);
        if(x<0){
            x = "M"+(-x);
        }
        if(y<0){
            y = "M"+(-y);
        }
        return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
    }
});
var baidu = new ol.layer.Tile({
    title : "百度地图卫星服务",
    source : baidu_source
});
var map = new ol.Map({
    layers: [
       baidu
    ],
    // 设置显示地图的视图
    view: new ol.View({
        center: [120.65527228569908, 31.296768058299392],
        projection: 'EPSG:4326',                       //指定投影采用4326坐标系
        zoom: 13               // 并且定义地图显示层级为13
    }),
    target: 'map'
});

采用上面的方式加载，百度地图能够加载出来，但是与天地图总是会存在坐标上的偏移，原因是百度地图的坐标系很特殊，采用加密之后的BD-09坐标系，因此要想在地图上正常显示出来，必须转换成3857坐标系，但是转换之后还是有偏差；经过处理方法，转换成baiduMercator 投影后发现偏差比3857坐标系小了很多，经过处理后的代码是这样的：

var forEachPoint = function(func) {
  return function(input, opt_output, opt_dimension) {
    var len = input.length;
    var dimension = opt_dimension ? opt_dimension : 2;
    var output;
    if (opt_output) {
      output = opt_output;
    } else {
      if (dimension !== 2) {
        output = input.slice();
      } else {
        output = new Array(len);
      }
    }
    for (var offset = 0; offset < len; offset += dimension) {
      func(input, output, offset)
    }
    return output;
  };
};

var sphericalMercator = {}

var RADIUS = 6378137;
var MAX_LATITUDE = 85.0511287798;
var RAD_PER_DEG = Math.PI / 180;

sphericalMercator.forward = forEachPoint(function(input, output, offset) {
  var lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE);
  var sin = Math.sin(lat * RAD_PER_DEG);

  output[offset] = RADIUS * input[offset] *