共计 1778 个字符，预计需要花费 5 分钟才能阅读完成。
缘起
之前分享了 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/11…
国内次要地图瓦片坐标系定义及计算原理：
https://cntchen.github.io/201…
Slippy map tilenames：
https://wiki.openstreetmap.or…
原文地址：http://gisarmory.xyz/blog/index.html?blog=mapboxglMapCorrection4
关注《GIS 兵器库》，只给你网上搜不到的 GIS 常识技能。
本文章采纳 常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS 兵器库》（蕴含链接：http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。