Цветовое кодирование

Роль цвета в картографической визуализации

Цветовое кодирование в Mapbox GL JS используется как основной инструмент визуального выражения пространственных данных. Цвет позволяет мгновенно интерпретировать числовые значения, категории и плотности, превращая географические данные в читаемую аналитическую картину.

В основе работы лежит система стилей Mapbox Style Specification, где визуальные свойства слоёв задаются через paint properties и layout properties. Цвет в этих свойствах может быть статическим либо вычисляемым на основе данных.

Основные способы задания цвета

В Mapbox GL JS цвет задаётся через свойство paint, чаще всего через ключи:

  • fill-color — для полигонов
  • line-color — для линий
  • circle-color — для точечных слоёв
  • text-color — для текста
  • heatmap-color — для тепловых карт

Простейший статический вариант:

map.addLayer({
  id: 'countries',
  type: 'fill',
  source: 'countries',
  paint: {
    'fill-color': '#2b8cbe',
    'fill-opacity': 0.7
  }
});

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

Данные как источник цвета

Главная сила Mapbox GL JS заключается в data-driven styling — стилизации на основе свойств данных.

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

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

map.addLayer({
  id: 'population-fill',
  type: 'fill',
  source: 'states',
  paint: {
    'fill-color': [
      'interpolate',
      ['linear'],
      ['get', 'population'],
      0, '#f2f0f7',
      1000000, '#cbc9e2',
      5000000, '#9e9ac8',
      10000000, '#6a51a3'
    ]
  }
});

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

Интерполяция цветов

Интерполяция позволяет плавно изменять цвет между заданными точками.

Ключевые типы интерполяции:

  • linear — линейное изменение
  • exponential — экспоненциальное усиление
  • interval — ступенчатое изменение (через step)

Пример экспоненциальной интерполяции:

'fill-color': [
  'interpolate',
  ['exponential', 1.5],
  ['get', 'density'],
  0, '#edf8fb',
  50, '#b2e2e2',
  100, '#66c2a4',
  200, '#238b45'
]

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

Категориальное цветовое кодирование

Для дискретных значений используется выражение match.

'fill-color': [
  'match',
  ['get', 'type'],
  'water', '#74add1',
  'forest', '#31a354',
  'urban', '#de2d26',
  '#cccccc'
]

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

Условные выражения и логика

Mapbox GL JS поддерживает логические конструкции внутри стилей.

Пример условного окрашивания:

'circle-color': [
  'case',
  ['>', ['get', 'value'], 100],
  '#e31a1c',
  ['>', ['get', 'value'], 50],
  '#fd8d3c',
  '#31a354'
]

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

Цветовые шкалы и их проектирование

При создании шкал важно учитывать:

  • равномерность восприятия
  • контрастность
  • тип данных (непрерывные или категориальные)
  • семантику (например, красный — высокий риск)

Типичные шкалы:

  • последовательные (светлый → тёмный)
  • дивергентные (центр + отклонения)
  • категориальные (разные цвета без порядка)

Пример дивергентной шкалы:

'fill-color': [
  'interpolate',
  ['linear'],
  ['get', 'anomaly'],
  -10, '#2166ac',
  0, '#f7f7f7',
  10, '#b2182b'
]

Использование step для дискретных диапазонов

Функция step задаёт пороговые значения без плавной интерполяции.

'circle-color': [
  'step',
  ['get', 'mag'],
  '#2c7bb6',
  2, '#abd9e9',
  4, '#fdae61',
  6, '#d7191c'
]

Каждый диапазон имеет фиксированный цвет, что часто применяется в сейсмологии, демографии и экологии.

Цвет в тепловых картах

Heatmap-слои используют специализированное свойство heatmap-color.

'heatmap-color': [
  'interpolate',
  ['linear'],
  ['heatmap-density'],
  0, 'rgba(0,0,255,0)',
  0.2, 'royalblue',
  0.4, 'cyan',
  0.6, 'lime',
  0.8, 'yellow',
  1, 'red'
]

Плотность автоматически вычисляется движком Mapbox, а цвет отображает концентрацию точек.

Работа с прозрачностью в цветовых схемах

Цвет в Mapbox GL JS часто комбинируется с альфа-каналом:

'fill-color': 'rgba(255, 0, 0, 0.4)'

или через выражения:

'fill-opacity': [
  'interpolate',
  ['linear'],
  ['get', 'score'],
  0, 0.1,
  100, 0.8
]

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

Доступ к атрибутам данных

Цветовые выражения опираются на функцию get, извлекающую значения из источника данных:

['get', 'property_name']

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

Пример:

['get', 'elevation']

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

Комбинирование нескольких параметров

Цвет может зависеть от нескольких факторов через вложенные выражения:

'fill-color': [
  'interpolate',
  ['linear'],
  ['+', ['get', 'population'], ['get', 'density']],
  0, '#f7fbff',
  100, '#6baed6',
  200, '#08306b'
]

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

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

Цветовые выражения выполняются на стороне рендеринга WebGL. Это означает:

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

Однако сложные вложенные выражения увеличивают нагрузку на GPU и могут влиять на плавность рендеринга при большом количестве объектов.

Типичные ошибки при цветовом кодировании

Часто встречающиеся проблемы:

  • отсутствие значения по умолчанию в match
  • несоответствие типов данных (строка вместо числа)
  • чрезмерное количество цветовых ступеней
  • использование близких оттенков без достаточного контраста
  • игнорирование прозрачности при наложении слоёв

Корректная настройка цветовых выражений требует согласования данных, визуальной логики и масштаба карты.

Цвет как инструмент семантической нагрузки

Цвет в Mapbox GL JS выполняет не только визуальную, но и аналитическую функцию. Он кодирует:

  • интенсивность явления
  • принадлежность к категории
  • отклонение от нормы
  • пространственные кластеры
  • плотность распределения

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

Оглавление