緣起
之前分享了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地圖。
參考資料
瓦片地圖原理：
國內主要地圖瓦片座標系定義及計算原理：
Slippy map tilenames：
原文地址：http://gisarmory.xyz/blog/index.html?blog=mapboxglMapCorrection4
關注《GIS兵器庫》， 只給你網上搜不到的GIS知識技能。
本文章採用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名《GIS兵器庫》（包含連結： http://gisarmory.xyz/blog/），不得用於商業目的，基於本文修改後的作品務必以相同的許可釋出。