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

Интерполяция цветов в Mapbox GL JS основана на системе выражений (expressions), которая позволяет вычислять значения визуальных свойств динамически — в зависимости от масштаба, данных или других параметров. В контексте картографической визуализации это ключевой механизм для создания плавных переходов между цветами, устранения резких границ и формирования информативной визуальной шкалы.

Интерполяция представляет собой математическое вычисление промежуточных значений между заданными контрольными точками (стопами). В случае цветов это означает плавный переход между двумя или более цветами.

В Mapbox GL JS цветовая интерполяция реализуется через выражение:

["interpolate", interpolationType, input, stop1, value1, stop2, value2, ...]

где:

  • interpolationType — тип интерполяции (например, "linear", "exponential", "cubic-bezier")
  • input — входное значение (масштаб, свойство объекта и т. д.)
  • stop — контрольные точки
  • value — значения (в данном случае цвета)

Интерполяция по масштабу карты

Одно из наиболее распространённых применений — изменение цвета объектов в зависимости от zoom level.

map.setPaintProperty('water-layer', 'fill-color', [
  'interpolate',
  ['linear'],
  ['zoom'],
  0, '#2b8cbe',
  5, '#a6bddb',
  10, '#e0ecf4'
]);

В этом примере:

  • при малом масштабе вода имеет тёмно-синий оттенок
  • при увеличении масштаба цвет становится светлее
  • переход происходит плавно без скачков

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

Интерполяция по атрибутам данных

Не менее важный сценарий — data-driven styling, когда цвет зависит от значения свойства объекта.

map.setPaintProperty('population-layer', 'fill-color', [
  'interpolate',
  ['linear'],
  ['get', 'population'],
  0, '#ffffcc',
  1000, '#a1dab4',
  10000, '#41b6c4',
  100000, '#225ea8'
]);

Здесь значение поля population определяет оттенок полигона. Чем выше значение, тем более насыщенный и тёмный цвет используется.

Это классическая схема построения хороплетных карт, где цветовая шкала заменяет числовое восприятие.

Типы интерполяции

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

Линейная интерполяция

['linear']

Самый простой вариант. Значение изменяется пропорционально расстоянию между стопами.

Графически это прямая линия между точками. Используется по умолчанию в большинстве случаев.

Экспоненциальная интерполяция

['exponential', base]

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

['interpolate',
  ['exponential', 1.5],
  ['zoom'],
  0, '#f7fbff',
  10, '#08306b'
]

При значении base > 1 переход ускоряется ближе к верхним значениям, при base < 1 — ближе к нижним.

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

Кривые Безье

['cubic-bezier', x1, y1, x2, y2]

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

['interpolate',
  ['cubic-bezier', 0.2, 0.8, 0.2, 1],
  ['zoom'],
  5, '#fee8c8',
  12, '#e34a33'
]

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

Форматы представления цвета

Mapbox GL JS поддерживает несколько способов задания цветов внутри интерполяции:

  • HEX ("#ff0000")
  • RGB ("rgb(255,0,0)")
  • RGBA ("rgba(255,0,0,0.5)")
  • HSL ("hsl(200, 70%, 50%)")

Пример интерполяции в HSL:

['interpolate',
  ['linear'],
  ['zoom'],
  0, 'hsl(200, 80%, 30%)',
  10, 'hsl(50, 90%, 60%)'
]

HSL часто используется для более предсказуемого изменения оттенков, поскольку позволяет отдельно контролировать hue, saturation и lightness.

Цветовая интерполяция как часть выражений

Интерполяция не является изолированным механизмом. Она встроена в систему выражений Mapbox GL JS и может комбинироваться с другими операторами.

Пример с условной логикой:

[
  'case',
  ['>', ['get', 'density'], 1000],
  '#08306b',
  [
    'interpolate',
    ['linear'],
    ['get', 'density'],
    0, '#f7fbff',
    1000, '#6baed6'
  ]
]

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

Использование в слоях fill, line и circle

Интерполяция цветов применяется практически во всех типах слоёв.

Fill-слои

'fill-color': [
  'interpolate',
  ['linear'],
  ['get', 'value'],
  0, '#edf8fb',
  500, '#b2e2e2',
  1000, '#2ca25f'
]

Используется для полигонов: административные границы, зоны плотности, тепловые области.

Line-слои

'line-color': [
  'interpolate',
  ['linear'],
  ['zoom'],
  0, '#deebf7',
  10, '#3182bd'
]

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

Circle-слои

'circle-color': [
  'interpolate',
  ['linear'],
  ['get', 'magnitude'],
  1, '#fee5d9',
  5, '#fcae91',
  10, '#fb6a4a'
]

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

Визуальная непрерывность и perceptual design

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

Однако линейная интерполяция в RGB-пространстве не всегда соответствует человеческому восприятию. Например, переход от жёлтого к синему может выглядеть визуально неравномерным.

В таких случаях применяется:

  • HSL-интерполяция
  • заранее подобранные палитры
  • ограниченное число стопов

Интерполяция и шкалы данных

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

Пример нелинейного подхода:

['interpolate',
  ['exponential', 2],
  ['get', 'income'],
  0, '#f1eef6',
  50000, '#bdc9e1',
  100000, '#74a9cf',
  200000, '#0570b0'
]

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

Работа с прозрачностью в интерполяции

Цвет в Mapbox GL JS может включать альфа-канал, что позволяет одновременно интерполировать прозрачность.

['interpolate',
  ['linear'],
  ['zoom'],
  5, 'rgba(255,0,0,0.1)',
  12, 'rgba(255,0,0,0.8)'
]

Такой подход используется для создания эффектов «проявления» объектов при увеличении масштаба.

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

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

[
  'let',
  'val', ['get', 'score'],
  [
    'interpolate',
    ['linear'],
    ['var', 'val'],
    0, '#ffffb2',
    50, '#fecc5c',
    100, '#e31a1c'
  ]
]

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

Ограничения и особенности поведения

При работе с цветовой интерполяцией в Mapbox GL JS важно учитывать несколько особенностей:

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

Также важно учитывать, что интерполяция вычисляется на GPU, поэтому эффективность выражений напрямую влияет на рендеринг карты.

Практическая роль в визуализации данных

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

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

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

Оглавление