Выражения для interpolate

MapLibre GL JS поддерживает систему выражений стиля, в которой ключевую роль играет interpolate — механизм плавного изменения значений в зависимости от входной переменной. Чаще всего этой переменной выступает масштаб карты (zoom), но допустимы и свойства данных.

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

Выражение имеет следующий общий вид:

[
  "interpolate",
  interpolationType,
  input,
  stopInput1, output1,
  stopInput2, output2,
  ...
]

Компоненты:

  • interpolationType — тип интерполяции
  • input — входная величина (например, ["zoom"] или ["get", "property"])
  • пары stopInput / output — контрольные точки

На основе этих точек вычисляется промежуточное значение.

Интерполяция по зуму

Наиболее распространённый сценарий — изменение визуальных параметров в зависимости от масштаба карты.

Пример изменения толщины линии

[
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 1,
  10, 4,
  15, 10
]

Логика:

  • при зуме 5 ширина линии = 1
  • при зуме 10 ширина = 4
  • при зуме 15 ширина = 10
  • между точками значение изменяется плавно

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

["linear"]

Линейная интерполяция изменяет значение с постоянной скоростью между точками.

Характеристики:

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

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

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

Здесь слой постепенно появляется по мере приближения карты.

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

["exponential", base]

Экспоненциальная интерполяция позволяет управлять кривизной изменения.

Параметр base:

  • base = 1 → поведение аналогично linear
  • base > 1 → медленный старт и резкое ускорение
  • base < 1 → быстрый старт и замедление

Пример увеличения радиуса маркера:

[
  "interpolate",
  ["exponential", 1.5],
  ["zoom"],
  5, 2,
  12, 20
]

Значение растёт неравномерно, создавая более естественное визуальное восприятие масштаба.

Кривые Безье в интерполяции

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

Кубическая кривая Безье позволяет точно управлять динамикой изменения значений.

Особенности:

  • более тонкая настройка ускорения
  • используется для сложных визуальных эффектов
  • поведение похоже на CSS easing-функции

Пример:

[
  "interpolate",
  ["cubic-bezier", 0.2, 0.8, 0.2, 1],
  ["zoom"],
  3, 0,
  10, 1
]

Такой вариант создаёт плавное появление с акцентом на мягкое замедление в конце.

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

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

Пример тепловой карты

[
  "interpolate",
  ["linear"],
  ["get", "temperature"],
  0, "#2c7bb6",
  10, "#abd9e9",
  20, "#ffffbf",
  30, "#fdae61",
  40, "#d7191c"
]

Принцип работы:

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

Интерполяция свойств объектов данных

Входом может быть не только zoom, но и любое числовое поле источника данных.

Пример зависимости радиуса от плотности населения

[
  "interpolate",
  ["linear"],
  ["get", "population_density"],
  0, 2,
  500, 6,
  2000, 20
]

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

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

Интерполяция особенно часто применяется в circle-radius и circle-opacity.

Радиус кругов по зуму

"circle-radius": [
  "interpolate",
  ["linear"],
  ["zoom"],
  4, 1,
  10, 8,
  16, 20
]

Прозрачность точек

"circle-opacity": [
  "interpolate",
  ["linear"],
  ["zoom"],
  6, 0,
  8, 1
]

Множественные остановки и детализация кривой

Чем больше точек задано, тем точнее можно контролировать поведение функции.

[
  "interpolate",
  ["linear"],
  ["zoom"],
  0, 0,
  4, 0.2,
  8, 0.6,
  12, 0.9,
  16, 1
]

Такая схема позволяет формировать нелинейные визуальные переходы даже при использовании linear-интерполяции.

Особенности вычисления значений

Алгоритм интерполяции работает по принципу:

  1. определяется диапазон между ближайшими stopInput
  2. вычисляется относительная позиция входного значения
  3. применяется выбранный тип интерполяции
  4. возвращается промежуточный результат

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

Сочетание с другими выражениями

interpolate может быть вложен в более сложные конструкции.

Пример с условием

[
  "case",
  [">", ["zoom"], 10],
  [
    "interpolate",
    ["linear"],
    ["zoom"],
    10, 1,
    15, 5
  ],
  0
]

Здесь интерполяция активируется только при достижении определённого масштаба.

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

Использование интерполяции позволяет:

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

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

Оглавление