Heading structure

В Mapbox GL JS визуальная структура карты формируется через стиль (style specification), где каждый слой определяет отдельный уровень отображения данных. Текстовые элементы, включая подписи объектов, дороги, POI и административные области, реализуются через symbol layer, в котором ключевую роль играет параметр text-field.

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

Ключевые элементы этой системы:

  • symbol layer — слой, отвечающий за текст и иконки
  • text-field — содержимое подписи
  • layout properties — параметры размещения текста
  • paint properties — визуальное оформление текста
  • layer order — порядок отрисовки слоёв

Именно комбинация этих компонентов формирует структуру заголовков на карте.

Структура текстовых слоёв и порядок отрисовки

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

  1. Базовые географические элементы (континенты, океаны)
  2. Административные границы
  3. Крупные региональные подписи
  4. Городские подписи
  5. Локальные POI и мелкие объекты

Пример добавления слоя с подписью:

map.addLayer({
  id: 'city-labels',
  type: 'symbol',
  source: 'composite',
  'source-layer': 'place_label',
  layout: {
    'text-field': ['get', 'name_en'],
    'text-size': 16
  },
  paint: {
    'text-color': '#333'
  }
});

Иерархия формируется не только порядком слоёв, но и параметрами масштаба и фильтрации.

Формирование текста через text-field

Параметр text-field определяет содержимое подписи и является центральным элементом всей системы текстовой иерархии.

Он поддерживает выражения Mapbox Expression Syntax:

'text-field': ['concat', ['get', 'name'], ' ', ['get', 'name_en']]

Основные способы формирования:

  • получение значения из свойства (['get', 'name'])
  • объединение строк (concat)
  • условная логика (case, match)
  • форматирование чисел и строк

Многоуровневые подписи

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

  • основной текст (город)
  • дополнительный текст (страна)
  • альтернативные названия

Пример:

'text-field': [
  'format',
  ['get', 'name'],
  {},
  '\n',
  {},
  ['get', 'country'],
  { 'font-scale': 0.8 }
]

Такой подход создаёт визуальную структуру внутри одного label, фактически формируя «внутренний заголовок».

Масштабирование заголовков через zoom-dependent styling

Один из ключевых механизмов иерархии — изменение текста в зависимости от масштаба карты.

'text-size': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 10,
  10, 16,
  15, 22
]

Это создаёт логическую структуру:

  • малый масштаб → страны и континенты
  • средний масштаб → города
  • крупный масштаб → улицы и POI

Таким образом, «заголовки» карты динамически перестраиваются.

Приоритет отображения и конфликт подписей

Mapbox GL JS использует систему collision detection для предотвращения наложения текстов.

Основные параметры:

  • text-allow-overlap
  • text-ignore-placement
  • text-optional
  • symbol-sort-key

Управление приоритетом

'symbol-sort-key': ['get', 'rank']

Чем выше значение rank, тем выше приоритет отображения.

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

  • столицы → rank 100
  • крупные города → rank 50
  • малые города → rank 10

Геометрическая ориентация текста

Структура заголовков зависит не только от порядка слоёв, но и от ориентации текста относительно карты.

Основные параметры:

  • text-rotation-alignment
  • text-keep-upright
  • text-transform
  • text-anchor

Пример:

'text-rotation-alignment': 'map',
'text-keep-upright': true

Это делает подписи согласованными с направлением карты, что особенно важно при изменении bearing.

Heading карты и влияние bearing на структуру подписей

Параметр bearing определяет поворот карты, что влияет на восприятие заголовков.

map.setBearing(45);

Изменение heading приводит к:

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

В сочетании с:

  • text-keep-upright
  • icon-rotation-alignment

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

Группировка заголовков через слои и фильтры

Иерархия может быть явно задана через фильтрацию данных.

filter: ['==', ['get', 'type'], 'city']

или более сложные условия:

filter: [
  'all',
  ['>=', ['get', 'population'], 100000],
  ['==', ['get', 'class'], 'urban']
]

Таким образом создаются отдельные уровни:

  • мегаполисы
  • города
  • посёлки
  • деревни

Каждый уровень соответствует своей «категории заголовков».

Вложенные текстовые структуры и форматирование

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

Пример многострочного текста

'text-field': [
  'format',
  ['get', 'name'],
  { 'font-scale': 1.2, 'text-font': ['literal', ['DIN Bold']] },
  '\n',
  {},
  ['get', 'region'],
  { 'font-scale': 0.9 }
]

В результате создаётся структура:

  • верхний уровень: основной заголовок
  • нижний уровень: поясняющий текст

Контроль плотности заголовков

Плотность текстовых элементов регулируется через:

  • minzoom / maxzoom
  • text-max-width
  • text-padding
  • text-allow-overlap

Пример ограничения:

minzoom: 8,
maxzoom: 14

Это позволяет разделить уровни отображения:

  • низкий zoom → только ключевые заголовки
  • высокий zoom → детализированные подписи

Взаимодействие иерархии слоёв и источников данных

Структура заголовков зависит от источника данных (source-layer), который определяет тип географических объектов.

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

  • place_label → города, страны
  • road_label → дороги
  • poi_label → точки интереса
'source-layer': 'place_label'

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

Стабильность структуры при анимации и изменении состояния карты

При изменении параметров карты:

  • zoom
  • bearing
  • pitch

Mapbox GL JS пересчитывает размещение подписей в реальном времени.

Особенно важны:

  • pitch-alignment
  • rotation-alignment
  • text-translate

Пример:

'text-pitch-alignment': 'map',
'text-rotation-alignment': 'viewport'

Это влияет на то, как «заголовки» ведут себя в 3D-представлении карты.

Комбинированная иерархия: слои, выражения и приоритеты

Полная структура заголовков формируется одновременно на трёх уровнях:

  1. Слой (layer order) — базовая визуальная иерархия
  2. Данные (source + filter) — логическая группировка
  3. Стилизация (layout + paint + expressions) — визуальное поведение

Именно пересечение этих уровней создаёт итоговую структуру текстовой карты, где каждый заголовок занимает строго определённое место в общей композиции.

Оглавление