Кастомные стили

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

Под кастомными стилями в Kepler.gl обычно понимаются:

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

Архитектура стилизации

Система визуализации Kepler.gl строится вокруг нескольких уровней оформления:

  1. Базовая карта (Base Map) — фон, дороги, здания, водоемы.
  2. Слои данных (Layers) — точки, линии, полигоны и другие объекты.
  3. Визуальные каналы (Visual Channels) — цвет, размер, высота, интенсивность.
  4. Тема интерфейса (UI Theme) — оформление панелей и элементов управления.
  5. Конфигурация проекта (Config) — сохраненный набор настроек визуализации.

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

Настройка цветов слоев

Цвет — один из наиболее важных элементов визуализации.

Пример создания точечного слоя:

const layer = {
  id: 'points',
  type: 'point',
  config: {
    dataId: 'cities',
    label: 'Cities',
    color: [255, 0, 0]
  }
};

Значение цвета задается массивом RGB:

[255, 0, 0]   // красный
[0, 255, 0]   // зеленый
[0, 0, 255]   // синий

Для мягких оттенков:

[52, 152, 219]
[46, 204, 113]
[241, 196, 15]

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

Использование цветовых шкал

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

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

visualChannels: {
  colorField: {
    name: 'population',
    type: 'integer'
  },
  colorScale: 'quantile'
}

Типы шкал:

Шкала Назначение
quantile распределение по квантилям
quantize равномерное деление диапазона
ordinal категориальные значения
linear линейное распределение

Цветовой диапазон задается отдельно:

colorRange: {
  name: 'Custom Range',
  colors: [
    '#F7FBFF',
    '#C6DBEF',
    '#6BAED6',
    '#2171B5',
    '#08306B'
  ]
}

Пользовательские цветовые палитры

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

Пример палитры:

const corporatePalette = {
  name: 'Corporate',
  type: 'sequential',
  category: 'Custom',
  colors: [
    '#001F3F',
    '#0074D9',
    '#7FDBFF',
    '#39CCCC',
    '#3D9970'
  ]
};

Подключение:

colorRange: corporatePalette

Такие палитры особенно полезны при:

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

Настройка прозрачности объектов

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

Для точек:

config: {
  opacity: 0.5
}

Для полигонов:

config: {
  filled: true,
  opacity: 0.3
}

Для линий:

config: {
  opacity: 0.7
}

Значения находятся в диапазоне:

0   - полностью прозрачно
1   - полностью непрозрачно

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

0.3 – 0.8

Настройка размеров точек

Размер точек влияет на читаемость карты.

Базовый размер:

config: {
  radius: 10
}

Привязка к данным:

visualChannels: {
  sizeField: {
    name: 'population',
    type: 'integer'
  },
  sizeScale: 'sqrt'
}

Типы масштабирования:

linear
sqrt
log

Пример:

config: {
  radiusRange: [5, 50]
}

Минимальный размер:

5 px

Максимальный размер:

50 px

Настройка границ полигонов

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

Пример:

config: {
  stroked: true,
  thickness: 2
}

Изменение толщины:

config: {
  thickness: 5
}

Управление цветом:

config: {
  color: [44, 62, 80]
}

Часто используется комбинация:

fillColor
strokeColor
opacity
thickness

для создания контрастных географических областей.

Кастомизация линий

Линейные объекты могут отображать:

  • дороги;
  • маршруты;
  • трубопроводы;
  • транспортные сети;
  • миграционные потоки.

Настройка:

config: {
  thickness: 4,
  color: [231, 76, 60]
}

Полупрозрачные маршруты:

config: {
  thickness: 3,
  opacity: 0.4
}

Яркие транспортные схемы:

config: {
  thickness: 6
}

Настройка Heatmap

Тепловые карты особенно чувствительны к стилю.

Пример:

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

Альтернативная палитра:

config: {
  colorRange: {
    colors: [
      '#F7FCFD',
      '#CCECE6',
      '#66C2A4',
      '#238B45',
      '#00441B'
    ]
  }
}

