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;
第二步：在需要的页面引入。
这个就很简单了，做过 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 方式加密偏移的，但是百度不是，所以百度用了解决不了偏移问题。
好了今天的内容就到这里，拜拜各位宝子们！！！