Режим редактирования в Kepler.gl представляет собой совокупность механизмов управления слоями, данными и интерактивными объектами карты, позволяющих изменять визуализацию в реальном времени без пересборки приложения. Основная идея заключается в том, что карта рассматривается как состояние (state), управляемое через Redux-подобную модель, где каждое действие пользователя или программный вызов приводит к предсказуемому обновлению конфигурации.
В основе Kepler.gl лежит связка React + Redux + deck.gl. Режим редактирования реализуется через изменение нескольких ключевых частей состояния:
Редактирование не является отдельным режимом в классическом смысле, а представляет собой набор активированных возможностей, доступных через UI или dispatch-действия.
Система построена вокруг иммутабельного обновления состояния, где каждое изменение создаёт новую версию конфигурации карты.
Слои являются центральной сущностью визуализации. В режиме редактирования происходит:
Каждый слой описывается объектом конфигурации, включающим тип визуализации, поля данных и стилизацию.
Редактирование слоя включает изменение:
Каждое изменение диспатчится через action:
import {updateLayer} from 'kepler.gl/actions';
dispatch(updateLayer({
layerId: 'points-layer',
config: {
color: [255, 0, 0],
opacity: 0.8
}
}));Одной из ключевых функций является редактирование геометрических объектов. Оно применяется в слоях PolygonLayer и PointLayer при включённых инструментах рисования.
Каждое действие изменяет геометрический массив координат, который хранится в GeoJSON-подобной структуре.
Редактирование происходит через события deck.gl picking API, где координаты курсора преобразуются в географические значения.
Режим редактирования включает инструменты создания новых объектов поверх карты.
При активном инструменте состояние uiState переключается в режим drawing, и события кликов начинают интерпретироваться как вершины геометрии.
Пример включения инструмента:
import {setMapMode} from 'kepler.gl/actions';
dispatch(setMapMode('drawPolygon'));Редактирование данных в Kepler.gl происходит не через прямое изменение массива, а через замену dataset целиком.
Структура dataset включает:
В режиме редактирования допускается:
При обновлении данных автоматически пересчитываются слои и фильтры.
import {addDataToMap} from 'kepler.gl/actions';
dispatch(addDataToMap({
datasets: {
info: {id: 'new-data'},
data: parsedData
}
}));Фильтры являются механизмом динамического ограничения данных без изменения исходного набора.
В режиме редактирования фильтры могут:
Каждый фильтр связан с конкретным полем dataset.
import {setFilter} from 'kepler.gl/actions';
dispatch(setFilter('filter-id', {
value: [10, 100]
}));Фильтрация выполняется на уровне GPU через deck.gl, что позволяет сохранять высокую производительность даже при больших объёмах данных.
interactionConfig управляет тем, как карта реагирует на действия пользователя.
Редактирование конфигурации взаимодействий позволяет включать или отключать отдельные сценарии поведения.
import {toggleInteraction} from 'kepler.gl/actions';
dispatch(toggleInteraction({
id: 'tooltip',
enabled: true
}));В процессе редактирования доступен режим выделения объектов, который позволяет:
Выделение реализуется через picking state deck.gl, где каждый объект получает уникальный идентификатор, связывающий визуальный элемент с данными dataset.
mapState определяет географическую позицию и параметры камеры.
В режиме редактирования доступны изменения:
import {updateMap} from 'kepler.gl/actions';
dispatch(updateMap({
latitude: 53.9,
longitude: 27.5667,
zoom: 10,
pitch: 45
}));Любое изменение приводит к плавной анимации перехода камеры.
uiState отвечает за визуальные элементы редактора:
В режиме редактирования uiState становится центральным элементом управления пользовательским опытом, определяя, какие элементы интерфейса активны.
Редактирование поддерживает механизм undo/redo через хранение истории состояний.
Каждое действие пользователя сохраняется как отдельный snapshot или diff, позволяющий:
Это реализуется через middleware Redux, перехватывающий actions и сохраняющий их в стек истории.
Редактирование визуальных элементов напрямую связано с deck.gl слоями. Kepler.gl не рендерит графику самостоятельно, а передаёт конфигурации в deck.gl.
Каждое изменение слоя приводит к:
Это обеспечивает высокую производительность при интерактивном редактировании даже сложных сцен с миллионами объектов.
При всей гибкости существуют ограничения архитектуры:
Редактирование оптимизировано под потоковые изменения, а не массовые структурные миграции данных.
Расширение режима редактирования обычно происходит через:
Такой подход позволяет внедрять собственные сценарии редактирования без изменения ядра библиотеки.
Каждое изменение в редакторе является событием, проходящим цепочку:
Эта модель обеспечивает детерминированность и воспроизводимость состояния карты при любых сценариях редактирования.