缘起
之前分享了mapboxgl 当时只集成了高德地图的互联网地图纠偏插件。
文章发表后，一些朋友在后台留言，希望插件也能支持百度地图。
就在国庆假期有时间研究的时候。
插件加载瓷砖的原理
首先，插件能够正确加载互联网地图瓷砖的关键是依靠经纬度和瓷砖编号的互转算法。
通过经纬度和瓷砖编号的互转算法，插件可以根据当前地图窗口四个角的经纬度坐标计算要求的瓷砖编号。
然后根据编号转经纬度的算法，计算地图上要求的每个瓦片的经纬度位置。
这样，瓷砖就可以正确地显示在地图上。
然后监控地图范围的变化，重复上述步骤，更新地图瓷砖。
瓷砖编码方法
根据不同地图的瓷砖编码方法，经纬度和瓷砖编号的互转算法在不同地图上是不同的。
瓦片编码方式总结下来，可以分为4大类：谷歌XYZ、TMS、QuadTree、百度XYZ。
我们之前集成的高德地图瓦采用的是谷歌xyz瓦片的坐标原点在世界地图的左上角，西经180 o北纬85 o瓷砖编号规则如下图所示：
谷歌xyz编码方法的经纬度和瓷砖编号互转算法是公开的，详见：Slippy map tilenames，这个插件以前用过。
百度地图使用自己的百度地图百度XYZ方砖坐标的原点在原子午线与赤道的交汇处，瓷砖编号规则如下图所示：
网上有人研究了这4类瓦片编码方式的，经纬度坐标与瓦片编号互转算法，并在github共享源码。
我们将百度的部分互转算法添加到我们的纠偏插件中，这样纠偏插件就可以支持百度地图。
纠偏后效果如下：
插件升级
这次插件升级，除了新的百度地图，顺便把平时常用的天地图，OSM和GEOQ加进去。
天地图是大地2000坐标系wgs直接使用84坐标地图，误差小。OSM地图直接是wgs不需要纠正84坐标。
因此，两个直接用于插件 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/国内主地图瓦片坐标定义及计算原理/
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/)，不得用于商业目的，修改后的作品必须以同样的许可证发表。