Interpolate и step

В выражениях стилей Mapbox GL JS ключевую роль в построении динамической визуализации данных играют функции interpolate и step. Они позволяют преобразовывать числовые или категориальные значения в визуальные свойства слоёв: цвет, размер, прозрачность, ширину линий и другие параметры рендеринга.

Стилизация в Mapbox GL JS основана на декларативных выражениях. Значения свойств слоя могут зависеть от:

  • масштаба карты (zoom level)
  • свойств данных (feature properties)
  • вычисляемых функций

Interpolate и step относятся к типу zoom-and-property functions, формирующих зависимость между входным значением и визуальным результатом.

Интерполяция (interpolate)

Общая идея

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

Базовая структура:

[
  "interpolate",
  interpolation-type,
  input,
  stop1, output1,
  stop2, output2,
  ...
]

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

Наиболее распространённый вариант — linear.

Пример изменения радиуса круга в зависимости от масштаба:

[
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 2,
  10, 10
]

Поведение:

  • при zoom = 5 радиус равен 2
  • при zoom = 10 радиус равен 10
  • между значениями происходит плавное линейное увеличение

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

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

[
  "interpolate",
  ["exponential", 1.5],
  ["zoom"],
  5, 2,
  10, 10
]

Параметр 1.5 определяет ускорение роста:

  • значение > 1 усиливает рост ближе к верхнему пределу
  • значение < 1 делает рост более выраженным в начале

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

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

Частое применение — создание градиентов:

[
  "interpolate",
  ["linear"],
  ["get", "population"],
  0, "#2DC4B2",
  1000, "#3BB3C3",
  5000, "#669EC4",
  10000, "#8B88B6"
]

Результат — непрерывный переход цвета в зависимости от значения свойства population.

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

Для цветовых пространств применяется rgb, hcl или lab:

[
  "interpolate",
  ["linear"],
  ["zoom"],
  0, "hsl(200, 80%, 50%)",
  10, "hsl(300, 80%, 50%)"
]

Использование HCL или LAB обеспечивает более естественные визуальные переходы, особенно при длинных градиентах.

Пошаговая функция (step)

Общая идея

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

Структура:

[
  "step",
  input,
  output0,
  stop1, output1,
  stop2, output2,
  ...
]

Базовый пример

Изменение цвета в зависимости от зума:

[
  "step",
  ["zoom"],
  "#1a1a1a",
  5, "#2c7fb8",
  10, "#41b6c4"
]

Поведение:

  • zoom < 5 → #1a1a1a
  • 5 ≤ zoom < 10 → #2c7fb8
  • zoom ≥ 10 → #41b6c4

Классификация данных

step часто используется для тематических карт:

[
  "step",
  ["get", "density"],
  "#ffffcc",
  10, "#a1dab4",
  50, "#41b6c4",
  100, "#225ea8"
]

Это создаёт чёткие категории:

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

Радиусы точек по категориям

[
  "step",
  ["get", "mag"],
  2,
  3, 6,
  5, 10
]

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

Сравнение interpolate и step

Непрерывность против дискретности

  • interpolate — плавные переходы
  • step — резкие переключения

Визуальное поведение

Характеристика interpolate step
Тип изменения непрерывный дискретный
Плавность высокая отсутствует
Читаемость категорий ниже выше
Использование в аналитике визуализация трендов классификация

Производительность и восприятие

Обе функции вычисляются на GPU-уровне рендеринга, но различаются по когнитивной нагрузке:

  • interpolate подходит для восприятия трендов
  • step облегчает сравнение категорий

Комбинирование с zoom и свойствами данных

Zoom-based интерполяция

[
  "interpolate",
  ["linear"],
  ["zoom"],
  0, 0.5,
  10, 1
]

Применение:

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

Data-driven step

[
  "step",
  ["get", "score"],
  "#ccc",
  50, "#ffeda0",
  80, "#feb24c",
  95, "#f03b20"
]

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

Типичные ошибки при использовании

Пересечение интервалов

В step важно соблюдать строгую возрастающую последовательность порогов. Нарушение порядка приводит к некорректному поведению рендеринга.

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

В interpolate слишком редкие stop-значения создают визуально «пустые» диапазоны, где изменение становится неочевидным.

Неправильный выбор цветового пространства

Использование RGB для длинных градиентов часто приводит к визуально грязным переходам. HCL и LAB дают более равномерную визуальную динамику.

Практические сценарии применения

Картографические шкалы плотности

  • interpolate — плавные heatmap-переходы
  • step — деление на зоны риска

Масштабирование объектов

  • города увеличиваются плавно через interpolate
  • административные границы включаются по step

Визуализация временных данных

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

Гибридные подходы

В сложных слоях часто комбинируются обе функции:

  • step определяет категорию
  • interpolate внутри категории задаёт плавную динамику

Пример логики:

  • step: классификация плотности
  • interpolate: изменение прозрачности внутри класса

Роль в архитектуре стилей Mapbox GL

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

Оглавление