Большой набор данных маркеров или точек в листе

Я хочу отобразить около 10.000 маркеров или точек на карте листовка. Я уже делал это обычным способом, и я обнаружил, что он медленнее по сравнению с Google Maps. Я ищу способ отображения нескольких элементов без проблем с производительностью.

Есть ли способ сделать это с помощью Leaflet?

Обновление: я не хочу рисовать яркими точками, которые не могут обрабатывать события. Я хочу нарисовать маркеры разных цветов и событий.

Ответы

Ответ 1

Проблема производительности связана с тем, что каждый маркер является отдельным элементом DOM. Браузеру удается выделить тысячи из них.

В вашем случае простым способом было бы использовать Circle Markers и отобразить их на холсте (например, используя карту preferCanvas или с помощью специального 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, чтобы вы все еще могли слушать такие события (например, щелчок мыши и т.д.).

Демо с 100 тыс. точек: https://jsfiddle.net/sgu5dc0k/

Ответ 2

Вы должны проверить https://github.com/robertleeplummerjr/Leaflet.glify. Он предоставляет способ рендеринга точек листов и полигонов с помощью веб-gl, что позволяет легче масштабировать.

Он также доступен для людей, которые используют R для производства своих листовок: https://github.com/tim-salabim/leaflet.glify

Версия R супер легкая.