ColumnLayer

deck.gl включает набор высокоуровневых слоёв для построения 2D/3D визуализаций поверх карт и произвольных WebGL-сцен. ColumnLayer относится к категории 3D-экструзионных слоёв, предназначенных для отображения дискретных значений в виде вертикальных колонн, где высота каждой колонки соответствует числовому атрибуту данных.

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

Каждый элемент данных в ColumnLayer интерпретируется как независимая колонна, расположенная в пространстве по координатам:

  • долгота (longitude)
  • широта (latitude)
  • опционально: дополнительная высота или категориальные параметры

Типичная структура данных:

const data = [
  { position: [71.4304, 51.1281], value: 120 },
  { position: [72.2000, 50.9000], value: 80 },
  { position: [70.9000, 51.3000], value: 200 }
];

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

Основные параметры ColumnLayer

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

position accessor

Функция извлечения координат:

getPosition: d => d.position

Возвращает массив [lng, lat]. Это обязательный параметр.

elevation accessor

Определяет высоту колонны:

getElevation: d => d.value

Высота интерпретируется в мировых единицах или метрах (в зависимости от контекста карты и scale).

radius

Радиус основания колонны:

radius: 500

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

fill color

Цвет заливки вычисляется на основе данных:

getFillColor: d => [255, 140, 0, 200]

RGBA-массив позволяет управлять прозрачностью и визуальной иерархией.

line color

Обводка колонн:

getLineColor: d => [0, 0, 0, 255]

Используется для отделения колонн при высокой плотности объектов.

elevation scale

Глобальный множитель высоты:

elevationScale: 10

Позволяет усиливать или уменьшать визуальное восприятие перепадов данных без изменения исходных значений.

Геометрия и принцип рендеринга

ColumnLayer строит цилиндрические или призматические меши на GPU. Каждая колонна фактически представляет собой:

  • базовый круг или многоугольник
  • вертикальную экструзию вдоль оси Z
  • набор треугольников, формирующих боковую поверхность
  • верхнюю крышку

При рендеринге используется instanced rendering: одна геометрия переиспользуется для всех объектов, а различия передаются через attribute buffers.

Это снижает нагрузку на GPU и позволяет обрабатывать десятки тысяч объектов без деградации производительности.

Работа с высотой и нормализация данных

Высота колонн часто требует нормализации для корректного отображения:

const max = Math.max(...data.map(d => d.value));

new ColumnLayer({
  data,
  getPosition: d => d.position,
  getElevation: d => (d.value / max) * 1000,
  radius: 300,
  elevationScale: 1
});

Использование нормализации позволяет избежать доминирования выбросов и улучшает визуальное сравнение.

Цветовое кодирование и семантика

ColumnLayer часто используется вместе с градиентными шкалами:

getFillColor: d => {
  if (d.value > 150) return [255, 0, 0, 200];
  if (d.value > 80) return [255, 165, 0, 200];
  return [0, 200, 0, 200];
}

Цвет может отражать:

  • интенсивность явления
  • категорию объекта
  • временные интервалы
  • отклонение от нормы

Пространственная агрегация

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

const aggregated = bins.map(bin => ({
  position: bin.center,
  value: bin.count
}));

Такой подход снижает количество объектов и улучшает читаемость визуализации.

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

ColumnLayer оптимизирован для WebGL, но требует соблюдения ряда принципов:

1. Минимизация пересчётов accessor-функций

Функции getPosition, getElevation и getFillColor должны быть максимально лёгкими.

2. Использование статических данных

Изменение данных вызывает полную переразметку слоя.

3. Ограничение количества объектов

Практический предел зависит от GPU, но оптимально:

  • до 50 000 объектов без агрегации
  • до 200 000 при инстансинге и упрощении геометрии

Интерактивность и picking

ColumnLayer поддерживает picking — определение объекта под курсором.

onHover: info => {
  if (info.object) {
    console.log(info.object.value);
  }
}

Объект info содержит:

  • координаты курсора
  • индекс объекта
  • исходный data-элемент

Это позволяет строить интерактивные дашборды и всплывающие панели.

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

import { DeckGL } from '@deck.gl/react';
import { ColumnLayer } from '@deck.gl/layers';

const layer = new ColumnLayer({
  id: 'column-layer',
  data: [
    { position: [71.43, 51.12], value: 100 },
    { position: [71.50, 51.15], value: 180 },
    { position: [71.60, 51.10], value: 60 }
  ],
  diskResolution: 12,
  radius: 400,
  extruded: true,
  elevationScale: 10,
  getPosition: d => d.position,
  getFillColor: d => [30, 144, 255, 180],
  getElevation: d => d.value
});

const deck = new DeckGL({
  initialViewState: {
    longitude: 71.43,
    latitude: 51.12,
    zoom: 11,
    pitch: 45
  },
  controller: true,
  layers: [layer]
});

Дискретизация формы колонн

ColumnLayer позволяет управлять детализацией окружности:

diskResolution: 4  // квадратная колонна
diskResolution: 20 // почти круглая форма

Низкие значения используются для ускорения рендеринга, высокие — для визуальной точности.

Использование в 3D-картах

ColumnLayer часто комбинируется с базовыми слоями:

  • TileLayer (подложка карты)
  • ScatterplotLayer (точечные данные)
  • GeoJsonLayer (границы регионов)

В 3D-сценах колонны создают вертикальную структуру данных, позволяя анализировать распределение по поверхности.

Особенности глубины и z-fighting

При плотном размещении колонн может возникать z-fighting. Решения:

  • увеличение radius
  • использование lineColor для разделения
  • корректировка elevationScale
  • применение offset при агрегации

Декларативная модель и обновление состояния

ColumnLayer работает в декларативной модели: изменение props автоматически пересоздаёт GPU-буферы.

layer.setProps({
  data: newData,
  getElevation: d => d.value * 2
});

Это позволяет интегрировать слой в React/Redux архитектуры без ручного управления WebGL.

Использование в аналитических системах

ColumnLayer применяется в системах:

  • мониторинг трафика
  • анализ продаж по регионам
  • гео-статистика населения
  • IoT телеметрия
  • климатические измерения

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

Оглавление