Выражения в стилях

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

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

Выражения в стиле Mapbox GL JS представляют собой массивы, где первый элемент — имя оператора, а последующие — аргументы:

["operator", arg1, arg2, ...]

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

Пример простого выражения:

["get", "name"]

Это выражение извлекает значение свойства name из текущего объекта данных.

Категории выражений

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

Доступ к данным

Базовые операторы позволяют извлекать свойства объектов и работать с ними напрямую.

get

Извлекает значение свойства:

["get", "population"]

Используется для data-driven styling, когда визуальные параметры зависят от атрибутов GeoJSON или векторных тайлов.

has

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

["has", "name"]

feature-state

Позволяет обращаться к состоянию объекта, установленному через API:

["feature-state", "hover"]

Это критически важно для интерактивных сценариев, таких как hover-эффекты без изменения исходных данных.

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

case

Многоуровневые условия:

["case",
  ["==", ["get", "type"], "park"], "#00ff00",
  ["==", ["get", "type"], "water"], "#0000ff",
  "#cccccc"
]

Каждое условие проверяется последовательно до первого совпадения.

match

Сопоставление значений с набором вариантов:

["match",
  ["get", "class"],
  "primary", "#ff0000",
  "secondary", "#00ff00",
  "tertiary", "#0000ff",
  "#999999"
]

Этот оператор более компактный и читаемый, чем длинные цепочки case.

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

interpolate

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

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

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

В данном случае значение зависит от уровня масштаба карты.

interpolate (экспоненциальная)

["interpolate",
  ["exponential", 1.5],
  ["zoom"],
  5, 1,
  10, 2,
  15, 8
]

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

Шкалы дискретизации

step

Используется для ступенчатого изменения значений:

["step",
  ["zoom"],
  "#888888",
  5, "#aaaaaa",
  10, "#ffffff"
]

В отличие от интерполяции, значения меняются резко.

Математические и логические операции

Выражения поддерживают арифметику и сравнения:

Арифметика

["+", 2, 3]
["*", 10, 5]
["/", ["get", "value"], 2]

Сравнения

["==", 1, 1]
["!=", 2, 3]
["<", 5, 10]
["<=", 10, 10]

Логика

["all",
  ["==", ["get", "type"], "road"],
  [">", ["get", "width"], 5]
]
["any",
  ["==", ["get", "class"], "highway"],
  ["==", ["get", "class"], "motorway"]
]

Работа с типами и безопасностью

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

coalesce

Позволяет задавать резервные значения:

["coalesce",
  ["get", "name"],
  ["get", "alt_name"],
  "unknown"
]

Это критично при работе с неполными данными.

Контекст карты

zoom

Возвращает текущий масштаб:

["zoom"]

Используется для адаптивной стилизации.

heatmap-density

Применяется в heatmap-слоях для вычисления плотности:

["heatmap-density"]

Геометрические выражения

geometry-type

Позволяет различать типы геометрии:

["geometry-type"]

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

Переменные внутри выражений

let и var

Позволяют переиспользовать вычисленные значения:

["let",
  "width", ["get", "width"],
  "doubleWidth", ["*", ["var", "width"], 2],
  ["var", "doubleWidth"]
]

Это снижает дублирование и повышает читаемость сложных выражений.

Контекст состояния объектов

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

Пример:

map.setFeatureState(
  { source: "cities", id: 123 },
  { hover: true }
);

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

["case",
  ["boolean", ["feature-state", "hover"], false],
  "#ff0000",
  "#0000ff"
]

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

Сложные стили часто комбинируют несколько операторов:

["interpolate",
  ["linear"],
  ["zoom"],
  5,
  ["case",
    ["==", ["get", "type"], "water"],
    1,
    0.5
  ],
  10,
  ["case",
    ["==", ["get", "type"], "water"],
    2,
    1
  ]
]

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

Оптимизация выражений

Производительность выражений зависит от:

  • количества вложенных операторов
  • частоты пересчёта (zoom, feature-state)
  • сложности условий

Рекомендуется избегать избыточной вложенности и дублирования вычислений, используя let и coalesce.

Особенности исполнения

Выражения в Mapbox GL JS:

  • выполняются внутри WebGL-пайплайна
  • кэшируются между кадрами
  • пересчитываются только при изменении зависимостей (zoom, properties, state)

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

Роль выражений в архитектуре стилей

Выражения заменяют императивную логику, перенос её в декларативный слой стиля. Это позволяет:

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

В экосистеме entity[“company”,“Mapbox”,“mapping platform and company”][Mapbox](https://www.mapbox.com?utm_source=chatgpt.com) выражения стали основой современного подхода к визуализации геоданных, где стиль описывает не только внешний вид, но и поведение объектов в зависимости от контекста данных и карты.

Оглавление