Роли и labels

В Mapbox GL JS отображение объектов строится вокруг строгого разделения между данными (source) и их визуальными ролями (layers). Роль объекта на карте не задаётся явно внутри геометрии, а определяется через слой, который интерпретирует свойства объекта.

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

  • геометрическая визуализация (линии, полигоны, точки)
  • оформление (цвет, обводка, заливка)
  • подписи и символы (labels)
  • вспомогательные визуальные элементы (иконки, маркеры, подписи инфраструктуры)

Именно слой символов (symbol layer) отвечает за labels, где текст и иконки становятся частью картографической сцены.

Symbol layer как основа label-логики

В Mapbox GL JS подписи реализуются через слой типа:

  • type: "symbol"

Этот тип слоя объединяет две независимые, но часто используемые вместе сущности:

  • text — текстовые подписи (labels)
  • icon — графические пиктограммы

Роль слоя символов заключается не просто в отрисовке текста, а в управлении позиционированием, приоритетами и конфликтами отображения.

Ключевой момент: label не является отдельным объектом данных — это визуальная интерпретация свойства feature.

Роли текстовых labels

Текстовая часть символического слоя определяется через layout параметры:

  • text-field
  • text-size
  • text-font
  • text-transform
  • text-letter-spacing
  • text-max-width

text-field как центральный механизм роли

= f(properties, expressions)

text-field определяет, какое свойство объекта становится подписью.

Примеры ролей:

  • имя города: properties.name
  • категория объекта: properties.type
  • комбинированная роль: "${name_ru} / ${name_en}"

Mapbox поддерживает выражения, что позволяет формировать label как функцию от данных:

  • конкатенация строк
  • условные выражения
  • fallback значения
  • локализация

Иерархия ролей labels в слоях

Labels редко существуют изолированно. Они подчиняются иерархии слоёв:

  1. Административные границы (страны, регионы)
  2. Города и населённые пункты
  3. Районы и локальные зоны
  4. POI (points of interest)
  5. Технические объекты (остановки, инфраструктура)

Каждый уровень задаётся отдельным слоем symbol, где роль определяется:

  • приоритетом слоя (layer order)
  • масштабом (minzoom, maxzoom)
  • важностью данных

Конфликты и приоритет labels

Одной из ключевых задач Mapbox GL JS является предотвращение наложения подписей.

Механизм работает через:

  • text-allow-overlap
  • text-ignore-placement
  • symbol-sort-key
  • collision detection engine

Роль label в этом контексте становится не только визуальной, но и системной — каждый текстовый элемент участвует в алгоритме размещения.

Пример приоритетной логики:

  • крупные города имеют более высокий symbol-sort-key
  • мелкие объекты скрываются при нехватке места
  • подписи могут исчезать при зуме

Роли и выражения в labels

Mapbox GL JS поддерживает expression-based стилизацию, что позволяет задавать роль label динамически.

Типичные конструкции:

  • ["get", "name"]
  • ["concat", ["get", "city"], ", ", ["get", "country"]]
  • ["case", condition, value_if_true, value_if_false]

Это превращает label в вычисляемое представление данных.

Роль перестаёт быть фиксированной и становится контекстной:

  • на одном зуме label показывает полное имя
  • на другом — сокращённое
  • при изменении языка — локализованное значение

Icon и text как комбинированные роли

Symbol layer может совмещать:

  • text (подпись)
  • icon (символ)

Роли могут быть независимыми или взаимосвязанными:

  • icon обозначает тип объекта
  • text уточняет идентификацию

Ключевые свойства:

  • icon-image
  • icon-size
  • icon-allow-overlap
  • text-offset

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

Anchoring и позиционная роль labels

Каждый label имеет точку привязки:

  • text-anchor
  • icon-anchor

Возможные позиции:

  • top
  • bottom
  • left
  • right
  • center

= f(anchor, offset, geometry)

Роль anchor определяет, где относительно геометрии будет размещён текст.

Пример:

  • для точек интереса label часто снизу
  • для дорог — вдоль линии
  • для полигонов — центр масс

Роль масштабирования в labels

Labels тесно связаны с масштабом карты.

Параметры:

  • minzoom
  • maxzoom
  • text-size с интерполяцией

Роль одного и того же label меняется в зависимости от zoom level:

  • на низком масштабе: агрегированная подпись
  • на среднем: региональные объекты
  • на высоком: детальные POI

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

  • увеличение размера
  • изменение содержания
  • появление или исчезновение

Локализация как роль label

Mapbox GL JS поддерживает мультиязычные labels через:

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

Типичная структура:

  • name_en
  • name_ru
  • name_local

Роль определяется приоритетом:

= (name_{ru}, name_{en}, name_{local})

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

Динамические роли через feature-state

Mapbox GL JS поддерживает состояние объектов:

  • hover
  • selected
  • active

Через feature-state label может менять поведение:

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

Пример логики:

  • обычное состояние: короткий label
  • активное состояние: расширенный label с деталями

Роль label становится реактивной и зависит от UI-событий.

Фильтрация как механизм распределения ролей

Слои labels часто используют filter для разделения ролей:

  • города отдельно от деревень
  • рестораны отдельно от магазинов
  • дороги по типам

Фильтрация задаёт, какие features участвуют в конкретной label-роли.

Пример логики:

  • слой A: крупные города
  • слой B: малые города
  • слой C: деревни

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

Оптимизация производительности labels

Рендеринг labels — одна из самых дорогих операций в Mapbox GL JS.

Критические факторы:

  • количество символов
  • плотность объектов
  • collision detection
  • количество выражений

Оптимизация достигается через:

  • разделение слоёв по zoom
  • сокращение text-field
  • использование symbol-placement
  • предрасчёт категорий в данных

Роль symbol-placement в распределении labels

Параметр symbol-placement определяет геометрическую роль label:

  • point — точечные подписи
  • line — подписи вдоль линий
  • line-center — центр линии

Это влияет на восприятие данных:

  • дороги читаются как маршруты
  • реки как непрерывные объекты
  • точки как независимые сущности

Семантические роли в данных и их отображение

Хотя Mapbox GL JS не навязывает строгую семантику, роль label часто выводится из структуры данных:

  • административные объекты → геополитические labels
  • коммерческие объекты → POI labels
  • природные объекты → географические labels

Таким образом, роль label — это проекция бизнес-логики данных в визуальный слой.

Сложные композиции labels

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

  • базовый label (название)
  • вторичный label (категория)
  • третичный label (дополнительная информация)

Это реализуется через несколько symbol layers с разными фильтрами и стилями.

Каждый слой формирует свою роль:

  • идентификация
  • классификация
  • контекст

Итеративное формирование роли label в стиле карты

Стиль карты в Mapbox GL JS можно рассматривать как систему, где роли labels формируются поэтапно:

  1. выбор данных через source
  2. фильтрация features
  3. назначение слоя symbol
  4. определение text-field
  5. вычисление выражений
  6. разрешение конфликтов
  7. финальная компоновка сцены
Оглавление