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

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

Система выражений работает на уровне JSON-описания стиля. Каждое выражение представляет собой массив, где первый элемент — оператор, а последующие — аргументы.

Базовая идея заключается в том, что стиль перестаёт быть статическим и становится функцией от данных:

  • свойства объекта (feature.properties)
  • уровень масштаба (zoom)
  • глобальные параметры карты
  • вычисляемые условия

Условные выражения формируют основу динамического рендеринга, позволяя заменять традиционные if/else конструкции.

Булева логика и простые условия

Условные выражения опираются на логические операторы:

  • ["==", value1, value2]
  • ["!=", value1, value2]
  • ["<", a, b]
  • ["<=", a, b]
  • [" >", a, b]
  • ["!"] (логическое отрицание)
  • ["all", ...]
  • ["any", ...]
  • ["none", ...]

Пример логического фильтрации визуального свойства

[
  "case",
  ["==", ["get", "type"], "park"],
  "#2ecc71",
  "#3498db"
]

Здесь цвет зависит от свойства type.

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

case является базовым инструментом ветвления. Оно последовательно проверяет условия и возвращает первое совпавшее значение.

Структура

["case",
  condition1, result1,
  condition2, result2,
  fallback
]

Пример многовариантной логики

[
  "case",
  ["==", ["get", "class"], "primary"],
  "#e74c3c",

  ["==", ["get", "class"], "secondary"],
  "#f1c40f",

  "#95a5a6"
]

Такой подход заменяет цепочку if / else if / else в традиционном коде.

match как точное сопоставление

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

Структура

["match",
  value,
  key1, result1,
  key2, result2,
  default
]

Пример стилизации категорий

[
  "match",
  ["get", "landuse"],
  "residential", "#dcdde1",
  "commercial", "#f6e58d",
  "industrial", "#95afc0",
  "#ffffff"
]

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

step: пороговые условные выражения

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

Структура

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

Пример зависимости от масштаба

[
  "step",
  ["zoom"],
  1,
  5, 2,
  10, 4
]

Здесь значение увеличивается при достижении порогов zoom.

Комбинирование условий

Условные выражения становятся мощнее при объединении логических операторов.

Пример AND-логики

[
  "all",
  ["==", ["get", "type"], "road"],
  [">", ["get", "width"], 5]
]

Пример OR-логики

[
  "any",
  ["==", ["get", "class"], "highway"],
  ["==", ["get", "class"], "motorway"]
]

Пример отрицания

[
  "none",
  ["==", ["get", "building"], "yes"],
  ["has", "height"]
]

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

Условные выражения и свойства фич

Наиболее распространённый сценарий — использование get для доступа к данным объекта:

["get", "population"]

Пример зависимости цвета от числового значения

[
  "case",
  [">", ["get", "population"], 1000000],
  "#c0392b",

  [">", ["get", "population"], 100000],
  "#e67e22",

  "#2ecc71"
]

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

Вложенные условия

Условные выражения допускают рекурсивную вложенность, что позволяет строить сложную логику.

Пример

[
  "case",
  ["all",
    ["==", ["get", "type"], "water"],
    ["!=", ["get", "usage"], "industrial"]
  ],
  "#3498db",

  ["==", ["get", "type"], "water"],
  "#2980b9",

  "#bdc3c7"
]

Условные выражения и масштаб (zoom)

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

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

[
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 1,
  10, 3,
  15, 8
]

Хотя это интерполяция, её часто комбинируют с условными конструкциями.

Различие между filter и expression-based условиями

Ранее логика фильтрации выполнялась через filter слоя:

"filter": ["==", "type", "road"]

Однако выражения позволяют переносить логику в свойства стиля:

  • filter — предварительное отсечение данных
  • expressions — динамическое управление визуализацией

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

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

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

Управление видимостью через opacity

[
  "case",
  ["==", ["get", "hidden"], true],
  0,
  1
]

Цветовая схема по категории

[
  "match",
  ["get", "category"],
  "hospital", "#e74c3c",
  "school", "#f1c40f",
  "park", "#2ecc71",
  "#bdc3c7"
]

Динамическая толщина линий

[
  "case",
  ["==", ["get", "highway"], "motorway"],
  6,
  2
]

Условная прозрачность объектов

[
  "interpolate",
  ["linear"],
  ["zoom"],
  8,
  [
    "case",
    ["==", ["get", "class"], "minor"],
    0.2,
    0.8
  ],
  14,
  1
]

Логические ограничения и типизация

Условные выражения требуют строгого соблюдения типов:

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

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

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

Хотя выражения выполняются на уровне WebGL пайплайна, их сложность влияет на производительность.

Факторы влияния:

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

Рекомендации по оптимизации:

  • минимизировать вложенность
  • предпочитать match вместо длинных case
  • избегать повторных get для одного свойства
  • использовать предрассчитанные свойства в данных

Композиция условных выражений в реальных стилях

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

  • заливка (fill)
  • линии (line)
  • символы (symbol)
  • 3D-экструзии (fill-extrusion)

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

[
  "case",
  ["all",
    ["==", ["get", "type"], "building"],
    [">", ["get", "height"], 50]
  ],
  "#8e44ad",

  ["==", ["get", "type"], "building"],
  "#9b59b6",

  "#ecf0f1"
]

Иерархия приоритетов условий

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

  1. case проверяет сверху вниз
  2. match ищет точное совпадение
  3. логические операторы агрегируют условия
  4. fallback-значение применяется последним

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

Оглавление