緣起

之前分享了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

總結

1. 之前分享的mapboxgl互聯網地圖糾偏插件只集成了高德地圖，有小伙伴留言希望支持百度地圖。
2. 插件加載互聯網地圖瓦片的原理是基于經緯度和瓦片編號的互轉算法。
3. 因為不同地圖使用的瓦片編碼規則不同，所以不同地圖的經緯度和瓦片編號的互轉算法也會不同。
4. 網上有人分享了不同地圖中，經緯度和瓦片編號的互轉算法，我們把百度地圖的互轉算法拿來使用，這樣插件就能支持百度地圖瓦片的糾偏了。
5. 本次插件升級除了增加百度地圖外，還增加了天地圖、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/），不得用于商業目的，基于本文修改后的作品務必以相同的許可發布。