mapboxgl 纠偏百度地图 gismapbox百度地图

缘起之前分享了mapboxgl 互联网地图纠偏插件，插件当时只集成了高德地图。
文章发布后，有小伙伴在后台留言，希望插件也能支持百度地图。
【mapboxgl 纠偏百度地图】刚好国庆假期有时间就研究了一下。
插件加载瓦片原理首先，插件之所以能够正确的加载互联网地图瓦片，关键是依托经纬度和瓦片编号的互转算法。
有了经纬度和瓦片编号的互转算法，插件就能根据当前地图窗口4个角的经纬度坐标，算出需要请求的瓦片编号。
再根据瓦片编号转经纬度的算法，算出请求到的每一个瓦片在地图上摆放的经纬度位置。
这样瓦片就能正确的显示在地图上了。
然后再监听地图范围的改变，当范围改变时，重复上述步骤，更新地图瓦片。
瓦片编码方式经纬度和瓦片编号的互转算法，在不同地图中是不一样的，这取决于不同地图的瓦片编码方式。
瓦片编码方式总结下来，可以分为4大类：谷歌XYZ、TMS、QuadTree、百度XYZ。
我们之前集成的高德地图瓦片，采用的就是谷歌xyz编码方式，这种编码方式，瓦片的坐标原点在世界地图的左上角，西经180 o北纬85 o左右，瓦片编号规则如下图所示：

文章图片

谷歌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
总结