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

刚好国庆假期有韶光就研究了一下。

插件加载瓦片事理

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

html百度地图插件mapboxgl 纠偏百度地图 Vue.js

有了经纬度和瓦片编号的互转算法,插件就能根据当前舆图窗口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/海内紧张舆图瓦片坐标系定义及打算事理/

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/),不得用于商业目的,基于本文修正后的作品务必以相同的容许发布。