Кластеризация данных точек с помощью веб-пакета SDK

Если на карте много точек данных, некоторые из них могут перекрываться друг с другом. Перекрытие может привести к тому, что карта станет перегруженной и очень сложной для восприятия. Кластеризация данных точек — это процесс объединения данных точек, находящихся рядом друг с другом, и представления их на карте в виде единой кластеризованной точки данных. По мере того как пользователь масштабирует карту, кластеры разбиваются на отдельные точки данных. При работе с большим количеством точек данных кластеризация процессы могут улучшить взаимодействие с пользователем.

Включение кластеризации в источнике данных

Чтобы включить кластеризацию в классе DataSource, задайте для параметра cluster значение true. Задайте clusterRadius, чтобы выбрать соседние точки и объединить их в кластер. Значение clusterRadius указывается в пикселях. С помощью clusterMaxZoom укажите уровень масштабирования для отключения логики кластеризации. Ниже приведен пример включения кластеризация в источнике данных.

//Create a data source and enable clustering.
var datasource = new atlas.source.DataSource(null, {
    //Tell the data source to cluster point data.
    cluster: true,
    
    //The radius in pixels to cluster points together.
    clusterRadius: 45,
    
    //The maximum zoom level in which clustering occurs.
    //If you zoom in more than this, all points are rendered as symbols.
    clusterMaxZoom: 15
});

Совет

Если две точки данных находятся близко друг к другу, возможно, что кластер никогда не будет разбит, независимо от того, насколько близко пользователь увеличит масштаб. Для решения этой задачи можно задать параметр clusterMaxZoom, чтобы отключить логику кластеризации и просто отобразить все данные.

Класс DataSource предлагает следующие методики для кластеризации.

Метод	Возвращаемый тип	Описание
getClusterChildren(clusterId: число)	Promise<Массив<Компонент<Геометрия, любая> | Фигура>>	Извлекает дочерние элементы заданного кластера на следующем уровне масштабирования. Эти дочерние элементы могут быть сочетанием фигур и подкластеров. Подкластеры — это функции со свойствами, соответствующими Свойствам ClusteredProperties.
getClusterExpansionZoom(clusterId: число)	Promise<число>	Вычисляет уровень масштаба, при котором кластер начинает расширяться или разрываться.
getClusterLeaves(clusterId: число, предел: число, смещение: число)	Promise<Массив<Компонент<Геометрия, любая> | Фигура>>	Извлекает точки в кластере. По умолчанию возвращаются первые 10 точек. Чтобы просмотреть точки, используйте limitдля указания количества возвращаемых точек и offset для пошагового просмотра индекса точек. Чтобы вернуть все точки, установите для limit значение Infinity и не устанавливайте значение для offset.

Отображение кластеров с помощью слоя пузырьков

Слой пузырьков — это отличный способ визуализации кластеризованных точек. Используйте выражения для масштабирования радиуса и изменения цвета в зависимости от количества точек в кластере. При отображении кластеров с помощью слоя пузырьков следует использовать отдельный слой для отображения некластеризованных точек данных.

Чтобы отобразить размер кластера поверх пузырька, используйте слой символов с текстом и не используйте значок.

Полный рабочий пример реализации отображения кластеров с помощью пузырькового слоя см. в разделе Точечные кластеры в пузырьковом слоев примерах Azure Maps. Исходный код для этого примера см. в разделе Кластеры точек в исходном коде пузырькового слоя.

Отображение кластеров с помощью слоя символов

При визуализации точек данных слой символов автоматически скрывает символы, которые накладываются друг на друга, чтобы обеспечить удобство работы с картой для пользователя. Это поведение по умолчанию может оказаться нежелательным, если на карте необходимо отобразить плотность точек данных. Однако эти параметры можно изменить. Чтобы отобразить все символы, задайте для параметра allowOverlap в свойстве iconOptions слоя символов значение true.

Используйте кластеризацию для отображения плотности точек данных для отображения пользовательского интерфейса, не перегруженного информацией. В следующем примере показано, как добавить пользовательские символы и представить кластеры и отдельные точки данных с помощью слоя символов.

Полный рабочий пример реализации отображения кластеров с помощью слоя символов см. в статье Отображение кластеров с помощью слоя символов в примерах Azure Maps. Исходный код для этого примера см. в разделе Отображение кластеров с исходным кодом уровня символов.

Кластеризация и слой тепловых карт

