ScreenGridLayer

deck.gl предоставляет набор GPU-ускоренных слоёв для визуализации больших геопространственных данных. ScreenGridLayer относится к категории агрегирующих слоёв, выполняющих расчёт плотности точек непосредственно в экранных координатах. Это ключевое отличие от географических сеток, где расчёты зависят от проекции мира.

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

Принцип работы ScreenGridLayer

Основная идея слоя заключается в переходе от набора точек к матрице экранных ячеек.

Каждая точка данных:

  • проецируется в координаты экрана;
  • попадает в конкретную ячейку сетки;
  • увеличивает значение этой ячейки (count или weight).

Формально агрегирование можно представить как функцию:

[ cell(x, y) = _{i points} w_i I(i cell(x, y))]

cell(x,y)=_{i points} w_i I(i cell(x,y))

где:

  • (w_i) — вес точки,
    1. — индикатор принадлежности точки ячейке,
  • (cell(x,y)) — итоговая интенсивность.

Агрегация выполняется на GPU, что обеспечивает высокую производительность при миллионах объектов.

Структура сетки в экранных координатах

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

Ключевые особенности:

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

Это приводит к эффекту “липкой” экранной плотности, где визуализация сохраняет читаемость на любом уровне масштаба.

Основные свойства слоя

data

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

Пример структуры:

[
  { position: [69.589, 42.3], value: 10 },
  { position: [69.6, 42.31], value: 5 }
]

getPosition

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

getPosition: d => d.position

Координаты должны быть в формате [lng, lat].

getWeight

Определяет вклад точки в итоговую ячейку:

getWeight: d => d.value

Если не задано, каждая точка имеет вес 1.

cellSizePixels

Определяет размер ячейки в экранных пикселях.

  • малые значения → высокая детализация;
  • большие значения → более сглаженная агрегация.

Типичный диапазон: 10–100 px.

colorRange

Массив цветов, используемый для визуализации плотности. Значения интерполируются в зависимости от количества точек в ячейке.

Пример:

colorRange: [
  [0, 0, 0, 0],
  [0, 85, 255, 120],
  [0, 170, 255, 180],
  [0, 255, 200, 220],
  [255, 255, 0, 255]
]

opacity и coverage

  • opacity управляет общей прозрачностью слоя;
  • coverage определяет степень заполнения ячеек (визуальное расширение влияния).

Механизм GPU-агрегации

ScreenGridLayer использует WebGL для выполнения двух ключевых этапов:

  1. Проекция координат в экранное пространство
  2. Редукция значений в текстурную сетку

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

Преимущество подхода:

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

Отличие от GridLayer и HexagonLayer

ScreenGridLayer часто сравнивается с другими агрегирующими слоями.

GridLayer

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

HexagonLayer

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

ScreenGridLayer

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

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

Одно из ключевых свойств ScreenGridLayer — адаптивность к zoom level.

При увеличении масштаба:

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

При уменьшении масштаба:

  • ячейки агрегируют больше точек;
  • проявляются крупные кластеры плотности.

Это создаёт эффект динамического теплового поля.

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

ScreenGridLayer оптимизирован для больших массивов данных, однако производительность зависит от ряда факторов:

Размер данных

  • до 100k точек — минимальная нагрузка;
  • 1M+ точек — требуется оптимизация атрибутов;
  • 10M+ — желательно предварительное упрощение данных.

cellSizePixels и нагрузка

Меньший cellSizePixels увеличивает количество ячеек, что:

  • повышает точность;
  • увеличивает вычислительную нагрузку.

Большой размер уменьшает детализацию, но ускоряет рендеринг.

updateTriggers

Deck.gl использует механизм мемоизации атрибутов:

updateTriggers: {
  getWeight: data => data.value
}

Неправильная настройка приводит к лишним пересчётам GPU-буферов.

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

ScreenGridLayer поддерживает picking, позволяя получать данные ячеек под курсором.

При включённом pickable: true доступна информация:

  • координаты ячейки;
  • агрегированное значение;
  • список исходных объектов (в зависимости от конфигурации).

Типичный сценарий — построение tooltip:

onHover: info => {
  const { x, y, object } = info;
}

Визуальная интерпретация плотности

ScreenGridLayer часто используется для:

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

Каждая ячейка представляет локальную статистическую область.

Ограничения модели

Несмотря на эффективность, ScreenGridLayer имеет ограничения:

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

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

Поведение при изменении viewport

При каждом изменении:

  • центра карты;
  • zoom;
  • угла наклона;

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

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

Весовые значения позволяют строить более сложные модели плотности.

Пример:

  • события = 1;
  • транзакции = сумма;
  • пользователи = уникальные идентификаторы.

Нормализация выполняется через максимальное значение в сетке:

[ normalized = ]

normalized=

Цветовая интерполяция

Интерполяция цветов происходит линейно между значениями диапазона colorRange. Каждая ячейка получает цвет в зависимости от нормализованного значения плотности.

Это позволяет строить визуальные градиенты плотности без дополнительных вычислений на CPU.

Практические сценарии применения

ScreenGridLayer используется в задачах, где важна:

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

Типичные источники данных:

  • GPS-треки;
  • события IoT;
  • пользовательские действия;
  • логирование серверных систем.
Оглавление