ContourLayer

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

Математическая модель контуров

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

[ z = f(x, y)]

где каждая точка пространства ((x, y)) имеет ассоциированное значение (z), например плотность, интенсивность или агрегированное значение.

z = f(x, y)

Изолиния определяется как множество точек, удовлетворяющих условию:

[ f(x, y) = c]

f(x, y) = c

где (c) — фиксированное значение уровня (contour threshold). Слой ContourLayer строит несколько таких уровней для заданного диапазона.

Принцип работы слоя

ContourLayer выполняет несколько этапов преобразования данных:

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

Входные точки проецируются на регулярную сетку. Каждая ячейка сетки накапливает значения:

  • сумма весов
  • количество точек
  • нормализованное значение плотности

Итогом становится двумерное поле значений.

2. Построение скалярного поля

После агрегации формируется матрица:

[ M_{i,j} = w_k]

M_{i,j} = w_k

где каждая ячейка содержит агрегированное значение всех точек, попавших в её границы.

3. Извлечение изолиний

На этапе генерации геометрии используется алгоритм типа marching squares. Он анализирует каждую ячейку сетки и определяет, пересекает ли контур её границы.

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

  • (v_1, v_2, v_3, v_4)

По этим значениям определяется конфигурация пересечения уровня (c).

4. Интерполяция

Точки пересечения вычисляются линейной интерполяцией:

[ t = ]

t =

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

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

data

Источник данных. Обычно массив объектов с координатами:

  • longitude
  • latitude
  • weight (или value)

getPosition

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

getPosition: d => [d.lng, d.lat]

getWeight

Определяет вклад каждой точки в скалярное поле:

getWeight: d => d.value

Вес влияет на итоговую плотность в ячейке сетки.

contours

Ключевая конфигурация уровней:

contours: [
  {threshold: 10, color: [255, 0, 0]},
  {threshold: 20, color: [0, 255, 0]},
  {threshold: 30, color: [0, 0, 255]}
]

Каждый объект задаёт:

  • threshold — уровень изолинии
  • color — цвет линии или заливки

cellSize

Размер сеточной ячейки в пикселях или метрах (в зависимости от режима проекции).

Меньшие значения:

  • более детализированная сетка
  • выше нагрузка на GPU

Большие значения:

  • более грубая аппроксимация
  • быстрее вычисления

aggregation

Определяет метод накопления значений:

  • SUM — суммирование
  • MEAN — среднее значение
  • MIN / MAX — экстремальные значения

Архитектура вычислений

ContourLayer использует GPU-ускорение через WebGL. Основные этапы:

Передача данных в буферы

Каждая точка кодируется в vertex buffer:

  • координаты
  • вес
  • дополнительные атрибуты

Шейдерная агрегация

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

Постобработка

После построения сетки выполняется извлечение контуров и генерация геометрии линий.

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

import {Deck} from '@deck.gl/core';
import {ContourLayer} from '@deck.gl/aggregation-layers';

const layer = new ContourLayer({
  id: 'contour-layer',
  data: points,
  getPosition: d => [d.lng, d.lat],
  getWeight: d => d.value,
  cellSize: 500,
  contours: [
    {threshold: 5, color: [255, 200, 0]},
    {threshold: 10, color: [255, 100, 0]},
    {threshold: 20, color: [255, 0, 0]}
  ]
});

const deck = new Deck({
  initialViewState: {
    longitude: 37.6173,
    latitude: 55.7558,
    zoom: 10
  },
  controller: true,
  layers: [layer]
});

Типы визуализации контуров

ContourLayer поддерживает два основных режима:

Линии (lines)

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

Заливка (filled contours)

Каждая зона между уровнями заполняется цветом. Такой режим используется для визуализации плотности или интенсивности.

Интерполяция и сглаживание

Качество контуров зависит от:

  • плотности сетки
  • метода интерполяции
  • распределения данных

При недостаточной детализации появляются ступенчатые артефакты, вызванные дискретной природой grid-структуры.

Производительность

Основные факторы влияния:

  • количество точек
  • размер сетки (cellSize)
  • число уровней contours

Оптимизация достигается за счёт:

  • GPU-агрегации
  • уменьшения resolution grid
  • предварительной фильтрации данных

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

ContourLayer работает в экранной или географической проекции:

  • WebMercator
  • Cartesian (локальные координаты)

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

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

Вес каждой точки напрямую влияет на итоговую поверхность:

  • высокая концентрация значений формирует пики
  • низкие значения создают равнинные зоны

Это позволяет моделировать плотность населения, интенсивность событий или распределение ресурсов.

Связь с другими слоями deck.gl

ContourLayer часто используется совместно с:

  • HeatmapLayer — для сравнительного анализа плотности
  • ScatterplotLayer — для отображения исходных точек
  • GeoJsonLayer — для наложения административных границ

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

Оглавление