Duży zbiór dat markerów lub kropek w ulotce

Question

Chcę zrobić około 10.000 znaczników lub kropek na mapie ulotek. Zrobiłem to już normalnie i okazało się, że jest znacznie wolniej niż w Google Maps. Szukam sposobu renderowania wielu elementów bez problemów z wydajnością.

Czy można to zrobić z ulotką?

Aktualizacja: Nie chcę drukować z jasnymi kropkami, które nie są w stanie obsłużyć zdarzeń. Chcę właściwie malować znaczniki różnymi kolorami i wydarzeniami.

Answer 1

Problem z wydajnością wynika z faktu, że każdy znacznik jest indywidualnym elementem DOM. Przeglądarki zmagają się z renderowaniem ich tysięcy.

W twoim przypadku, to łatwe obejście byłoby zamiast używać Circle Markers i mieć je wykonane na kanwie (na przykład używając mapy preferCanvas opcji, albo z konkretnym canvas renderer które przechodzą jak renderer opcja dla każdego kręgu Marker). Tak domyślnie działają Mapy Google: znaczniki są rysowane na płótnie.

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

lub

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

W tym rozwiązaniu, każda Koło znacznik nie jest pojedynczy element DOM, lecz jest pobierany przez dla pacjenta na kolumnę pojedynczych Obraz, który jest o wiele łatwiejsze uchwyt dla przeglądarki.

Co więcej, Ulotka nadal śledzi pozycję myszy i powiązane z nią zdarzenia i uruchamia odpowiednie zdarzenia na swoich znacznikach okręgu, dzięki czemu można nadal słuchać takich zdarzeń (np. Kliknięcia myszą itp.).

Demo z 100k punktów: https://jsfiddle.net/sgu5dc0k/