Управление видимостью элементов карты

Визуализация геоданных часто содержит десятки слоёв, множество категорий объектов, временные данные, различные наборы источников и дополнительные элементы интерфейса. Без механизмов управления отображением карта быстро становится перегруженной, теряет читаемость и усложняет анализ данных.

В библиотеке Kepler.gl управление видимостью позволяет:

  • скрывать и отображать отдельные слои;
  • переключать наборы данных;
  • фильтровать объекты по значениям атрибутов;
  • управлять отображением легенд;
  • показывать и скрывать подписи;
  • контролировать отображение трёхмерных объектов;
  • работать с временными слоями;
  • динамически изменять конфигурацию через JavaScript.

Под видимостью понимается не только физическое отображение слоя на карте, но и участие данных в рендеринге, интерактивности, фильтрации и визуальном анализе.

Видимость слоёв

Основным элементом визуализации в Kepler.gl является слой (Layer).

Каждый слой имеет свойство:

isVisible

Оно определяет, отображается слой на карте или нет.

Пример конфигурации:

{
  id: 'cities',
  type: 'point',
  config: {
    dataId: 'cities_dataset',
    label: 'Cities',
    isVisible: true
  }
}

Если изменить значение на false, слой перестанет отображаться:

{
  config: {
    isVisible: false
  }
}

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

Изменение видимости через интерфейс

Стандартный интерфейс Kepler.gl содержит панель управления слоями.

Для каждого слоя доступны:

  • переключатель отображения;
  • изменение порядка отрисовки;
  • настройка визуального оформления;
  • удаление слоя.

При нажатии на иконку видимости происходит изменение параметра:

isVisible

Внутреннее состояние Redux обновляется автоматически, после чего запускается повторный рендер карты.

Управление видимостью через Redux

Kepler.gl построен на Redux, поэтому состояние отображения можно изменять программно.

Пример изменения видимости слоя:

dispatch({
  type: 'LAYER_VISIBILITY_CHANGE',
  payload: {
    layerId: 'cities',
    isVisible: false
  }
});

На практике чаще используются готовые экшены библиотеки.

Например:

import {toggleLayerVisibility} from '@kepler.gl/actions';

dispatch(
  toggleLayerVisibility('cities')
);

После выполнения экшена слой либо скрывается, либо отображается.

Получение текущего состояния слоя

Состояние слоя можно получить из Redux Store.

Пример:

const state = store.getState();

const layers =
  state.keplerGl.map.layers;

Поиск конкретного слоя:

const layer =
  layers.find(
    layer => layer.id === 'cities'
  );

console.log(layer.config.isVisible);

Результат:

true

или

false

Это особенно полезно при создании собственных элементов управления интерфейсом.

Массовое управление слоями

В крупных проектах может потребоваться скрытие сразу нескольких слоёв.

Пример:

layers.forEach(layer => {
  dispatch(
    updateLayerConfig(
      layer,
      {
        isVisible: false
      }
    )
  );
});

После выполнения кода карта очищается от всех отображаемых слоёв.

Показать только один слой:

layers.forEach(layer => {
  dispatch(
    updateLayerConfig(
      layer,
      {
        isVisible:
          layer.id === 'roads'
      }
    )
  );
});

Видимым останется только слой дорог.

Переключение тематических групп

Распространённым сценарием является работа с тематическими категориями.

Например:

  • дороги;
  • населённые пункты;
  • границы;
  • транспорт;
  • гидрография.

Создаётся панель переключения:

const themes = {
  transport: [
    'roads',
    'railways',
    'airports'
  ],
  geography: [
    'rivers',
    'lakes',
    'borders'
  ]
};

При выборе темы:

function showTheme(theme) {
  layers.forEach(layer => {
    dispatch(
      updateLayerConfig(
        layer,
        {
          isVisible:
            themes[theme]
              .includes(layer.id)
        }
      )
    );
  });
}

Карта становится значительно удобнее для анализа конкретной предметной области.

Видимость наборов данных

Один слой связан с определённым набором данных через параметр:

dataId

Например:

{
  dataId: 'earthquakes'
}

Если набор данных удаляется:

dispatch(
  removeDataset('earthquakes')
);

Все связанные слои автоматически становятся недоступными для отображения.

Таким образом видимость слоя зависит не только от параметра isVisible, но и от существования связанного источника данных.

Фильтрация как механизм скрытия объектов

Иногда требуется скрывать не слой полностью, а только часть объектов.

Для этого используются фильтры.

Например, отображение городов только с населением более миллиона жителей.

Конфигурация фильтра:

{
  dataId: 'cities',
  name: 'population',
  type: 'range',
  value: [1000000, 50000000]
}

После применения фильтра:

  • слой остаётся видимым;
  • часть объектов скрывается;
  • производительность повышается за счёт уменьшения количества отрисовываемых элементов.

Динамическая фильтрация через пользовательский интерфейс

Фильтры часто связываются с элементами управления.

Пример:

