性能低下，同時在小冊子地圖中添加了許多圈子

我在嘗試將大量點添加到畫布渲染圖層時遇到了使用Leaflet的問題。性能低下，同時在小冊子地圖中添加了許多圈子

我用下面的一個類似的代碼創建85.000點：

首先我打開我的所有點四叉樹，一個點是與其他一些具體的東西一類，但對於單張的東西，我們有下面的代碼：

var myCanvasRenderer = L.canvas({ paneName }); 

var geojsonMarkerOptions = { fillColor: "#AFC5CA", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8, stroke: false, renderer: myCanvasRenderer, pane: paneName } 

point.circle = L.circle(latlng, 0.5, myHandler.geojsonMarkerOptions);

然後點添加到一個四叉樹。在地圖上移動時，我對處理事件繪製視窗內的點數，點數本身繪製調用下面的方法：

circle.addTo(myLayer);

我已經限制了繪製於20.000點。達到此限制時停止該過程，並使用控制檯測量時間。時間

使用circle.addTo調用時，該過程花費大約80秒來繪製20.000點。評論該呼叫，該過程花費約8秒來「畫」20,000點。（「繪製」，因爲不是真的繪製）

所有的點必須繪製，所以涉及聚類點的解決方案不是一個選項。
我必須有一個處理程序的繪製的圓，因爲後來在我需要顯示/隱藏一些點或改變它們的顏色應用

我怎樣才能加快點的圖紙？傳單庫中是否有類似「bulkAdd」的方法？

在此先感謝您的幫助

來源

2017-07-12 Eduardo Poças

你試過'preferCanvas'地圖選項嗎？ – ghybs

你好ghybs，我沒有嘗試過這個選項，因爲我已經在傳遞給圓圈的geojsonMarkerOptions的渲染器屬性中設置了畫布。所以，圓圈已經繪製在畫布上，而不是在SVG渲染器上 –

什麼很可能的情況是，你的圈子實際上是不是在你指定的帆布畫。

您可以使用您的瀏覽器DOM檢查器來檢查。

在單張1.XX中，Circle的半徑被指定爲radius選項，而不是第二個參數：

L.circle([50.5, 30.5], {radius: 200}).addTo(map);

在你的代碼

因此，第二個參數0.5沒有效果，你的第三個參數（myHandler.geojsonMarkerOptions）也沒有效果，導致不使用您的畫布。

來源

2017-07-14 04:35:50 ghybs

您好，我已更新爲不使用已棄用方法但僅使用新方法的代碼，所以我已將radius：0.5參數傳遞給我geojsonMarkerOptions並只用兩個參數調用構造函數。然而，這並沒有解決問題，因爲它仍然需要大約80秒來繪製20K點 –

確保您正確使用畫布，例如如上所述使用您的DOM檢查器。我在這裏有一個100k圓形標記的例子：https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740它在我的機器上加載幾秒鐘。用Circles替換它們可以獲得類似的性能。 – ghybs

我檢查過了，我們正確地使用了畫布渲染器。沒有與每個圈子關聯的DOM實體。我已經在你建議的問題中檢查了你的答案，並且還檢查了你的小提琴示例：https：//jsfiddle.net/sgu5dc0k/。如果縮小同一個示例，則會看到地圖掛起，無法回答100K點。即它僅適用於100K點，因爲它不在視口之外呈現它們。 –

性能低下，同時在小冊子地圖中添加了許多圈子

回答

相關問題