Layout свойства

Разделение layout и paint в стиле рендеринга

В архитектуре стиля MapLibre GL JS свойства слоя делятся на две фундаментальные категории: layout и paint.

Layout свойства определяют геометрию и размещение объектов на карте. Они отвечают за то, как именно элементы будут расположены, какие ресурсы будут выбраны для отображения и каким образом они будут интерпретированы до этапа отрисовки.

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

Ключевая особенность layout-части заключается в том, что изменения этих свойств часто требуют пересчёта расположения объектов и могут приводить к перерасчёту части сцены (layout pass), что делает их более “тяжёлыми” по сравнению с paint.

Роль layout в системе рендеринга

Layout свойства формируют промежуточный слой между геометрическими данными источников (sources) и финальным изображением на экране.

Именно здесь выполняются:

выбор спрайтов и шрифтов;
позиционирование текста и иконок;
расчёт столкновений (collision detection);
управление видимостью элементов;
подготовка геометрии линий для рендеринга.

Layout можно рассматривать как декларативное описание того, как данные должны быть разложены в экранном пространстве.

Symbol layer и доминирование layout-свойств

Наиболее богатый набор layout свойств присутствует в слое типа symbol, который объединяет текстовые и иконографические объекты.

visibility

Базовое свойство управления отображением слоя:

visible — слой отображается
none — слой скрыт

Пример:

layout: {
  visibility: 'visible'
}

Хотя выглядит тривиально, это свойство участвует в оптимизации рендеринга: скрытые слои исключаются из большинства стадий обработки.

icon-image

Один из ключевых layout параметров.

Определяет, какой спрайт из sprite atlas будет использован:

layout: {
  'icon-image': 'airport-15'
}

Особенности:

значение берётся из sprite-атласа стиля;
поддерживает выражения;
может зависеть от свойств данных (data-driven styling).

Пример с условием:

'icon-image': [
  'match',
  ['get', 'type'],
  'airport', 'airport-15',
  'train', 'rail-15',
  'default-15'
]

icon-size

Масштабирование иконки относительно базового размера спрайта:

'icon-size': 1.2

Также поддерживает интерполяции:

'icon-size': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 0.5,
  10, 1.5
]

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

icon-anchor

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

center
top
bottom
left
right
комбинации углов

Пример:

'icon-anchor': 'bottom'

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

icon-offset

Смещение иконки относительно anchor:

'icon-offset': [0, -10]

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

icon-allow-overlap и icon-ignore-placement

Эти параметры управляют системой предотвращения столкновений:

'icon-allow-overlap': false,
'icon-ignore-placement': false

allow-overlap — разрешает наложение иконок;
ignore-placement — игнорирует ограничения размещения.

В сложных картах именно эти свойства определяют, какие объекты “выживают” при конфликте за место.

text-field

Одно из наиболее мощных layout свойств.

Определяет текстовую строку, которая будет отображаться:

'text-field': '{name}'

Поддерживает:

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

Пример:

'text-field': [
  'concat',
  ['get', 'name'],
  ' (',
  ['get', 'type'],
  ')'
]

text-font

Задаёт семейство шрифтов:

'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular']

Особенности:

зависит от доступных шрифтов стиля;
влияет на рендеринг через glyph atlas;
критичен для поддержки языков (CJK, кириллица и др.).

text-size

Размер текста в пикселях:

'text-size': 14

Часто используется с zoom-интерполяцией:

'text-size': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 10,
  10, 18
]

text-anchor и text-offset

Контроль точки привязки текста и его смещения:

'text-anchor': 'top',
'text-offset': [0, 0.5]

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

text-justify

Управляет выравниванием текста вдоль линии:

auto
left
center
right

Особенно важно для линейных объектов (дороги, реки).

text-max-width

Ограничивает ширину текста перед переносом:

'text-max-width': 8

При превышении значения текст автоматически переносится.

text-letter-spacing и text-line-height

Контроль типографики:

'text-letter-spacing': 0.05,
'text-line-height': 1.2

Используются для улучшения читаемости при разных масштабах.

text-transform

Преобразование регистра:

none
uppercase
lowercase

Пример:

'text-transform': 'uppercase'

text-allow-overlap и text-ignore-placement

Аналогично иконкам, управляют коллизиями текста:

'text-allow-overlap': false,
'text-ignore-placement': false

Line layer и layout свойства

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

line-cap

Определяет форму концов линии:

butt
round
square

layout: {
  'line-cap': 'round'
}

line-join

Определяет форму соединения сегментов:

miter
round
bevel

'line-join': 'round'

line-miter-limit и line-round-limit

Контролируют поведение острых углов:

'line-miter-limit': 2,
'line-round-limit': 1.05

Эти параметры предотвращают артефакты при сложной геометрии линий.

Fill и Circle слои

В слоях fill и circle layout свойства минимальны.

visibility

Практически единственное layout свойство:

layout: {
  visibility: 'visible'
}

Это связано с тем, что геометрия этих слоёв не требует сложной компоновки.

Выражения (expressions) в layout свойствах

Layout свойства в MapLibre GL JS полностью поддерживают style expressions, что позволяет создавать динамические правила без JavaScript-логики.

Пример условного выбора иконки:

'icon-image': [
  'case',
  ['==', ['get', 'priority'], 'high'],
  'star-15',
  'circle-15'
]

Пример адаптации текста к масштабу:

'text-size': [
  'interpolate',
  ['linear'],
  ['zoom'],
  0, 8,
  12, 16,
  18, 22
]

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

Производительность layout операций

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

Причины:

пересчёт размещения при изменении zoom;
collision detection для текста и иконок;
переработка glyph и sprite atlases;
повторный layout при изменении выражений.

Особенно затратны:

text-field с выражениями;
включённые collision rules;
динамические icon-image привязки.

Практический эффект: изменение layout свойства может вызвать перерасчёт не только слоя, но и соседних слоёв в пределах tile.

Шрифты и glyph atlas в layout системе

При использовании text layout свойств происходит обращение к glyph atlas.

Механизм включает:

загрузку необходимых символов;
упаковку глифов в текстуры;
кеширование по диапазонам Unicode;
fallback на альтернативные шрифты.

text-font напрямую влияет на то, какие glyph-ресурсы будут запрошены.

Влияние sprite atlas на icon layout

Свойство icon-image работает поверх sprite atlas:

все иконки упакованы в единый JSON + image atlas;
layout выбирает нужный регион;
затем вычисляется размер и позиция.

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

Collision detection как часть layout

Система размещения символов использует глобальную модель коллизий:

каждый symbol получает bounding box;
рассчитывается пересечение с соседними объектами;
применяются правила приоритета;
часть объектов скрывается.

Эта логика полностью относится к layout стадии, так как влияет на то, будет ли объект вообще передан в рендер.

Data-driven layout подход

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

'text-size': ['get', 'size']

Это позволяет:

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

Ключевые особенности layout архитектуры

layout определяет структуру сцены, а не её внешний вид;
изменения layout часто дороже, чем изменения paint;
symbol layers являются наиболее сложной частью системы layout;
выражения позволяют переносить логику в декларативный стиль;
производительность напрямую зависит от количества конфликтующих объектов и сложности текстов/иконок.