mapboxgl 網際網路地圖糾偏外掛（三）

先說結論，結論當然是：大功告成，喜大普奔。看效果圖：

好了，接下來說一下過程

先回顧一下這個系列的第一篇和第二篇

第一篇是直接改的 mapboxgl 原始碼，在原始碼裡面對瓦片的位置進行糾偏，遇到的問題是，地圖旋轉時會有錯位，還有瓦片糾偏後螢幕邊緣會有空白。

第二篇是寫了一個 mapboxgl 自定義圖層，遇到的問題是，地圖在大比例尺時，瓦片會瘋狂抖動。

這兩篇文章發出後，有兩位大牛針對上面的問題，給出了建設性的意見。

一位是思否上的網友“undefined”（這個不是bug，是他的名稱），他在看了第一篇文章後，找出了地圖旋轉時瓦片錯位的原因，並給出瞭解決方法。

按照上面的思路，我重新寫了一個不包含旋轉引數的 pixelMatrix 矩陣後，錯位問題解決。

解決了錯位後，接下來解決螢幕邊緣出現空白的問題。

我的思路是，在計算瓦片的顯示範圍時，對顯示範圍進行偏移，讓程式按偏移的範圍去請求瓦片，這樣後續瓦片糾偏後，就不會出現空白區域了。

在二維地圖中，瓦片顯示的範圍是根據螢幕 4 個角的座標直接計算的。但 mapboxgl 是三維地圖，三維地圖的顯示範圍是根據相機的引數來計算的，需要判斷相機視椎體和瓦片的相交關係，這裡還沒有整明白。

所以，這個方案就又卡這兒了。

另一位網友是 mapboxgl 技術交流群裡的“可樂瓶裡泡枸杞”，他指出了第2篇文章中，大比例尺時地圖抖動問題的原因，並給出瞭解決思路。

上圖的部落格連結中詳細說明了地圖抖動的原因，大概意思是：webgl 只支援 float32 精度，而 JS 預設是採用 float64 精度，JS 中的高精度數字向webgl 傳輸時會造成精度損失，這種損失帶來的影響就是地圖抖動，比例尺越大抖動的越厲害。

如何能避免精度的損失？部落格中介紹了 deck.gl 的做法：

將經緯度座標轉墨卡託座標這一步，放到 webgl 中來實現，目的是為了使用 GPU 計算
在比例尺大於12級時，不再直接使用墨卡託座標，而是計算墨卡託座標和螢幕中心點的相對位置。使用 float32 的精度儲存相對位置是完全沒有問題的，這樣就規避了精度損失的問題
重寫 view 和 Projection 矩陣

按這個思路，我將上次寫的 mapboxgl 自定義圖層糾偏外掛進行了改造，最終大比例尺時地圖不再抖動了。

但又很快遇到了新問題：拖動地圖時，瓦片和滑鼠的移動距離不一致。