Группы маркеров (кластеры)

Если в какой-то области карты сосредоточено большое количество маркеров, они могут отвлекать внимание и закрывать собой другие объекты карты. Чтобы избавиться от визуального шума, можно объединять маркеры в один объект (кластер) при уменьшении масштаба карты.

Чтобы использовать кластеры, нужно подключить плагин Clusterer. Для этого нужно добавить следующую строку после подключения основного скрипта:

<script src="https://unpkg.com/@2gis/mapgl-clusterer@^2/dist/clustering.js"></script>

Также можно установить плагин с помощью npm:

npm install @2gis/mapgl-clusterer

Использование

Чтобы создать кластер, сначала нужно инициализировать объект Clusterer:

const clusterer = new mapgl.Clusterer(map, {
    radius: 60,
});

В случае использования npm:

// Импортируйте плагин как ES-модуль...
import { Clusterer } from '@2gis/mapgl-clusterer';
// ...или как модуль CommonJS
const { Clusterer } = require('@2gis/mapgl-clusterer');

const clusterer = new Clusterer(map, {
    radius: 60,
});

Параметр radius определяет расстояние в пикселях. Если расстояние между маркерами меньше указанного значения, маркеры будут объединены в один объект.

Чтобы добавить маркеры в кластер, их не нужно создавать отдельно. Вместо этого нужно вызвать метод кластера load() и указать массив с настройками маркеров (нужное количество объектов InputMarker). Например, чтобы создать кластер из трёх маркеров, можно использовать следующий код:

const markers = [
    { coordinates: [55.27887, 25.21001] },
    { coordinates: [55.30771, 25.20314] },
    { coordinates: [55.35266, 25.24382] },
];
clusterer.load(markers);

Подробнее...