Основные возможности библиотеки Leaflet.markercluster

1. Кластеризация маркеров

• Автоматическая группировка маркеров в кластеры при уменьшении масштаба карты. Например, при 1000 маркерах они объединяются в группы с числовыми метками (10, 100+ и т.д.) .
• Настройка радиуса кластеризации через параметр maxClusterRadius (по умолчанию 80 пикселей). Уменьшение значения создает больше мелких кластеров .
• Отключение кластеризации на заданном уровне масштаба с помощью disableClusteringAtZoom. Например, на максимальном zoom маркеры отображаются по отдельности .

2. Кастомизация внешнего вида

• Создание пользовательских иконок для кластеров через функцию iconCreateFunction. Например, можно изменить цвет, размер или добавить HTML-элементы в зависимости от количества маркеров в кластере .

  L.markerClusterGroup({
  iconCreateFunction: (cluster) => L.divIcon({ html: `<b>${cluster.getChildCount()}</b>` })
  });
  

• Изменение стиля «паучьих ножек (spider legs)» при клике на кластер через spiderLegPolylineOptions (цвет, толщина линии) .

3. Интерактивные функции

• События кластеров: обработка кликов (clusterclick), наведения (clustermouseover) и других событий. Например, можно выводить информацию о маркерах внутри кластера .
• Автоматический зум к границам кластера при клике (zoomToBoundsOnClick: true) .
• Режим «паука» (spiderfy) для разделения маркеров на максимальном уровне масштаба (spiderfyOnMaxZoom: true) .

4. Оптимизация производительности

• Динамическая загрузка маркеров через chunkedLoading, что предотвращает зависание страницы при добавлении тысяч маркеров .
• Удаление невидимых элементов с карты (removeOutsideVisibleBounds: true) для снижения нагрузки на браузер .

5. Расширенные возможности

• Интеграция с GeoJSON для работы с геоданными. Например, загрузка точек из GeoJSON-файла и их автоматическая кластеризация .
• Анимации при объединении/разделении кластеров (animate: true) .
• Совместимость с другими плагинами Leaflet, такими как Leaflet.FeatureGroup.SubGroup для управления группами слоев .

Примеры использования

• Vue.js: интеграция через useLMarkerCluster для Nuxt.js с поддержкой событий и кастомизации маркеров .
• Массовое добавление маркеров через addLayers, что эффективнее, чем поштучное добавление .

Ссылки на документацию и примеры:
— Официальная документация .
— Примеры интеграции с Vue .
— Кастомизация иконок .

Для детальной настройки рекомендуется изучить параметры MarkerClusterGroup, такие как spiderfyDistanceMultiplier (увеличение расстояния между маркерами в режиме «паука») и polygonOptions (отображение границ кластера) .