leaflet中如何优雅的解决百度、高德地图的偏移问题

话很少说，先上效果图

之前在作项目时，常常会听到客户说，大家这个地图是哪来的，太丑了，能不能换成百度地图……高德也行……

你们生活中，基本上都已经习惯了使用百度地图和高德地图，而在作项目时，用这两个地图作为底图，也基本成为了标配。但在开发中使用这两个地图，会遇到一个拦路虎，坐标偏移问题。

全球如今用的最多的坐标，是wgs84坐标，专业GPS设备和手机GPS定位获得的坐标，一般都是这个坐标。咱们国家为了保密须要，要求在国内发布的互联网地图，必需要在这个基础上进行加密偏移。加密后的坐标叫作国测局坐标，俗称火星坐标。高德地图、腾讯地图、国内的谷歌地图都是这个坐标。百度地图则是在火星坐标的基础上再次加密，造成了百度坐标。

leaflet有一个加载互联网地图的插件leaflet.ChineseTmsProviders，能够轻松实现加载高德、百度、天地图、谷歌等在线地图瓦片，但并无去解决它们的偏移问题。高德和百度地图却是提供了wgs84坐标转成本身坐标的在线接口，但仅支持单向转入，不支持反向再转回来，这会致使地图拾取坐标等功能没法获得wgs84坐标。

网上流传着一份wgs84坐标、火星坐标和百度坐标之间相互转换的算法。在多个项目中使用后发现，基本很准，偶尔有偏差，但很小，也就几米之内，平时用时基本感受不到。

如何集成到leaflet

两种思路：

第一种，把纠偏算法封装成一个接口，相似上面提到的百度、高德地图的坐标转换接口，在向地图加载数据前，先调用这个接口完成坐标的转换再添加到地图上。等因而把本身的数据偏移到互联网地图坐标上。这种是最多见的。

第二种，百度、高德的地图都是瓦片地图，每一张瓦片在加载时都会去计算它的经纬度位置，咱们能够在计算经纬度位置时加入纠偏算法，把瓦片的坐标位置纠偏回来。当全部瓦片的位置正确了，整个地图也就不存在偏移了。等因而把火星坐标或百度坐标的瓦片纠偏回wgs84坐标。

两种方案进行比较，第一种明显是被百度、高德的坐标转换接口带节奏了。leaflet是开源的，咱们能够经过研究源码实现对瓦片的纠偏，从而真正实现对地图的纠偏，而不是每次去调用坐标转换接口，让数据将错就错。

第二种方案还能够进一步延伸，把对瓦片的纠偏封装成插件，最终目标是引入这个插件之后实现对地图的自动纠偏。

瓦片位置

对瓦片纠偏，先要找到加载瓦片、计算瓦片位置的代码在哪。

上文中提到的，加载互联网地图的插件leaflet.ChineseTmsProviders本质是一个图层，它继承了TileLayer

TileLayer继承了GridLayer

加载瓦片的代码主要是在GridLayer中写的。

计算瓦片位置的代码在 _getTiledPixelBounds 方法和 _setZoomTransform 方法中。

瓦片纠偏

瓦片纠偏分三步：

第一步：准备坐标转换的算法

第二步：根据互联网地图名称获取坐标类型

第三步：在获取瓦片和地图缩放的方法中，调用纠偏算法

封装成插件

有个问题，既然要封装成插件，就要作到耦合，不能直接修改leaflet的源码。这里能够参考leaflet的源码，使用 include 方式对方法进行重写来作到修改源码。

include方式

经过例子了解一下：好比leaflet源码中 Polygon.toGeoJSON() 方法不是在 Polygon.js 文件中写的，而是用 include 方式写在了GeoJSON.js文件中。Polygon类原本是没有toGeoJSON()方法的，这样就增长了这个方法。若是Polygon类中已经有了toGeoJSON()方法，这样写会根据执行的顺序，后执行的会把先加载的重写。

最后，咱们把上面的代码封装成一个js插件，你们引用这个插件，就能实现了对地图的纠偏，不须要写一行js代码，这才是我心目中真正的优雅。

最终效果

下图是引用纠偏插件先后的对比：

注意：leaflet会以map初始化之后，加载的第一个图层的坐标，做为整个map的坐标，因此地图初始化之后，要第一个添加互联网地图做为底图。

总结

1. leaflet有一个加载国内互联网地图的插件，但存在坐标偏移问题。
2. 常见的偏移坐标有国测局坐标和百度坐标。网上有一份wgs84坐标国测局坐标和百度坐标相互转换的算法，须要本身集成到leaflet中
3. 纠偏算法集成到leaflet中有两种思路，一种是把本身的数据偏移到互联网地图，另外一种是把互联网地图的瓦片纠偏回本身的数据。
4. 采用第二种思路，把纠偏算法封装成插件，对互联网地图的瓦片纠偏，在插件中复写源码的方式最为优雅。

在线示例

在线示例

纠偏插件

不熟悉github的童鞋，能够微信搜索《GIS兵器库》或扫描下面的二维码，回复 “地图纠偏” 得到纠偏插件的下载连接。

---

本文会常常更新，请阅读原文：[http://gisarmory.xyz/blog/ind...，以免被陈旧、错误的知识误导。

微信搜索《GIS兵器库》或扫描上文的二维码，关注GIS兵器库公众号， 能够第一时间得到GIS文章更新。

本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、从新发布，但务必保留文章署名《GIS兵器库》（包含连接：  http://gisarmory.xyz/blog/），不得用于商业目的，基于本文修改后的做品务必以相同的许可发布。