vue openlayers 加载高德地图等 gcj02 的图层偏移问题

这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题，所以说呢这篇博文稍微说一下解决办法。

前言

首先哈，遇到这个问题是肯定的，因为 openlayers 是使用的标准坐标系，但是像是高德地图或者是谷歌地图他们在国内都是使用的偏移坐标，所以说直接不处理放上去就会出问题，看到坐标有一公里左右的偏差。

错误案例

比如说有一个案例，我们在 openlayers 地图引擎上加载 OSM 地图，这个地图是没有偏移的，然后在有一个按钮切换高德地图，高德地图是国内做过偏移的地图，然后我们给两个地图渲染相同的一个点，就会发现，地图加载完成之后，这个坐标点是有问题的。

上面可以看到，OSM 地图加载这个点的时候是在中国美术馆里面的，但是我们切换到偏移的高德地图看一下效果。

发下这个点在高德的图层上面是不在美术馆里面。

那这两种情况哪个是对的呢？

OSM 是对的，高德是错误的，为啥呢，因为国家要求，中国地图引擎在中国境内的坐标点必须进行偏移处理，不许直接暴露正确位置，所以说高德作为一家中国地图引擎，是做了加密偏移的。因此在国外的 openlayers 地图引擎上是错误的。

也就是说，一张图看清原因。

也就是说，高德图层整个都往东北偏移了。

解决方法

正确的是无论高德地图还是OSM地图在展示相同坐标点的时候，需要显示的位置是一样的，这样才会保证渲染的GPS坐标数据的准确性，这个问题怎么解决呢，有两种方式。

方式一

第一种方式很简单，就是在高德图层上面，直接将坐标点转换一下展示。

也就是说把坐标的GPS坐标转换成高德坐标在进行标注，那这样子的话，坐标点就和底图对应起来了，位置就不是错误的啦。

这种方式在我之前写的博客里面有过介绍，所以说在这个地方我就不在叨逼叨了，需要的话去看我之前的博客：实现高德坐标转GPS坐标

但是这种方式呢，有一个问题哈，如果我在展示过程中中途切换地图，如果偏移的和有偏移的相互切换的话，你会发现地图有很明显的移动视觉差，这不是bug，这是很正常的，我找个效果图看看能不能找到哈。

找到了！

看上面的图，看故宫那个长方体的位置，天地图是没有偏移的，他的位置是正确的，但是高德地图是偏移的，所以说切换高德地图和天地图的是后，我地图是绝对没有拖动的，切换完成之后，故宫那个位置变了是吧，不是之前的位置了，高德的故宫往东北去了，这就是其中一个不好的地方。

如果你用这种方式解决偏移的问题，可以，但是切换地图就会有这个效果，而且如果地图上有GPS坐标点的话，切换完高德的底图，需要对坐标点重新绘制然后重新渲染来适应高德的图层。

方拾贰

这种方法是比较建议使用的，是啥呢，就是点的坐标不转换，GPS设备采集是多少就是多少。然后高德不是做了往东北方向的偏移嘛，那就给他拉回来！

先看一下效果哈。还是切换 OSM 和高德地图，有一个坐标点在中国美术馆上，然后把高德图层拉正确之后，看一下效果。

看上面截图，切换了之后，位置是对的。

这样的话，切换底图之后，只需要把偏移的底图给拉回来就可以了，其他的东西都不需要动，我的妈呀！太棒了吧！！！

实现

超级简单，三步完成。

第一步：需要一个工具库。

我们在项目中创建一个 gcj02Mecator.js 文件。

文件里面的内容直接复制进去就可以了，这个一点儿不需要改。

// 导入proj控件,使用其方法注入gcj02坐标系
import * as proj from 'ol/proj';

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 gcj02 = {};
var i = 0;
var PI = Math.PI;
var AXIS = 6378245.0;
var OFFSET = 0.00669342162296594323; // (a^2 - b^2) / a^2

function delta(wgLon, wgLat) {
  var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
  var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
  var radLat = (wgLat / 180.0) * PI;
  var magic = Math.sin(radLat);
  magic = 1 - OFFSET * magic * magic;
  var sqrtMagic = Math.sqrt(magic);
  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI);
  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI);
  return [dLon, dLat];
}

