Kepler.gl построена как модульная геопространственная платформа визуализации, в которой объединены принципы декларативного описания состояния, реактивного UI и высокопроизводительного WebGL-рендеринга. Архитектура ориентирована на разделение ответственности между слоями управления состоянием, визуализации и взаимодействия с картографическим движком.
Ключевая идея — полное описание визуализации через сериализуемое состояние (state-driven visualization), где карта, слои, фильтры и стили являются производными от единого дерева состояния.
Ядро системы опирается на несколько фундаментальных технологий:
Эти компоненты формируют многослойную архитектуру, в которой React отвечает за UI, Redux — за состояние, deck.gl — за визуализацию данных, а Mapbox GL JS — за базовую карту и проекцию.
Состояние приложения организовано в виде нескольких доменов внутри единого Redux store. Каждый домен отвечает за определённую часть визуализации.
Такое разделение обеспечивает изоляцию логики и позволяет независимо изменять подсистемы без каскадных изменений.
visState является центральным компонентом архитектуры, определяющим содержимое карты.
Каждый слой представляет собой декларативное описание поверх deck.gl слоя. Внутренне слой включает:
Слой не содержит императивной логики отрисовки — он лишь описывает параметры, которые затем транслируются в deck.gl.
mapState управляет геометрией отображения:
Эти параметры синхронизируются с Mapbox GL JS и могут изменяться как через UI, так и через внешние события (например, программно через API).
uiState изолирует визуальную логику интерфейса:
Такое разделение предотвращает смешивание UI-логики с геопространственными вычислениями.
Основной механизм отрисовки базируется на трансляции Redux-состояния в deck.gl слои.
deck.gl обеспечивает:
Архитектура построена на однонаправленном потоке данных:
Любое изменение UI или данных инициирует повторный проход этого цикла.
Данные внутри системы хранятся в нормализованном виде:
Это позволяет:
Фильтры реализованы как независимые сущности внутри visState.
Каждый фильтр включает:
Фильтрация применяется до этапа передачи данных в deck.gl, что снижает нагрузку на GPU.
interactionConfig определяет поведение пользовательских действий:
События обрабатываются на уровне deck.gl и транслируются обратно в Redux actions, что обеспечивает замкнутый цикл взаимодействия.
Kepler.gl поддерживает полную сериализацию состояния:
Это позволяет сохранять и восстанавливать визуализации как JSON-снимки.
Сериализация используется для:
Система расширяется через:
Каждый новый слой интегрируется через абстракцию layer factory, которая преобразует конфигурацию в deck.gl объект.
Основные оптимизационные стратегии:
При больших объёмах данных применяется агрегация и кластеризация на уровне слоя.
Типовая организация модулей:
reducers/
components/
layers/
processors/
schemas/
utils/
Система событий построена на Redux actions:
Каждое действие проходит через middleware, где могут выполняться:
React компоненты не содержат бизнес-логики визуализации. Они:
Это обеспечивает строгую унификацию и предсказуемость UI.
Mapbox GL JS отвечает за:
deck.gl использует ту же проекцию, что обеспечивает точное наложение слоёв поверх карты без расхождений координат.
Архитектура формируется как многослойная система:
Каждый слой изолирован, но связан через строгие контракты данных, что обеспечивает масштабируемость и предсказуемость поведения при росте объёмов геоданных.