Mapbox стили

Библиотека Kepler.gl использует картографический движок Mapbox GL для отображения базовой карты. Визуальные характеристики этой карты определяются специальным стилем (Map Style), который задаёт внешний вид дорог, зданий, водоёмов, подписей, границ, парков, рельефа и других элементов подложки.

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

В Kepler.gl стили могут:

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

Архитектура картографических стилей

Mapbox-стиль представляет собой JSON-документ, описывающий:

  • источники данных (sources);
  • набор слоёв (layers);
  • используемые шрифты;
  • иконки;
  • цвета объектов;
  • правила отображения элементов на различных масштабах.

Упрощённая структура выглядит следующим образом:

{
  "version": 8,
  "sources": {},
  "layers": []
}

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

Схема взаимодействия выглядит так:

Kepler.gl
     |
     v
Mapbox Style JSON
     |
     v
Mapbox GL Renderer
     |
     v
Отображение карты

Стандартные стили Kepler.gl

По умолчанию Kepler.gl предоставляет несколько встроенных вариантов оформления.

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

Стиль Назначение
Dark Тёмная аналитическая карта
Light Светлая нейтральная карта
Muted Приглушённая цветовая схема
Night Ночной вариант оформления
Satellite Спутниковые снимки
Satellite Streets Спутниковая карта с подписями улиц

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

Каждый стиль имеет собственный набор цветов и уровней детализации.

Например:

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

Подключение собственного Mapbox Token

Большинство стилей Mapbox требуют наличия токена доступа.

Токен передаётся через параметр:

import KeplerGl from 'kepler.gl';

<KeplerGl
  id="map"
  mapboxApiAccessToken={MAPBOX_TOKEN}
/>

Пример:

const MAPBOX_TOKEN =
  'pk.eyJ1IjoiZXhhbXBsZSIsImEiOiJhYmNkZWYifQ';

Без валидного токена загрузка большинства картографических стилей невозможна.

Выбор стиля через конфигурацию

Внутреннее состояние Kepler.gl хранит информацию о выбранном стиле.

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

const config = {
  version: 'v1',
  config: {
    mapStyle: {
      styleType: 'dark'
    }
  }
};

Значение поля:

styleType

определяет активную тему оформления.

Другие варианты:

styleType: 'light'
styleType: 'muted'
styleType: 'satellite'

После загрузки конфигурации карта автоматически применит указанный стиль.

Объект mapStyle

Раздел mapStyle является центральным элементом настройки внешнего вида базовой карты.

Пример:

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

Здесь одновременно задаются:

  • тип базового стиля;
  • видимость отдельных групп слоёв.

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

Kepler.gl позволяет скрывать отдельные категории объектов без создания собственного стиля.

Основные группы:

Группа Содержимое
label Подписи
road Дороги
building Здания
border Границы
water Водоёмы
land Земля
3d building Трёхмерные здания

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

mapStyle: {
  visibleLayerGroups: {
    road: false
  }
}

Пример скрытия подписей:

mapStyle: {
  visibleLayerGroups: {
    label: false
  }
}

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

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

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

Сначала создаётся стиль в Mapbox Studio.

После публикации получается адрес вида:

mapbox://styles/username/styleid

Далее стиль регистрируется в приложении.

Пример:

const customStyle = {
  id: 'corporate-dark',
  label: 'Corporate Dark',
  url: 'mapbox://styles/company/abcd1234',
  icon: ''
};

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

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

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

Формат пользовательского стиля

Описание пользовательского стиля обычно содержит следующие поля:

{
  id: 'custom-style',
  label: 'Custom Style',
  url: 'mapbox://styles/user/styleid',
  icon: ''
}

Где:

id

Уникальный идентификатор.

id: 'custom-style'

label

Название для отображения пользователю.

label: 'Corporate Map'

url

Адрес Mapbox-стиля.

url: 'mapbox://styles/user/styleid'

icon

Иконка предпросмотра.

icon: ''

Обычно содержит URL изображения.

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

Поскольку Kepler.gl построен поверх Redux, новые стили можно регистрировать программно.

Пример:

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

dispatch(
  addCustomMapStyle({
    id: 'custom-dark',
    label: 'Custom Dark',
    url: 'mapbox://styles/user/123456'
  })
);

После выполнения действия новый стиль появится среди доступных вариантов.

Работа со спутниковыми стилями

Спутниковые карты являются отдельной категорией стилей.

Обычно используются для:

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

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

mapStyle: {
  styleType: 'satellite'
}

Особенности спутниковых карт:

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

Гибридные стили

Гибридный режим объединяет спутниковые изображения и векторные подписи.

Пример:

styleType: 'satellite-streets'

Такой вариант позволяет одновременно видеть:

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

Гибридные стили особенно востребованы в логистике и транспортной аналитике.

Трёхмерные здания

Некоторые стили содержат слой объёмных зданий.

Управление осуществляется через группу:

'3d building'

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

mapStyle: {
  visibleLayerGroups: {
    '3d building': true
  }
}

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

mapStyle: {
  visibleLayerGroups: {
    '3d building': false
  }
}

Трёхмерное отображение помогает при анализе городской среды и плотной застройки.

Влияние стиля на визуализацию данных

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

Для тёмных карт обычно используют:

Яркие цвета
Высокую прозрачность
Неоновые оттенки

Для светлых карт:

Насыщенные тёмные цвета
Контрастные линии
Тёмные подписи

Для спутниковых карт:

Толстые контуры
Крупные маркеры
Высокую непрозрачность

Неправильное сочетание может привести к потере читаемости данных.

Сохранение стиля в конфигурации проекта

При экспорте конфигурации информация о стиле сохраняется автоматически.

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

{
  "mapStyle": {
    "styleType": "dark",
    "visibleLayerGroups": {
      "road": true,
      "building": true,
      "water": true
    }
  }
}

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

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

Разные стили оказывают различную нагрузку на систему.

Наиболее лёгкие:

  • Light;
  • Dark;
  • Muted.

Средняя нагрузка:

  • Night;
  • гибридные карты.

Наиболее тяжёлые:

  • Satellite;
  • Satellite Streets.

Причины:

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

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

Практические сценарии выбора стиля

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

Оптимальные варианты:

Dark
Muted

Причины:

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

Транспортные системы

Оптимальные варианты:

Light
Satellite Streets

Причины:

  • хорошо различимы дороги;
  • удобно анализировать маршруты.

Городское планирование

Оптимальные варианты:

Light
3D Building

Причины:

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

Экологический мониторинг

Оптимальные варианты:

Satellite
Satellite Streets

Причины:

  • отображаются реальные природные объекты;
  • упрощается анализ территории.

Корпоративные GIS-платформы

Оптимальные варианты:

Custom Mapbox Styles

Причины:

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

Рекомендации по проектированию пользовательских стилей

При создании собственных Mapbox-стилей для Kepler.gl обычно придерживаются следующих принципов:

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

Грамотно спроектированный Mapbox-стиль превращает базовую карту из фонового изображения в полноценный инструмент визуальной аналитики, повышающий читаемость данных и эффективность работы с пространственной информацией в Kepler.gl.

Оглавление