Работа с Kepler.gl на уровне программного управления взаимодействием строится вокруг принципа полного контроля над состоянием карты через внешние события, Redux-поток и декларативные обновления состояния. Интерфейс библиотеки изначально проектируется как управляемый компонент, где любое пользовательское действие может быть воспроизведено или изменено программно.
Система взаимодействий в Kepler.gl опирается на централизованное состояние, разделённое на несколько ключевых доменов:
Каждое из этих состояний может изменяться как через UI, так и через диспатч Redux-экшенов. Это позволяет полностью дублировать пользовательское поведение программными средствами.
Интерактивный слой Kepler.gl интегрирован через Redux reducer, предоставляемый библиотекой, что делает возможным вмешательство в каждый этап обработки событий.
Основной механизм управления взаимодействием — dispatch действий в Redux store, созданный через reducer Kepler.gl.
import keplerGlReducer from '@kepler.gl/reducers';
import {createStore, combineReducers, applyMiddleware} from 'redux';
const reducers = combineReducers({
keplerGl: keplerGlReducer
});
const store = createStore(reducers, {}, applyMiddleware());Любое взаимодействие с картой становится результатом изменения состояния:
ViewState отвечает за позицию камеры: центр карты, масштаб, наклон и вращение.
Программное изменение реализуется через action обновления состояния:
import {updateMap} from '@kepler.gl/actions';
store.dispatch(updateMap({
latitude: 55.751244,
longitude: 37.618423,
zoom: 10,
bearing: 0,
pitch: 0
}));Синхронизация viewState используется при:
Состояние viewState может обновляться непрерывно, что позволяет реализовывать кастомные анимации перемещения камеры через последовательные dispatch.
Hover-состояние формируется при наведении курсора на объекты слоя. В программной модели оно представлено структурой, содержащей:
Прямое управление hover возможно через экшен setHoverData.
import {actionCreators} from '@kepler.gl/actions';
store.dispatch(actionCreators.setHoverData({
x: 120,
y: 200,
object: {
id: 1,
name: 'Feature A'
},
layer: 'points-layer'
}));Это позволяет:
Tooltip отображается как реакция на изменение hover state, что делает его полностью управляемым извне.
Состояние выделения объектов используется для хранения выбранных географических сущностей.
Программное выделение:
store.dispatch(actionCreators.selectFeature({
layerId: 'points-layer',
objectId: 'feature-123'
}));Такой подход используется для:
Отдельно поддерживается мультивыбор, если слой и конфигурация допускают множественные selection state.
Фильтры в Kepler.gl представляют собой отдельный массив объектов состояния, каждый из которых описывает:
Обновление фильтров осуществляется через действие
updateFilter.
import {updateFilter} from '@kepler.gl/actions';
store.dispatch(updateFilter('filter_1', {
name: 'speed',
value: [10, 80]
}));Программное управление фильтрацией используется в сценариях:
Фильтры могут быть связаны с анимацией времени, где изменение значения фильтра происходит в цикле.
Kepler.gl допускает внешнее управление состоянием через полную сериализацию и десериализацию конфигурации.
Экспорт состояния:
const mapConfig = store.getState().keplerGl.map.visState;Импорт состояния:
import {loadDataset} from '@kepler.gl/actions';
store.dispatch(loadDataset({
data: dataset,
config: mapConfig
}));Этот механизм используется для:
Слои являются ключевым элементом визуализации, и их поведение также может управляться программно.
Операции:
Пример переключения видимости:
store.dispatch(actionCreators.toggleLayer('layer_id'));Изменение параметров слоя:
store.dispatch(actionCreators.updateLayerConfig({
layerId: 'layer_id',
config: {
color: [255, 0, 0],
opacity: 0.5
}
}));Такая модель позволяет реализовать:
Все события карты могут быть перехвачены через middleware Redux или подписку на store.
Пример подписки:
store.subscribe(() => {
const state = store.getState();
const hover = state.keplerGl.map.uiState.hoverInfo;
});Таким образом строится реактивная модель, где внешняя логика реагирует на изменения состояния карты.
Дополнительно возможно создание middleware для логирования или трансформации событий до их применения.
Kepler.gl допускает интеграцию внешних событий, которые преобразуются в действия Redux.
Пример интеграции DOM-события:
button.addEventListener('click', () => {
store.dispatch(actionCreators.setFilterAnimationTime(Date.now()));
});Такой подход используется для:
Режимы взаимодействия включают:
Некоторые параметры управляются через UI state:
store.dispatch(actionCreators.togglePerspective());или через конфигурацию компонента:
<KeplerGl
mapboxApiAccessToken={token}
width={width}
height={height}
appState={{
dragRotate: false,
readOnly: false
}}
/>Такая конфигурация позволяет полностью отключать пользовательские взаимодействия и заменять их программными сценариями.
В реальных сценариях взаимодействия редко изолированы. Hover, filter и selection могут изменяться одновременно.
Пример комбинированного сценария:
store.dispatch(actionCreators.setFilter('filter_1', {
value: [20, 50]
}));
store.dispatch(actionCreators.setHoverData({
object: feature
}));
store.dispatch(actionCreators.selectFeature({
layerId: 'layer_1',
objectId: feature.id
}));Синхронное управление позволяет реализовывать:
При интеграции с потоками данных (WebSocket, Kafka, REST polling) взаимодействия становятся реакцией на приходящие события.
Каждое событие может трансформироваться в action:
Такая модель делает Kepler.gl частью реактивной системы обработки данных, где карта выступает визуальным слоем поверх потоков событий.