mapboxgl 纠偏百度地图

缘起

之前分享了mapboxgl 互联网地图纠偏插件，插件当时只集成了高德地图。

文章发布后，有小伙伴在后台留言，希望插件也能支持百度地图。

刚好国庆假期有时间就研究了一下。

插件加载瓦片原理

首先，插件之所以能够正确的加载互联网地图瓦片，关键是依托经纬度和瓦片编号的互转算法。

有了经纬度和瓦片编号的互转算法，插件就能根据当前地图窗口4个角的经纬度坐标，算出需要请求的瓦片编号。

再根据瓦片编号转经纬度的算法，算出请求到的每一个瓦片在地图上摆放的经纬度位置。

这样瓦片就能正确的显示在地图上了。

然后再监听地图范围的改变，当范围改变时，重复上述步骤，更新地图瓦片。

瓦片编码方式

经纬度和瓦片编号的互转算法，在不同地图中是不一样的，这取决于不同地图的瓦片编码方式。

瓦片编码方式总结下来，可以分为4大类：谷歌XYZ、TMS、QuadTree、百度XYZ。

我们之前集成的高德地图瓦片，采用的就是谷歌xyz编码方式，这种编码方式，瓦片的坐标原点在世界地图的左上角，西经180 º北纬85 º左右，瓦片编号规则如下图所示：

谷歌xyz编码方式的经纬度和瓦片编号互转算法是公开的，详见：Slippy map tilenames，插件之前就是用的这个。

百度地图采用的是自己的百度XYZ方式，瓦片坐标的原点在本初子午线和赤道的交汇处，瓦片编号规则如下图所示：

网上有人研究了这4类瓦片编码方式的，经纬度坐标与瓦片编号互转算法，并在github上分享了源码。

我们把百度的那部分互转算法拿来，加入到我们的纠偏插件中，这样纠偏插件就能支持百度地图了。

纠偏后效果如下：

插件升级

插件这次升级，除了新增百度地图以外，顺带把平时常用的天地图、OSM和GEOQ也加了进来。

天地图是大地2000坐标系，可以在wgs84坐标地图上直接使用，误差很小。OSM地图直接是wgs84坐标，不需要纠偏。

所以它两个在插件中直接使用 mapboxgl 的原生接口，其它地图则使用我们写的自定义图层接口。

GeoQ地图瓦片的编码方式和高德相同，改个瓦片请求地址就可以。

把它们都收集到一起，看效果，真是爽歪歪

最后，在 mapboxgl 中还是推荐使用矢量瓦片，展示效果会好很多，上面的栅格瓦片推荐作为补充使用。

目前网上还没有免费的矢量瓦片地图资源，这个问题可以通过本地发布OSM地图矢量瓦片的方式解决。

本地发布OSM地图矢量瓦片的方式可以参考之前写的文章 OSM地图本地发布-环境搭建、OSM地图本地发布-如何生成各省市矢量地图

插件地址

mapboxgl互联网地图纠偏插件

在线示例：http://gisarmory.xyz/blog/index.html?demo=mapboxglMapCorrection4

代码地址：http://gisarmory.xyz/blog/index.html?source=mapboxglMapCorrection3

总结

之前分享的mapboxgl互联网地图纠偏插件只集成了高德地图，有小伙伴留言希望支持百度地图。
插件加载互联网地图瓦片的原理是基于经纬度和瓦片编号的互转算法。
因为不同地图使用的瓦片编码规则不同，所以不同地图的经纬度和瓦片编号的互转算法也会不同。
网上有人分享了不同地图中，经纬度和瓦片编号的互转算法，我们把百度地图的互转算法拿来使用，这样插件就能支持百度地图瓦片的纠偏了。
本次插件升级除了增加百度地图外，还增加了天地图、OSM地图和GeoQ地图。

参考资料

瓦片地图原理：

https://segmentfault.com/a/1190000011276788

国内主要地图瓦片坐标系定义及计算原理：

https://cntchen.github.io/2016/05/09/%E5%9B%BD%E5%86%85%E4%B8%BB%E8%A6%81%E5%9C%B0%E5%9B%BE%E7%93%A6%E7%89%87%E5%9D%90%E6%A0%87%E7%B3%BB%E5%AE%9A%E4%B9%89%E5%8F%8A%E8%AE%A1%E7%AE%97%E5%8E%9F%E7%90%86/

Slippy map tilenames：

https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames

原文地址：http://gisarmory.xyz/blog/index.html?blog=mapboxglMapCorrection4

关注《GIS兵器库》，只给你网上搜不到的GIS知识技能。

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