slider.addEventListener(
  'input',
  event => {
    const minPopulation =
      Number(event.target.value);

    updateFilter(
      minPopulation
    );
  }
);

Пользователь фактически управляет видимостью объектов внутри слоя без изменения самого слоя.

Управление отображением по времени

Kepler.gl предоставляет встроенную поддержку временных данных.

Если набор содержит поле даты:

timestamp

можно создать временной фильтр.

Пример:

{
  type: 'timeRange',
  name: 'timestamp'
}

При перемещении временного ползунка отображаются только записи, попадающие в выбранный интервал.

Такой подход широко используется для:

  • анализа транспорта;
  • отслеживания перемещений;
  • мониторинга датчиков;
  • визуализации исторических событий.

Управление видимостью через анимацию времени

В режиме Time Playback объекты автоматически появляются и исчезают по мере продвижения временной шкалы.

Схематически процесс выглядит следующим образом:

08:00 -> отображаются объекты A
09:00 -> отображаются A и B
10:00 -> отображаются B и C
11:00 -> отображается C

При этом параметр isVisible слоя не меняется.

Меняется только состав отображаемых записей.

Видимость трёхмерных объектов

Для слоёв типа:

Hexagon
Grid
H3
GeoJSON

можно включать или отключать трёхмерную визуализацию.

Например:

{
  visConfig: {
    enable3d: true
  }
}

или

{
  visConfig: {
    enable3d: false
  }
}

Отключение трёхмерности может существенно уменьшить нагрузку на графический процессор.

Отображение подписей

Многие слои поддерживают текстовые подписи.

Пример настройки:

{
  textLabel: [
    {
      field: {
        name: 'city_name'
      }
    }
  ]
}

Для временного скрытия подписей используется пустая конфигурация:

{
  textLabel: []
}

Это полезно при высокой плотности объектов.

Управление отображением легенды

Легенда помогает интерпретировать визуальные стили карты.

В зависимости от конфигурации приложения её можно:

  • показывать;
  • скрывать;
  • перемещать;
  • заменять собственной реализацией.

Пример пользовательской настройки:

{
  mapControls: {
    legend: {
      show: false
    }
  }
}

Сама карта продолжает отображаться без изменений.

Видимость всплывающих подсказок

Tooltip отображается при наведении курсора.

Настройка:

interactionConfig: {
  tooltip: {
    enabled: true
  }
}

Отключение:

interactionConfig: {
  tooltip: {
    enabled: false
  }
}

В этом случае объекты остаются видимыми, однако дополнительная информация не показывается.

Управление отображением границ карты

В GeoJSON-слоях можно отдельно контролировать отображение контуров.

Пример:

visConfig: {
  stroked: true
}

или

visConfig: {
  stroked: false
}

Если контур отключён, остаётся только заливка полигона.

Управление заливкой объектов

Отображение заливки также можно включать и выключать.

Пример:

visConfig: {
  filled: true
}

или

visConfig: {
  filled: false
}

Комбинации настроек позволяют создавать различные режимы визуализации:

Контур Заливка Результат
Да Да Полигон
Да Нет Только границы
Нет Да Сплошная область
Нет Нет Объект фактически скрыт

Условное отображение слоёв

Часто видимость зависит от масштаба карты.

Например:

map.on('zoom', () => {
  const zoom = map.getZoom();

  dispatch(
    updateLayerConfig(
      roadsLayer,
      {
        isVisible: zoom > 8
      }
    )
  );
});

Результат:

  • при малом масштабе слой скрыт;
  • при приближении автоматически появляется.

Такой подход уменьшает визуальный шум и улучшает производительность.

Переключение между режимами карты

В сложных аналитических системах создаются предустановленные режимы отображения.

Например:

const presets = {
  traffic: [
    'roads',
    'accidents'
  ],
  weather: [
    'temperature',
    'wind'
  ],
  population: [
    'cities',
    'density'
  ]
};

При выборе режима:

applyPreset('traffic');

видимость множества слоёв изменяется одним действием.

Сохранение состояния отображения

Конфигурация карты может экспортироваться в JSON.

Пример:

const config =
  keplerGlSchema.save(
    state.keplerGl.map
  );

В экспортируемом объекте сохраняются:

  • видимые слои;
  • скрытые слои;
  • фильтры;
  • настройки легенд;
  • временные параметры.

После загрузки конфигурации карта восстанавливается в том же состоянии.

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

Наиболее эффективным способом повышения производительности является уменьшение количества одновременно отображаемых объектов.

Практические методы:

  • скрытие неиспользуемых слоёв;
  • отключение подписей;
  • ограничение временного диапазона;
  • отключение 3D-режима;
  • использование фильтров вместо отображения полного набора данных;
  • отображение детализированных слоёв только при большом масштабе.

При работе с сотнями тысяч и миллионами объектов грамотное управление видимостью становится одним из ключевых инструментов оптимизации приложений на базе Kepler.gl.

Оглавление