function outOfChina(lon, lat) {
  if (lon < 72.004 || lon > 137.8347) {
    return true;
  }
  if (lat < 0.8293 || lat > 55.8271) {
    return true;
  }
  return false;
}

function transformLat(x, y) {
  var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0;
  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0;
  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0;
  return ret;
}

function transformLon(x, y) {
  var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0;
  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0;
  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0;
  return ret;
}

gcj02.toWGS84 = forEachPoint(function (input, output, offset) {
  var lng = input[offset];
  var lat = input[offset + 1];
  if (!outOfChina(lng, lat)) {
    var deltaD = delta(lng, lat);
    lng = lng - deltaD[0];
    lat = lat - deltaD[1];
  }
  output[offset] = lng;
  output[offset + 1] = lat;
});

gcj02.fromWGS84 = forEachPoint(function (input, output, offset) {
  var lng = input[offset];
  var lat = input[offset + 1];
  if (!outOfChina(lng, lat)) {
    var deltaD = delta(lng, lat);
    lng = lng + deltaD[0];
    lat = lat + deltaD[1];
  }
  output[offset] = lng;
  output[offset + 1] = lat;
});

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] * RAD_PER_DEG;
  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2;
});

sphericalMercator.inverse = forEachPoint(function (input, output, offset) {
  output[offset] = input[offset] / RADIUS / RAD_PER_DEG;
  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG;
});

var projzh = {};
projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
  let output = gcj02.fromWGS84(input, opt_output, opt_dimension);
  return projzh.ll2smerc(output, output, opt_dimension);
};
projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
  let output = projzh.smerc2ll(input, input, opt_dimension);
  return gcj02.toWGS84(output, opt_output, opt_dimension);
};
projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
  let output = projzh.smerc2ll(input, input, opt_dimension);
  output = gcj02.fromWGS84(output, output, opt_dimension);
  return projzh.ll2smerc(output, output, opt_dimension);
};
projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
  let output = projzh.smerc2ll(input, input, opt_dimension);
  output = gcj02.toWGS84(output, output, opt_dimension);
  return projzh.ll2smerc(output, output, opt_dimension);
};

projzh.ll2smerc = sphericalMercator.forward;
projzh.smerc2ll = sphericalMercator.inverse;

// 定义GCJ02
const gcj02Extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244];
const gcj02Mecator = new proj.Projection({
  code: 'GCJ-02',
  extent: gcj02Extent,
  units: 'm',
});
proj.addProjection(gcj02Mecator);
// 将4326/3857转为gcj02坐标的方法定义
proj.addCoordinateTransforms('EPSG:4326', gcj02Mecator, projzh.ll2gmerc, projzh.gmerc2ll);
proj.addCoordinateTransforms('EPSG:3857', gcj02Mecator, projzh.smerc2gmerc, projzh.gmerc2smerc);

// 我使用的react，所以这里需要导出定义的gcj02Mecator，提供给外部使用
export default gcj02Mecator;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

第二步：在需要的页面引入。

这个就很简单了，做过 vue 的都会了，不细说，直接上代码。

 import gcj02Mecator from './gcj02Mecator'
1

第三步：使用

在偏移的地图上给他用一下，这个工具方法会把地图图层拉回来。

比如我们刚刚做的高德地图图层。

  var gdMapLayer = new TileLayer({
    source: new XYZ({
      projection: gcj02Mecator,
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    }),
    zIndex: 0
  });
1
2
3
4
5
6
7

关键的就是这一句：

projection: gcj02Mecator,
1

好了，完成！

总结

通过上面两种方式都可以实现 GPS 坐标和高德底图匹配，但是第一种有瑕疵，但是如果只用高德，不会切换其他类型的地图的时候可以使用，如果需要切换，建议使用方法二，这样的话给人的效果会舒服一点。

注意：不是所有的底图都可以使用方法二，首先无偏移的底图不能也不需要使用，然后百度地图不能使用，因为高德是使用 gcj02 方式加密偏移的，但是百度不是，所以百度用了解决不了偏移问题。

好了今天的内容就到这里，拜拜各位宝子们！！！