Тепловые карты — это отличный способ отображения плотности данных на карте. Этот метод визуализации может самостоятельно обрабатывать большое количество точек данных. Если точки данных кластеризованы, а размер кластера используется в качестве веса тепловой карты, то с помощью тепловой карты можно обработать еще больший объем данных. Чтобы получить этот параметр, задайте для параметра weight слоя тепловой карты значение ['get', 'point_count']. Если радиус кластера мал, тепловая карта выглядит почти идентично тепловой карте с использованием некластеризованных точек данных, но работает лучше. Однако чем меньше радиус кластера, тем точнее тепловая карта, но с меньшими преимуществами производительности.

Полный рабочий пример, демонстрирующий создание тепловой карты, использующего кластеризация в источнике данных, см. в разделе Взвешивая тепловая карта кластера в примерах Azure Maps. Исходный код для этого примера см. в разделе Исходный код взвешаемой тепловой карты кластера.

События мыши в кластеризованных точках данных

Когда на слое, на котором содержатся кластеризованные точки данных, возникают события мыши, кластеризованная точка данных возвращается в событие в виде объекта признака точки GeoJSON. Эта точечный компонент имеет следующие свойства:

Имя свойства	Тип	Описание
cluster	Логическое	Указывает, представляет ли компонент кластер.
cluster_id	строка	Уникальный идентификатор кластера, который можно использовать с методами getClusterExpansionZoom, getClusterChildren и getClusterLeaves для DataSource.
point_count	number	Число точек, содержащихся в кластере.
point_count_abbreviated	строка	Строка, которая сокращает значение point_count, если оно длинное. (например, 4000 преобразуется в 4K).

В примере Point Clusters in Bubble Layer используется слой пузырьков, который отображает точки кластера и добавляет событие щелчка. При срабатывании события щелчка код вычисляет и масштабирует карту до следующего уровня масштаба, при котором кластер разбивается. Эта функция реализуется с помощью метода getClusterExpansionZoom класса DataSource и свойства cluster_id кластеризованной точки данных, которую щелкнули.

В следующем фрагменте кода показан код в примере Point Clusters in Bubble Layer , который добавляет функцию события щелчка к кластеризованным точкам данных:

//Add a click event to the layer so we can zoom in when a user clicks a cluster.
map.events.add('click', clusterBubbleLayer, clusterClicked);

//Add mouse events to change the mouse cursor when hovering over a cluster.
map.events.add('mouseenter', clusterBubbleLayer, function () {
    map.getCanvasContainer().style.cursor = 'pointer';
});

map.events.add('mouseleave', clusterBubbleLayer, function () {
    map.getCanvasContainer().style.cursor = 'grab';
});

function clusterClicked(e) {
    if (e && e.shapes && e.shapes.length > 0 && e.shapes[0].properties.cluster) {
        //Get the clustered point from the event.
        var cluster = e.shapes[0];

        //Get the cluster expansion zoom level. This is the zoom level at which the cluster starts to break apart.
        datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {

            //Update the map camera to be centered over the cluster. 
            map.setCamera({
                center: cluster.geometry.coordinates,
                zoom: zoom,
                type: 'ease',
                duration: 200
            });
        });
    }
}

Отображение области кластера

Данные точки, которые представляет кластер, распределяются по области. В этом примере при наведении указателя мыши на кластер происходит два основных действия. Во-первых, отдельные точки данных, содержащиеся в кластере, используются для вычисления выпуклой оболочки. Затем выпуклая оболочка отображается на карте для отображения области. Выпуклая оболочка — это многоугольник, который ограничивает набор точек, например эластичной полосой, и может быть вычислен с помощью метода atlas.math.getConvexHull. Все точки, содержащиеся в кластере, можно получить из источника данных с помощью метода getClusterLeaves.

Полный рабочий пример, демонстрирующий это, см. в статье Отображение области кластера с выпуклой оболочкой в примерах Azure Maps. Исходный код для этого примера см. в разделе Отображение области кластера с выпуклой оболочкой исходного кода.

Статистическая обработка данных в кластерах

Зачастую кластеры обозначаются символом с количеством точек в кластере. Но иногда желательно настроить стиль кластеров с дополнительными метриками. При использовании статистических выражений кластера настраиваемые свойства можно создавать и заполнять путем вычисления статистического выражения. Статистические выражения кластера можно определить в параметреclusterProperties элемента DataSource.

В примере кластерных агрегатов используется статистическое выражение. Код вычисляет значение счетчика на основе свойства типа сущности каждой точки данных в кластере. Когда пользователь выбирает кластер, отображается всплывающее окно с дополнительными сведениями о кластере. Исходный код для этого примера см. в разделе Исходный код агрегирования кластера.

Дальнейшие действия

Дополнительные сведения о классах и методах, которые используются в этой статье:

Класс DataSource

Объект DataSourceOptions

Пространство имен atlas.math

См. примеры кодов для добавления функций в приложение:

Добавление слоя пузырьков

Добавление слоя символов

Добавление слоя тепловой карты