Работа с большими наборами геоданных требует перехода от отображения отдельных точек к их обобщению. При росте плотности объектов визуализация теряет читаемость, а производительность падает. Кластеризация и агрегация решают эту проблему за счёт объединения точек в вычисляемые структуры.
В геовизуализации выделяются два основных подхода:
В Kepler.gl оба подхода реализованы на уровне GPU через deck.gl-слой, что обеспечивает обработку миллионов объектов без деградации интерфейса.
Внутри Kepler.gl агрегация построена на слоях deck.gl:
PointLayer — базовый слой точекClusterLayer — плотностная кластеризацияHexagonLayer — гексагональная агрегация (H3)GridLayer — прямоугольная сеточная агрегацияКаждый слой работает поверх WebGL и выполняет вычисления на GPU, минимизируя нагрузку на CPU.
Ключевая особенность: агрегация происходит не на стороне сервера, а в браузере.
Кластеризация объединяет точки на основе расстояния в пикселях или координатах.
Основные параметры:
Принцип работы:
Пример конфигурации слоя:
const clusterLayer = new ClusterLayer({
id: 'cluster-layer',
data: dataset,
radius: 60,
maxZoom: 16,
getPosition: d => [d.lng, d.lat],
aggregation: 'average',
getWeight: d => d.value
});
Кластеризация полезна при анализе:
Гексагональная агрегация является одним из ключевых инструментов Kepler.gl. Она основана на системе индексации H3, разработанной для равномерного разбиения поверхности Земли на шестиугольные ячейки.
Каждая точка попадает в гексагональную ячейку, после чего выполняется агрегация значений внутри ячейки.
Формально агрегация может быть представлена как:
A_i = _{j H_i} w_j
где:
Пример использования HexagonLayer:
const hexLayer = new HexagonLayer({
id: 'hex-layer',
data,
radius: 1000,
elevationScale: 50,
getPosition: d => [d.lng, d.lat],
getElevationWeight: d => d.value,
getColorWeight: d => d.value,
colorRange: [
[255, 255, 204],
[199, 233, 180],
[127, 205, 187],
[65, 182, 196],
[29, 145, 192],
[34, 94, 168],
[12, 44, 132]
]
});
Гексагональная агрегация используется для:
GridLayer использует прямоугольную сетку вместо шестиугольников. Пространство делится на равные клетки, каждая из которых агрегирует попавшие в неё точки.
Особенности:
Пример:
const gridLayer = new GridLayer({
id: 'grid-layer',
data,
cellSize: 500,
getPosition: d => [d.lng, d.lat],
getWeight: d => d.value
});
Kepler.gl поддерживает несколько функций агрегации:
Агрегация применяется к любому числовому полю, заданному через
getWeight или аналогичные функции.
Основное преимущество архитектуры Kepler.gl заключается в использовании GPU-вычислений через deck.gl.
Это даёт следующие свойства:
При агрегации:
Агрегация в Kepler.gl динамически зависит от масштаба карты.
На высоком уровне zoom:
На низком уровне zoom:
Это поведение позволяет сохранять баланс между детализацией и читаемостью.
В реальных сценариях каждая точка может иметь вес:
Взвешенная агрегация вычисляется как:
{x} =
где:
В Kepler.gl это реализуется через getWeight и
соответствующие агрегаторы слоя.
Агрегация может строиться как иерархия:
H3-система позволяет естественно реализовать такую структуру за счёт разных resolution уровней.
Сравнение подходов:
Кластеризация
Hex-агрегация
Кластеризация и агрегация применяются в задачах:
Kepler.gl позволяет накладывать несколько типов агрегации одновременно:
Комбинация слоёв создаёт многослойную модель данных, где каждый уровень отвечает за свою гранулярность.