Интерполяция значений

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

В Mapbox GL JS интерполяция реализуется через выражение interpolate, которое принимает тип интерполяции и набор пар «вход → выход». Входом обычно выступает масштаб (zoom), значение свойства объекта или вычисляемое выражение, а выходом — числовое или цветовое значение.

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

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

Где:

  • interpolationType — способ интерполяции
  • input — изменяемая величина
  • stop — контрольные точки
  • value — значения на этих точках

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

Линейная интерполяция задаётся как ["linear"] и предполагает равномерное изменение значения между контрольными точками.

"circle-radius": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 2,
  10, 10
]

Здесь радиус круга плавно увеличивается от 2 до 10 при увеличении масштаба от 5 до 10.

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

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

Экспоненциальная интерполяция задаётся через ["exponential", base], где base определяет кривизну изменения.

"circle-radius": [
  "interpolate",
  ["exponential", 1.5],
  ["zoom"],
  5, 2,
  10, 20
]

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

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

Ступенчатая интерполяция

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

"circle-color": [
  "step",
  ["get", "population"],
  "#00ff00",
  1000, "#ffff00",
  10000, "#ff0000"
]

Логика:

  • до 1000 — зелёный
  • от 1000 до 10000 — жёлтый
  • выше 10000 — красный

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

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

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

"line-width": [
  "interpolate",
  ["linear"],
  ["zoom"],
  3, 0.5,
  10, 5,
  15, 10
]

Здесь ширина линии увеличивается по мере приближения, обеспечивая визуальную иерархию объектов.

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

Интерполяция может опираться не только на масштаб, но и на свойства GeoJSON-данных.

"circle-radius": [
  "interpolate",
  ["linear"],
  ["get", "mag"],
  1, 2,
  5, 20
]

В этом примере радиус круга зависит от значения свойства mag. Это позволяет создавать картограммы и визуализации распределённых величин.

Комбинирование интерполяции и выражений

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

"circle-opacity": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5,
  ["case", [">", ["get", "density"], 100], 0.8, 0.4],
  10,
  ["case", [">", ["get", "density"], 100], 1, 0.6]
]

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

Цветовая интерполяция

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

"fill-color": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, "#2DC4B2",
  10, "#3BB3C3",
  15, "#669EC4"
]

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

Интерполяция в пространстве RGB и LAB

Цветовая интерполяция может выполняться в разных пространствах, влияющих на визуальное восприятие переходов.

Пример в LAB:

"fill-color": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, "#ff0000",
  10, "#0000ff"
]

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

Поведение контрольных точек (stops)

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

Нарушение порядка приводит к некорректной интерпретации выражения или игнорированию части диапазона.

Вложенные интерполяции

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

"circle-radius": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5,
  ["interpolate", ["linear"], ["get", "value"], 1, 2, 10, 8],
  10,
  ["interpolate", ["linear"], ["get", "value"], 1, 5, 10, 20]
]

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

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

Интерполяционные выражения вычисляются на GPU в рамках рендеринга слоёв. Это позволяет:

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

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

Практика построения устойчивых интерполяций

При проектировании интерполяции важно учитывать:

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

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

Оглавление