Интерфейс в Kepler.gl строится вокруг связки трёх уровней состояния: mapState, visState и uiState. Такое разделение позволяет изолировать геометрию карты, визуальные слои и пользовательские элементы управления, сохраняя предсказуемость поведения при масштабировании приложения и обработке больших геоданных.
Интерфейс Kepler.gl не является монолитным React-компонентом. Он формируется как композиция визуальных панелей, подключённых к централизованному хранилищу состояния (Redux). Каждый элемент UI синхронизирован с конкретной частью состояния:
Такой подход позволяет интерфейсу оставаться реактивным даже при обработке миллионов точек.
Центральным элементом является MapContainer, который инкапсулирует WebGL-рендеринг через deck.gl.
Каркас взаимодействия строится следующим образом:
Интерфейс карты не ограничивается визуализацией — он также является входной точкой для всех событий: зум, drag, rotate, selection box.
Панель слоёв является ключевым интерфейсным компонентом работы с данными. Каждый слой представляет собой независимую визуализацию:
Интерфейс слоя включает:
Каждое изменение в панели напрямую мутирует visState.layers, что вызывает перерасчёт WebGL-слоя без перезагрузки всей сцены.
Каждый слой в интерфейсе имеет встроенный редактор, который формирует конфигурацию слоя через декларативные параметры.
Основные интерфейсные элементы редактора:
Редактор не оперирует геометрией напрямую, а изменяет абстрактное описание слоя, которое затем интерпретируется движком рендеринга.
Фильтры являются отдельным интерфейсным уровнем, работающим поверх слоёв. Каждый фильтр привязан к полю данных и типу значения:
Фильтры применяются до этапа рендеринга, изменяя входной набор данных для слоёв. Это обеспечивает высокую производительность, так как отрисовываются уже отфильтрованные данные.
Особенность интерфейса фильтров заключается в их синхронизации между слоями: один фильтр может влиять на несколько визуализаций одновременно.
Элементы управления картой включают:
Эти элементы изменяют mapState и немедленно отражаются в viewState deck.gl.
Важный аспект интерфейса — отсутствие задержки между пользовательским действием и визуальным обновлением сцены.
Tooltip-интерфейс в Kepler.gl работает на основе событий hover и click.
Поток взаимодействия:
Содержимое tooltip зависит от конфигурации слоя и может включать:
Tooltip не является статическим компонентом — он генерируется динамически на основе visState.
Selection UI реализует механизмы:
Выделение влияет на visState.interactionConfig, где хранится состояние выбранных объектов.
Результатом становится:
Если данные содержат временное измерение, интерфейс активирует time playback control.
Элементы управления:
Внутренне это управляет фильтром времени, который пересчитывает набор данных для каждого кадра анимации.
Интерфейс синхронизирован с visState.filters, что позволяет интегрировать временные данные с другими фильтрами.
uiState отвечает за поведение интерфейса, не связанное напрямую с данными:
Примеры:
Этот слой важен для обеспечения независимости UI от данных визуализации.
Компонент загрузки данных поддерживает несколько источников:
Интерфейс включает:
После загрузки данные преобразуются в dataset, который добавляется в visState.datasets.
Экспортный интерфейс позволяет сохранять результат в различных форматах:
Интерфейс экспорта тесно связан с состоянием приложения: сохраняется не только визуальный результат, но и полная конфигурация visState + mapState + uiState.
Kepler.gl использует событийную модель, в которой UI-компоненты не взаимодействуют напрямую. Вместо этого применяется поток:
UI Action → Redux Action → State Update → Re-render → UI Sync
Типичные события:
Такой подход предотвращает рассинхронизацию интерфейса при сложных взаимодействиях.
Интерфейс Kepler.gl поддерживает адаптацию под разные размеры экранов:
Адаптивность реализуется через uiState и CSS-grid структуру компонентов.
Kepler.gl может быть встроен как компонент React-приложения. Интерфейс встраивания позволяет:
Таким образом интерфейс становится конфигурируемым слоем поверх геовизуализации, а не фиксированным приложением.