Стилизация по свойствам объектов

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

Каждый объект, загруженный в слой geojson, vector tile source или другой источник, может содержать набор свойств. Эти свойства становятся доступными внутри выражений через оператор получения значения:

["get", "property_name"]

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

paint: {
  "fill-color": ["get", "color"]
}

В этом случае значение свойства color каждого объекта напрямую определяет цвет полигона.

Если свойство отсутствует, результат выражения становится null, и применяется значение по умолчанию или fallback-логика через case.

Условная стилизация через match

Конструкция match используется для сопоставления значения свойства с набором вариантов. Это аналог switch-case в классических языках программирования.

paint: {
  "circle-color": [
    "match",
    ["get", "type"],
    "park", "#2ecc71",
    "water", "#3498db",
    "industrial", "#95a5a6",
    "#cccccc"
  ]
}

Логика выражения:

  • берётся свойство type
  • сравнивается с перечисленными значениями
  • при совпадении возвращается соответствующий цвет
  • если совпадений нет — используется значение по умолчанию

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

Диапазонная стилизация через step

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

paint: {
  "circle-radius": [
    "step",
    ["get", "population"],
    5,
    1000, 8,
    10000, 12,
    50000, 20
  ]
}

Интерпретация:

  • базовый радиус равен 5
  • при population >= 1000 радиус становится 8
  • при >= 10000 — 12
  • при >= 50000 — 20

Такая схема широко применяется для масштабирования символов по величине показателя.

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

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

paint: {
  "circle-radius": [
    "interpolate",
    ["linear"],
    ["get", "population"],
    0, 2,
    1000, 6,
    10000, 18,
    50000, 40
  ]
}

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

Часто используется вместе с масштабом карты:

paint: {
  "line-width": [
    "interpolate",
    ["linear"],
    ["zoom"],
    5, 1,
    10, 3,
    15, 8
  ]
}

Логические конструкции case

Для сложной логики применяется case, позволяющий задавать последовательные условия.

paint: {
  "fill-color": [
    "case",
    ["==", ["get", "status"], "active"], "#2ecc71",
    ["==", ["get", "status"], "inactive"], "#e74c3c",
    ["==", ["get", "status"], "pending"], "#f1c40f",
    "#bdc3c7"
  ]
}

Каждое условие проверяется последовательно, и возвращается первое истинное значение.

Комбинирование свойств объектов

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

paint: {
  "circle-color": [
    "case",
    ["all",
      ["==", ["get", "type"], "restaurant"],
      [">", ["get", "rating"], 4]
    ],
    "#e67e22",
    "#95a5a6"
  ]
}

В данном случае цвет зависит одновременно от типа объекта и рейтинга.

Операторы логики:

  • all — все условия истинны
  • any — хотя бы одно условие истинно
  • ! — отрицание

Использование свойств для размеров и толщин

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

layout: {},
paint: {
  "line-width": ["get", "stroke_width"]
}

или с масштабированием:

paint: {
  "line-width": [
    "interpolate",
    ["linear"],
    ["get", "importance"],
    1, 1,
    10, 10
  ]
}

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

Работа со строковыми и числовыми типами

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

Строковые значения:

["get", "category"]

Числовые значения:

["to-number", ["get", "value"]]

Приведение типов необходимо при работе с внешними источниками данных, где формат может быть неоднородным.

Использование дефолтных значений

При отсутствии свойства применяется оператор coalesce, позволяющий задать цепочку значений по приоритету.

paint: {
  "text-color": [
    "coalesce",
    ["get", "text_color"],
    "#333333"
  ]
}

Если text_color отсутствует, используется значение по умолчанию.

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

GeoJSON допускает вложенные объекты, доступ к которым осуществляется последовательным использованием get.

["get", "properties"]

или

["get", "address", ["get", "metadata"]]

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

Масштабируемая стилизация на основе данных

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

paint: {
  "circle-radius": [
    "interpolate",
    ["linear"],
    ["zoom"],
    3, ["*", ["get", "weight"], 0.5],
    10, ["*", ["get", "weight"], 2]
  ]
}

Здесь визуальный размер зависит одновременно от масштаба и значения свойства weight.

Практика структурирования данных для стилизации

Эффективность стилизации напрямую зависит от структуры данных:

  • числовые показатели предпочтительно хранить в виде чисел
  • категориальные признаки — в виде фиксированных строк
  • сложные вычисления заранее переносить в preprocessing
  • избегать избыточной вложенности

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

Ограничения выражений при работе со свойствами

Использование свойств объектов связано с рядом ограничений:

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

Поэтому логика стилизации должна балансировать между гибкостью и простотой выражений.

Оглавление