大型數據集中的標記或點在小冊子

我想在小冊子地圖上呈現大約10.000個標記或點。我已經以常規的方式做到了，並且發現與Google地圖相比，速度要慢一些。我正在尋找一種呈現多個元素而不會出現性能問題的方法。大型數據集中的標記或點在小冊子

有沒有辦法做到這一點與傳單？

更新：我不想繪製無法處理事件的亮點。我想要用不同的顏色和事件來繪製標記。

來源

2017-03-25 AFP_555

[在leafletjs繪製140K點]的可能的複製（http://stackoverflow.com/questions/37043791/plotting-140k-points-in-leafletjs） – ghybs

其實我是想繪製具有不同特徵的點或標記。顏色，形狀等。不只是創建一個覆蓋。 –

您可以在[畫布]（http://leafletjs.com/reference-1.0.3.html#map-prefercanvas）上嘗試使用圓標記（您可以調整它們的顏色） – ghybs

性能問題是由於每個標記都是單個DOM元素。瀏覽器在渲染數以千計的過程中掙扎。

在你的情況，一個簡單的解決方法是改爲使用Circle Markers，並讓他們在Canvas渲染（例如，使用地圖preferCanvas選項，或者你通過爲renderer選項爲每個環形標誌的特定canvas renderer）。這就是Google Maps默認情況下的工作方式：其標記實際上是在畫布上繪製的。

var map = L.map('map', { 
    preferCanvas: true 
}); 
var circleMarker = L.circleMarker(latLng, { 
    color: '#3388ff' 
}).addTo(map);

或

var map = L.map('map'); 
var myRenderer = L.canvas({ padding: 0.5 }); 
var circleMarker = L.circleMarker(latLng, { 
    renderer: myRenderer, 
    color: '#3388ff' 
}).addTo(map);

利用此解決方案，每個圓圈標記不再是一個單獨的DOM元素，而是由單頁繪製到一個單個帆布，這是爲了更容易處理瀏覽器。

此外，Leaflet還會跟蹤鼠標位置和相關事件，並觸發Circle Markers上的相應事件，以便您仍可以聽取這些事件（如鼠標點擊等）。

演示與100K點：https://jsfiddle.net/sgu5dc0k/

來源

2017-03-25 17:40:22 ghybs

大型數據集中的標記或點在小冊子

回答

相關問題