HexagonLayer

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

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

Каждая точка данных сопоставляется с конкретным гексагоном на основе координат. После распределения выполняется агрегация:

  • подсчёт количества точек в ячейке;
  • вычисление суммарных или средних значений по заданному полю;
  • нормализация значений для цветового и высотного отображения.

Структура входных данных

HexagonLayer работает с массивом объектов, содержащих координаты:

const data = [
  { position: [37.78, -122.41] },
  { position: [37.79, -122.42] }
];

Ключевым является доступ к координатам через accessor-функцию:

getPosition: d => d.position

При необходимости анализа дополнительных параметров (например, веса точки), структура расширяется:

{ position: [lng, lat], value: 10 }

Базовая конфигурация слоя

HexagonLayer создаётся через экземпляр слоя из deck.gl:

import { HexagonLayer } from '@deck.gl/aggregation-layers';

const layer = new HexagonLayer({
  id: 'hex-layer',
  data,
  getPosition: d => d.position,
  radius: 1000,
  elevationScale: 50,
  extruded: true
});

Параметр radius и система биннинга

radius определяет радиус гексагона в метрах (при использовании географической проекции). Этот параметр влияет на плотность сетки:

  • малые значения приводят к высокой детализации;
  • большие значения создают обобщённую картину распределения.

Алгоритм перевода координат в гексагональную сетку основан на пространственной индексации (grid indexing), где каждая точка преобразуется в индекс ячейки.

Визуализация высоты и extruded режим

При включении extruded включается трёхмерная визуализация:

extruded: true,
elevationScale: 30

Высота каждой ячейки вычисляется из агрегированного значения:

  • count (по умолчанию);
  • пользовательская функция редукции.

Высота нормализуется относительно максимального значения во всём наборе.

Цветовое отображение данных

HexagonLayer поддерживает интерполяцию цвета на основе плотности:

colorRange: [
  [0, 0, 0, 0],
  [0, 85, 128, 255],
  [0, 170, 255, 255],
  [255, 255, 255, 255]
]

Параметры управления:

  • colorDomain — диапазон значений для нормализации;
  • colorScale — тип шкалы (quantile, quantize, linear);
  • upperPercentile и lowerPercentile — обрезка выбросов.

Агрегационные функции

По умолчанию используется подсчёт точек, однако возможно переопределение логики:

getColorValue: points => points.length

или

getElevationWeight: d => d.value

Это позволяет переключаться между плотностью и взвешенной агрегацией.

Геометрическая модель гексагона

Каждая ячейка представляет собой правильный шестиугольник в проекции Web Mercator. Расчёт основан на преобразовании координат в axial coordinates (q, r), после чего выполняется обратное преобразование для рендеринга.

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

Производительность и GPU-обработка

HexagonLayer использует WebGL для агрегации и рендеринга. Основные этапы:

  • трансформация координат на GPU;
  • биннинг через пространственную индексацию;
  • агрегация с использованием shader-based reduction;
  • рендеринг instanced geometry.

Это позволяет обрабатывать сотни тысяч и миллионы точек без предварительной серверной агрегации.

Взаимодействие с масштабом карты

При изменении zoom пересчитывается радиус гексагона в экранных единицах. Это обеспечивает стабильное восприятие плотности:

  • на малом масштабе видны крупные кластеры;
  • при увеличении масштаба структура уточняется.

Поведение контролируется параметром coverage, который определяет степень перекрытия ячеек.

coverage: 0.8

Нормализация и статистика

Для корректного отображения применяется нормализация значений:

  • линейная;
  • логарифмическая;
  • квантильная.

При наличии выбросов используется обрезка по перцентилям, что стабилизирует цветовую шкалу и высоты.

Интеграция с другими слоями deck.gl

HexagonLayer часто используется вместе с базовыми слоями:

  • ScatterplotLayer для отображения отдельных точек;
  • MapboxGL layers для подложки;
  • ArcLayer для связей между кластерами.

Композиция слоёв формирует многоуровневую визуальную модель данных.

Расширенные настройки отображения

Поддерживаются параметры тонкой настройки визуализации:

opacity: 0.8,
material: {
  ambient: 0.4,
  diffuse: 0.6,
  shininess: 32
}

Эти параметры влияют на восприятие глубины при 3D-режиме.

Обработка больших наборов данных

При работе с потоками данных используется динамическое обновление массива data. HexagonLayer пересчитывает агрегацию при изменении входных данных, сохраняя кеширование геометрии.

Оптимизации включают:

  • инкрементальный пересчёт;
  • GPU buffering;
  • минимизацию пересоздания buffers при неизменных данных.

Особенности проекций

Слой корректно работает в географических проекциях (WGS84) и Web Mercator. При использовании пользовательских проекций требуется согласование координатной системы с deck.gl viewport.

Ошибки в проекции приводят к смещению сетки и искажению плотности, особенно на высоких широтах.

Поведение при масштабировании и вращении

HexagonLayer реагирует на:

  • zoom — пересчёт размера гексагонов;
  • pitch — изменение перспективы высоты;
  • bearing — вращение сетки относительно карты.

Гексагональная структура остаётся устойчивой при любых трансформациях, поскольку индексирование выполняется в географических координатах до проекции в экранное пространство.

Оглавление