mapStyle

Параметр mapStyle в Kepler.gl отвечает за визуальное оформление базовой карты. Через него определяется, какой картографический стиль будет использоваться для отображения географической подложки: дороги, здания, водоёмы, границы, подписи населённых пунктов и прочие элементы картографического интерфейса.

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

Роль mapStyle в архитектуре Kepler.gl

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

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

const config = {
  version: 'v1',
  config: {
    mapState: {},
    mapStyle: {},
    visState: {}
  }
};

Раздел mapStyle содержит параметры оформления базовой карты и связанных с ней визуальных компонентов.

Пример:

{
  mapStyle: {
    styleType: 'dark'
  }
}

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

Основное свойство styleType

Ключевым параметром объекта mapStyle является styleType.

Пример:

{
  mapStyle: {
    styleType: 'light'
  }
}

Значение определяет активный стиль из списка доступных картографических тем.

Наиболее распространённые варианты:

Стиль Описание
dark Тёмная карта
light Светлая карта
muted Приглушённые цвета
satellite Спутниковые снимки
streets Детализированная дорожная карта

Пример переключения на спутниковый режим:

{
  mapStyle: {
    styleType: 'satellite'
  }
}

Такой вариант особенно полезен для анализа объектов местности, инфраструктуры и ландшафта.

Светлая тема (light)

Светлая карта является одним из наиболее универсальных решений.

Пример:

{
  mapStyle: {
    styleType: 'light'
  }
}

Особенности:

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

На светлом фоне хорошо отображаются:

  • тепловые карты;
  • кластеры;
  • точечные объекты;
  • маршруты;
  • полигоны насыщенных цветов.

Тёмная тема (dark)

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

Пример:

{
  mapStyle: {
    styleType: 'dark'
  }
}

Характеристики:

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

Особенно эффективно выглядят:

{
  colorRange: {
    colors: [
      '#00FFFF',
      '#00FF00',
      '#FFFF00',
      '#FF0000'
    ]
  }
}

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

Приглушённая тема (muted)

Стиль muted создавался для случаев, когда базовая карта не должна отвлекать внимание от аналитических данных.

Пример:

{
  mapStyle: {
    styleType: 'muted'
  }
}

Особенности:

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

Подобный стиль особенно полезен для:

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

Спутниковый стиль (satellite)

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

Пример:

{
  mapStyle: {
    styleType: 'satellite'
  }
}

Преимущества:

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

Недостатки:

  • сложнее воспринимать мелкие подписи;
  • повышенная визуальная насыщенность;
  • некоторые слои могут теряться на фоне снимков.

Для улучшения читаемости обычно увеличивают прозрачность данных или используют контрастные цвета.

Стиль улиц (streets)

Режим ориентирован на городскую навигацию.

Пример:

{
  mapStyle: {
    styleType: 'streets'
  }
}

Особенности:

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

Подходит для:

  • логистики;
  • транспортной аналитики;
  • анализа маршрутов;
  • отслеживания перемещений.

Настройка видимости элементов карты

Объект mapStyle позволяет управлять отображением отдельных категорий объектов карты.

Пример структуры:

{
  mapStyle: {
    visibleLayerGroups: {
      label: true,
      road: true,
      border: true,
      building: true,
      water: true,
      land: true
    }
  }
}

Через visibleLayerGroups можно отключать отдельные элементы базовой карты.

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

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

Пример отключения:

{
  mapStyle: {
    visibleLayerGroups: {
      label: false
    }
  }
}

После этого названия городов, улиц и объектов перестанут отображаться.

Преимущества:

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

Управление дорогами

Дорожная сеть также может быть отключена.

Пример:

{
  mapStyle: {
    visibleLayerGroups: {
      road: false
    }
  }
}

Подход полезен для:

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

Управление границами

Категория border отвечает за отображение административных границ.

Пример:

{
  mapStyle: {
    visibleLayerGroups: {
      border: false
    }
  }
}

После отключения исчезнут:

  • государственные границы;
  • региональные границы;
  • административные разделители.

Управление зданиями

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

Пример:

{
  mapStyle: {
    visibleLayerGroups: {
      building: false
    }
  }
}

Такой подход часто применяется при визуализации:

  • мобильности населения;
  • транспортных потоков;
  • GPS-треков.

Управление водными объектами

Параметр water отвечает за отображение:

  • рек;
  • озёр;
  • морей;
  • водохранилищ.

Пример:

{
  mapStyle: {
    visibleLayerGroups: {
      water: false
    }
  }
}

Отключение позволяет сосредоточиться исключительно на тематических данных.

Управление сушей

Элемент land отвечает за отрисовку поверхности суши.

Пример:

{
  mapStyle: {
    visibleLayerGroups: {
      land: false
    }
  }
}

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

Использование пользовательских стилей

Kepler.gl поддерживает подключение собственных Mapbox-стилей.

Пример:

{
  mapStyle: {
    styleType: 'custom-style'
  }
}

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

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

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

Комбинирование параметров

Объект mapStyle может содержать сразу несколько настроек.

Пример:

{
  mapStyle: {
    styleType: 'dark',
    visibleLayerGroups: {
      label: false,
      road: true,
      border: false,
      building: false,
      water: true,
      land: true
    }
  }
}

Результат:

  • тёмная карта;
  • скрыты подписи;
  • скрыты границы;
  • скрыты здания;
  • сохранены дороги и водные объекты.

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

Экспорт конфигурации со стилем карты

Все настройки mapStyle сохраняются в экспортируемой конфигурации проекта.

Пример:

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

В экспортируемом объекте будет присутствовать раздел:

{
  config: {
    mapStyle: {
      styleType: 'dark',
      visibleLayerGroups: {
        label: false,
        road: true,
        border: false
      }
    }
  }
}

При последующем импорте карта восстановится в исходном виде.

Влияние mapStyle на производительность

Сам параметр mapStyle практически не влияет на производительность приложения, однако некоторые особенности могут оказывать косвенное воздействие:

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

Для визуализации миллионов объектов обычно используют:

{
  mapStyle: {
    styleType: 'dark',
    visibleLayerGroups: {
      label: false,
      building: false
    }
  }
}

Это уменьшает визуальную нагрузку и делает аналитические слои более читаемыми.

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

Геоаналитика

{
  mapStyle: {
    styleType: 'muted'
  }
}

Позволяет сосредоточить внимание на данных.

Мониторинг транспорта

{
  mapStyle: {
    styleType: 'streets'
  }
}

Обеспечивает детальное отображение дорожной сети.

Ночные дашборды

{
  mapStyle: {
    styleType: 'dark'
  }
}

Создаёт высокий контраст между картой и данными.

Анализ местности

{
  mapStyle: {
    styleType: 'satellite'
  }
}

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

Печатные отчёты

{
  mapStyle: {
    styleType: 'light'
  }
}

Обеспечивает хорошую читаемость на бумаге и в PDF-документах.

Оглавление