leaflet地图坐标偏移问题记录

leaflet加载各厂地图插件ChineseTmsProviders

ChineseTmsProviders插件可以使leaflet地图通过加载瓦片地图的方式加载不同厂商地图的方式

/* 以vue为例
安装
	npm install leaflet.chinatmsproviders
main.js引入
*/
import 'leaflet.chinatmsproviders/src/leaflet.ChineseTmsProviders.js'

ChineseTmsProviders提供了对高德、百度、谷歌、天地图等的支持页面引入天地图和高德地图

/* 以下是引入了高德和天地图*/
var gaoDe = L.tileLayer.chinaProvider('GaoDe.Normal.Map');
var tianDiTu = L.tileLayer.chinaProvider('TianDiTu.Normal.Map');

此处需要注意，天地图使用WGS-84坐标，高德使用的GCJ-02
具体关于坐标系的问题可移步至 坐标系
这个时候就出现了一个尴尬的问题，在切换底图的时候地图上的覆盖物（点，线，面）等都会有位置偏差，这个也是由于坐标系的不同导致的。

地图纠偏插件[leaflet.mapCorrection.min.js]

经过各种渠道和测试，最后发现了这款地图纠偏插件，亲测有效
git地址

/*
安装
	npm install leaflet.mapCorrection.min.js
也可以直接下载js文件后main.js引入，注意需要再leaflet.js后引入
*/
import '../static/js/leaflet.mapCorrection.min.js'

到此地图偏差的问题基本就ok了，目前只测试了天地图和高德，以下是对比图：

高德图例

天地图图例

希望leaflet能把纠偏插件集成一下就好了，常年混迹csdn，如有问题可站内探讨。