Зеленые палитры подходят для:

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

Красно-желтые схемы чаще применяются для:

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

Настройка Hexagon Layer

Шестиугольная агрегация является одной из наиболее популярных визуализаций в Kepler.gl.

Пример:

{
  type: 'hexagon',
  config: {
    colorRange: {
      colors: [
        '#FFF5F0',
        '#FCBBA1',
        '#FB6A4A',
        '#CB181D',
        '#67000D'
      ]
    }
  }
}

Изменение размера ячеек:

config: {
  radius: 500
}

где значение задается в метрах.

Чем больше радиус:

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

Настройка 3D-визуализации

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

Пример:

config: {
  enable3d: true
}

Настройка высоты:

visualChannels: {
  heightField: {
    name: 'sales',
    type: 'integer'
  }
}

Дополнительные параметры:

config: {
  elevationScale: 10
}

Увеличение масштаба:

elevationScale: 20

умножает высоту объектов.

Использование Mapbox Style

Kepler.gl работает поверх Mapbox GL и позволяет использовать собственные стили карт.

Подключение:

mapStyle: {
  styleType: 'custom',
  topLayerGroups: {},
  visibleLayerGroups: {},
  mapStyles: {}
}

Пример URL собственного стиля:

mapbox://styles/company/custom-style

Подобные стили создаются в редакторе Mapbox Studio.

Возможности:

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

Пользовательские стили базовой карты

В конфигурации можно переключать готовые стили:

mapStyle: {
  styleType: 'dark'
}

Доступные варианты:

dark
light
muted
satellite

Пример:

mapStyle: {
  styleType: 'satellite'
}

Для аналитических систем часто выбирают:

dark

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

Изменение видимости элементов карты

Можно скрывать отдельные элементы базовой карты.

Пример:

mapStyle: {
  visibleLayerGroups: {
    label: false,
    road: true,
    building: true,
    water: true
  }
}

Скрытие подписей:

label: false

Полезно для:

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

Темизация интерфейса

Kepler.gl поддерживает изменение темы интерфейса через Styled Components.

Создание темы:

const customTheme = {
  sidePanelBg: '#1E1E1E',
  titleTextColor: '#FFFFFF',
  textColor: '#D0D0D0'
};

Передача:

<KeplerGl
  id="map"
  theme={customTheme}
/>

Настраиваемые элементы:

  • фон панели;
  • цвет текста;
  • кнопки;
  • заголовки;
  • активные состояния;
  • элементы управления.

Использование Styled Components

Глубокая кастомизация интерфейса может выполняться через Styled Components.

Пример:

import styled from 'styled-components';

Создание собственного контейнера:

const MapWrapper = styled.div`
  width: 100%;
  height: 100vh;
  background: #111;
`;

Использование:

<MapWrapper>
  <KeplerGl />
</MapWrapper>

Такой подход позволяет полностью интегрировать карту в существующую дизайн-систему приложения.

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

Все визуальные настройки могут экспортироваться в конфигурацию проекта.

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

{
  version: 'v1',
  config: {
    visState: {},
    mapState: {},
    mapStyle: {}
  }
}

После экспорта сохраняются:

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

Импорт выполняется автоматически:

addDataToMap({
  datasets,
  config
});

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

Практические рекомендации по кастомизации

Аналитические панели

Рекомендуемые настройки:

Темная карта
Яркие акцентные цвета
Минимум подписей
Высокий контраст

Городские GIS-системы

Рекомендуемые настройки:

Светлая карта
Умеренная насыщенность цветов
Полупрозрачные полигоны
Четкие границы районов

Логистические сервисы

Рекомендуемые настройки:

Толстые маршруты
Высокая контрастность
Минимум фоновых объектов
Акцент на дорожной сети

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

Рекомендуемые настройки:

Зеленые палитры
Плавные градиенты
Средняя прозрачность
Высокая детализация слоев

Геомаркетинг

Рекомендуемые настройки:

Hexagon Layer
3D-экструзия
Категориальные палитры
Тепловые карты

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

Оглавление