MapBox GL JS性能差異的原因

Question

此問題適用於瞭解MapBox GL JS內部結構的人。

我正在使用MapBox GL JS渲染多達40,000個多邊形的地理地圖，每個多邊形都根據該多邊形的「所有者」進行着色。每個擁有者通常有多個多邊形，並且每個多邊形的「擁有者」可能隨時間而改變。業主人數可以從1人到1000人左右。我遇到性能問題（這取決於我如何處理它），所以我嘗試了幾種不同的策略。

1. 將數據驅動樣式用於「填充顏色」，其中有單個源和單個圖層。我已經嘗試了多邊形ID和「所有者」ID作爲數據驅動樣式的類別。
2. 使用過濾圖層，其中每個「所有者」具有單個來源和單獨的圖層。再次，我已經嘗試了多邊形ID和「所有者」ID作爲篩選條件。
3. 爲每個「所有者」使用單獨的來源和圖層。

選項三具有最佳的繪圖速度。當我縮放和平移時，圖層渲染速度非常快。但是每當我更改圖層的所有者時，我必須調用setData，並且setData會泄漏內存，所以最終會導致頁面崩潰。這個問題2607被關閉爲不可操作，所以我不期待解決這個問題。

選項一和二與初始縮放畫好，但是當我放大時，他們很慢重新繪製瓷磚。我看着鋸齒狀的低細節瓦片，直到20-30秒後呈現出來。請注意，如果我使用「所有者」ID而不是「多邊形」ID，當「所有者」更改會導致內存泄漏時，我仍然需要調用setData。如果我使用多邊形ID，則只需在「所有者」更改時更新圖層過濾器或填充顏色類別。但是，如果我使用「多邊形」ID，我沒有得到明顯的性能差異，所以我認爲沒關係。

所以我的問題是爲什麼選項三要快得多，當我放大渲染？這是否與分配到繪圖的工人數量有關？在選項一和二中，有一個單一來源，所以這意味着圖紙只使用一名工人？而在選項三中，每個「所有者」都有一個單獨的源，所以我有多個工作人員在進行繪圖？

Answer 1

我想你會需要各種技術來解決本質上是細節水平（LOD）問題。我做了類似的工作，涉及繪製一個國家的多個地區來表示一個州內的各個地區，您必須調整數據以適合該視圖。

我會推薦的第一件事是爲您的區域創建不同級別的細節。第一次掃描可以通過移除區域頂點自動完成，區域頂點與其相鄰點在直線的幾度之內對齊（地理位置）。可以認爲這是因爲它們在一條直線上去除了許多不會將細節添加到區域邊界的小點。由於這可以是一個自動化（甚至預先存儲）的步驟，您可以根據縮放級別創建不同級別的細節。

第二個建議是視圖空間剔除。也就是說，如果一個區域不在視口內，請不要渲染它！如果你試圖完成這個頂點完美，你最終會遇到和以前一樣的CPU問題，所以我建議創建一個Region bounding box（如果你只使用軸對齊的查看，建議提出一個建議，因爲它是最簡單的解）。

如果您需要非軸對齊的區域，只需創建一個邊界圓（基於邊界頂點的距離與區域的地理中心距離最大）。

我建議你的各種困難是場景複雜性問題的衍生物。解決這個問題，你將有一個更有效的系統來處理。

祝你好運！

Answer 2

我建議使用分類數據驅動樣式執行data-join。這使您可以從幾何中解耦您的數據屬性更新。

查看https://www.mapbox.com/mapbox-gl-js/example/data-join/瞭解如何將瀏覽器中的JSON數據加入到矢量圖片幾何圖形的示例。這應該可以擴展到100多萬個功能。