緣起
之前分享了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/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/），不得用于商業目的，基于本文修改後的作品務必以相同的許可釋出。