В основе архитектуры Deck.gl лежит концепция слоя как декларативного описания визуализации данных. Каждый слой представляет собой независимый модуль, который преобразует входной набор данных в геометрические примитивы WebGL и управляет их отрисовкой.
Ключевой принцип:
Слой не хранит визуализацию напрямую — он описывает, как данные должны быть превращены в графику.
Все слои в Deck.gl наследуют общий базовый класс Layer,
что задаёт единый контракт поведения и набор универсальных свойств.
Практически каждый слой работает через параметр data,
который определяет входной набор объектов.
Основные особенности:
data может быть массивом, итератором, GeoJSON,
табличными структурамиТипичный паттерн:
getPositiongetColorgetRadiusgetWeightКаждый accessor — это функция, которая принимает элемент данных и возвращает значение, используемое в GPU-пайплайне.
Важно: Deck.gl строго отделяет данные от визуального представления. Один и тот же набор данных может быть визуализирован разными слоями без модификации структуры.
Каждый слой может иметь уникальный идентификатор:
id — строковый идентификатор слояОн используется для:
Все слои поддерживают базовые визуальные параметры:
visible — включает или отключает слой без удаленияopacity — глобальная прозрачность слояОсобенность реализации:
opacity применяется на уровне шейдеров, что позволяет сохранять производительность без CPU-композитинга.
Deck.gl предоставляет единый механизм взаимодействия:
pickable — включает обработку событий наведения и
кликаautoHighlight — автоматическое подсвечивание объекта
при hoverhighlightColor — цвет подсветкиМеханизм picking работает через GPU-идентификацию объектов, где каждый элемент слоя кодируется в уникальный цвет буфера picking.
Все слои поддерживают унифицированное описание координатного пространства:
coordinateSystem — определяет систему координат
(например, Web Mercator, cartesian)coordinateOrigin — смещение начала координатmodelMatrix — матрица трансформации моделиЭти параметры позволяют:
Accessor-паттерн является центральным механизмом всех слоёв.
Примеры:
getPosition(d) → координатыgetColor(d) → цветgetSize(d) → размерgetAngle(d) → ориентацияОсобенности:
Ключевая идея: accessors отделяют данные от визуальной логики и позволяют масштабировать визуализацию на миллионы объектов.
Каждый слой использует внутреннюю систему атрибутов:
Примеры атрибутов:
Преимущества:
Deck.gl использует механизм updateTriggers, который
управляет пересчётом атрибутов.
Он позволяет указать зависимости вида:
Пример логики:
getColor, пересчитывается только
цветовой атрибутdata, пересчитываются все атрибутыЭто критично для производительности в больших сценах.
Каждый слой проходит стандартные этапы:
initializeState — создание GPU-ресурсов и
состоянияupdateState — реакция на изменение propsdraw — отрисовка в WebGL контекстеfinalizeState — освобождение ресурсовВнутренний state слоя включает:
Deck.gl использует механизм сравнения слоёв между кадрами.
Сравниваются:
idpropsdataupdateTriggersРезультат диффинга определяет:
Это позволяет эффективно обновлять сложные сцены без полной перерисовки.
Все слои поддерживают низкоуровневую настройку WebGL через
parameters.
Примеры:
Эти параметры позволяют:
Deck.gl поддерживает extensions, которые модифицируют
поведение слоя.
Расширения могут:
Архитектурно extensions работают как плагины поверх базового слоя без изменения его кода.
Для всех слоёв доступна поддержка трансформаций:
modelMatrix применяется на уровне шейдеров, что
обеспечивает:
Слои поддерживают анимацию изменений параметров:
Transitions работают через интерполяцию значений между состояниями кадра.
Особенность:
анимации выполняются на GPU, а не через DOM или CPU таймеры, что обеспечивает стабильную производительность при больших данных.
Общие свойства слоёв ориентированы на работу с большими наборами данных:
Deck.gl рассчитан на сценарии, где количество объектов измеряется сотнями тысяч и миллионами.
Интерактивность реализуется через единый слой событий:
Каждое событие связано с конкретным элементом данных через picking-информацию, включающую: