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^2function 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;

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

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

 import gcj02Mecator from './gcj02Mecator'

第三步：使用

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

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

  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});

关键的就是这一句：

projection: gcj02Mecator,

好了，完成！

总结

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

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

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