toggleSplitMap

В геопространственной визуализации часто требуется сравнение двух наборов данных: до/после, разные временные срезы, альтернативные сценарии обработки. В kepler.gl для этого используется режим split map — разделённый экран с двумя синхронизированными картами. Механизм toggleSplitMap управляет включением и выключением этого режима, а также взаимодействием с состоянием приложения через Redux-подобную архитектуру библиотеки.

Архитектура split view

Внутри Kepler.gl карта не является единым статическим объектом. Она строится на основе состояния:

  • mapState — параметры камеры, масштаба, центра
  • visState — слои, фильтры, данные
  • uiState — настройки интерфейса, включая split view

Split map реализуется как логическое разделение одного визуального состояния на два синхронных под-окна:

  • Left map (левая панель)
  • Right map (правая панель)

При включении режима оба окна могут:

  • использовать одинаковые данные
  • иметь независимую камеру
  • либо быть синхронизированными (опционально)

Роль toggleSplitMap

toggleSplitMap — это action, который переключает состояние split view:

  • если режим выключен → включает split screen
  • если включен → возвращает к одиночной карте

Фактически это переключатель UI-уровня, который влияет на layout и поведение KeplerGl контейнера.

Внутреннее состояние UI

В состоянии приложения Kepler.gl split map обычно хранится в uiState:

{
  uiState: {
    splitMapView: false
  }
}

После вызова toggleSplitMap:

{
  uiState: {
    splitMapView: true
  }
}

Это значение используется компонентом верхнего уровня для изменения layout.

Подключение KeplerGl контейнера

Базовая интеграция строится через React-компонент:

import KeplerGl from 'kepler.gl';
import { useDispatch } from 'react-redux';
<KeplerGl
  id="map"
  width={window.innerWidth}
  height={window.innerHeight}
/>

Когда активируется split mode, обычно создаются два идентификатора:

<KeplerGl id="map-left" />
<KeplerGl id="map-right" />

Логика toggleSplitMap через dispatch

Внутренне переключение осуществляется через dispatch action:

import { toggleSplitMap } from 'kepler.gl/actions';

dispatch(toggleSplitMap());

Этот вызов:

  • инвертирует текущее значение split режима
  • обновляет UI state
  • триггерит переразметку layout контейнера

Связь с reducer-слоем

Reducer обрабатывает действие примерно следующим образом:

case TOGGLE_SPLIT_MAP:
  return {
    ...state,
    uiState: {
      ...state.uiState,
      splitMapView: !state.uiState.splitMapView
    }
  };

Это делает поведение детерминированным: состояние полностью зависит от предыдущего значения.

Поведение layout при активации split map

При включении split режима происходит перераспределение пространства:

  • контейнер делится на 50/50 или кастомный ratio
  • каждая карта получает отдельный viewport
  • синхронизация камеры может включаться отдельно

Возможные конфигурации:

Независимые карты

  • левая карта: dataset A
  • правая карта: dataset B
  • разные фильтры и стили

Синхронизированные карты

  • одинаковый zoom
  • одинаковый center
  • различие только в слоях

Практическая интеграция split view

Часто toggleSplitMap используется вместе с контроллерами UI:

<button onCl ick={() => dispatch(toggleSplitMap())}>
  Toggle Split View
</button>

При этом сам KeplerGl контейнер должен быть подготовлен к динамическому созданию двух инстансов.

Управление состоянием камер

При split режиме важно разделять mapState:

  • mapState.mapViewLeft
  • mapState.mapViewRight

или использовать общий state с override-логикой.

Пример концептуального разделения:

mapState: {
  latitude: 40.7,
  longitude: -73.9,
  zoom: 12,
  bearing: 0,
  pitch: 0,
  split: {
    left: {...},
    right: {...}
  }
}

Синхронизация взаимодействий

Kepler.gl поддерживает сценарии, где действия пользователя на одной карте могут отражаться на другой:

  • pan синхронизация
  • zoom синхронизация
  • фильтры синхронизация

Это реализуется через middleware-логику, перехватывающую события камеры.

Влияние toggleSplitMap на rendering pipeline

При переключении режима происходит:

  1. пересборка layout контейнеров
  2. перерасчёт размеров WebGL canvas
  3. пересоздание viewport
  4. перераспределение слоёв визуализации

WebGL контекст может быть переинициализирован, особенно при смене размеров.

Оптимизация производительности

Split view увеличивает нагрузку:

  • два canvas вместо одного
  • дублирование слоёв
  • параллельные вычисления фильтров

Рекомендуемые подходы:

  • использовать shared datasets
  • избегать дублирования heavy layers
  • отключать анимации при синхронизации
  • контролировать frequency of state updates

Типичные ошибки интеграции

1. Несоответствие размеров контейнера

При включении split view не обновляются размеры canvas → приводит к артефактам WebGL.

2. Потеря синхронизации state

Обе карты получают разные версии mapState.

3. Дублирование данных

Один dataset загружается дважды вместо shared reference.

Связь toggleSplitMap с UI слоями

UI слой Kepler.gl реагирует на split mode:

  • панель фильтров может дублироваться
  • легенда разделяется или синхронизируется
  • tooltips работают независимо

Это определяется конфигурацией uiState.

Использование в аналитических сценариях

Split map часто применяется для:

  • сравнения логистических маршрутов
  • анализа плотности населения по годам
  • визуализации изменений климатических данных
  • A/B анализа геопродуктов

В таких сценариях toggleSplitMap становится центральным элементом взаимодействия, а не просто UI переключателем.

Поведение при динамическом выключении split режима

При возврате в single view:

  • одна из карт уничтожается
  • состояние камеры выбирается из primary viewport
  • layout пересчитывается в full-width режим
  • освобождается второй WebGL контекст
Оглавление