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;// 定义GCJ02const gcj02Extent = [-7508.342789244, -7508.342789244, 7508.342789244, 7508.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}./appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'}),zIndex: 0});
关键的就是这一句:
projection: gcj02Mecator,
好了,完成!
总结
通过上面两种方式都可以实现 GPS 坐标和高德底图匹配,但是第一种有瑕疵,但是如果只用高德,不会切换其他类型的地图的时候可以使用,如果需要切换,建议使用方法二,这样的话给人的效果会舒服一点。
注意:不是所有的底图都可以使用方法二,首先无偏移的底图不能也不需要使用,然后百度地图不能使用,因为高德是使用 gcj02 方式加密偏移的,但是百度不是,所以百度用了解决不了偏移问题。
好了今天的内容就到这里,拜拜各位宝子们!!!