Форматирование текста

Работа с текстом в картографических стилях Mapbox GL JS строится вокруг слоя типа symbol, где текстовые подписи являются частью единого механизма рендеринга символов вместе с иконками. Подход основан на декларативной модели: внешний вид текста задаётся через layout и paint свойства слоя, а содержимое формируется из данных источника и выражений стиля.

Mapbox GL JS использует SDF-рендеринг и систему размещения символов с учётом коллизий, что делает текст не просто визуальным элементом, а частью оптимизированного процесса укладки карты.

Источник текста и базовые свойства

Текст в символическом слое задаётся через свойство text-field. Оно принимает строку или выражение, формирующее содержимое подписи.

{
  id: "cities",
  type: "symbol",
  source: "places",
  layout: {
    "text-field": "{name}",
    "text-size": 14
  }
}

Ключевой принцип заключается в том, что текст не «рисуется вручную», а извлекается из данных источника через плейсхолдеры или expression API.

Основные источники текста:

  • свойства GeoJSON (properties)
  • атрибуты векторных тайлов
  • вычисляемые выражения
  • комбинированные строки

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

"text-field": "{name_en}, {country}"

Форматирование через выражения format

Наиболее гибкий способ управления текстом — выражение ["format", ...]. Оно позволяет комбинировать части текста с разным стилем внутри одной подписи.

"text-field": [
  "format",
  ["get", "name"],
  { "font-scale": 1.2 },
  "\n",
  {},
  ["get", "capital"],
  { "font-scale": 0.9, "text-color": "#666" }
]

Возможности format:

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

Это особенно важно для многоуровневых подписей (например, город + страна + административный статус).

Манипуляции строками и выражения

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

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

["upcase", ["get", "name"]]
["downcase", ["get", "name"]]

Объединение строк

["concat", ["get", "city"], ", ", ["get", "country"]]

Защита от пустых значений

["coalesce", ["get", "name_en"], ["get", "name"]]

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

Настройка внешнего вида текста

Форматирование текста в Mapbox GL JS не ограничивается содержимым. Визуальное поведение задаётся через набор layout-параметров.

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

"text-size": 14

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

"text-size": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 10,
  10, 16
]

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

Шрифты и font stack

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

Font stack обеспечивает:

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

При работе с кириллицей и азиатскими языками критически важно включать Unicode-совместимые шрифты.

Выравнивание и позиционирование

"text-anchor": "top-left"
"text-offset": [0, 0.5]

Anchor определяет точку привязки текста:

  • center
  • top
  • bottom
  • left
  • right
  • комбинированные значения (top-left, bottom-right)

Offset позволяет сдвигать текст относительно геометрии объекта.

Поворот и трансформация

"text-rotate": 45
"text-transform": "uppercase"

text-transform полезен для унификации отображения данных:

  • none
  • uppercase
  • lowercase

Контроль переполнения и обрезки текста

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

Обрезка и перенос

"text-max-width": 8
"text-word-wrap": true

Mapbox автоматически переносит текст по словам, если превышена ширина.

Сокрытие переполнения

"text-overlap": false
"text-allow-overlap": false

Эти параметры влияют на систему collision detection.

Контуры и читаемость текста

Для повышения читаемости текста используется обводка (halo).

"text-halo-color": "#ffffff"
"text-halo-width": 2

Halo особенно важен:

  • на насыщенных подложках
  • при наложении на спутниковые изображения
  • при плотной городской застройке

Выравнивание и типографика

Mapbox GL JS поддерживает базовые типографические параметры:

"text-letter-spacing": 0.05
"text-line-height": 1.2

Эти параметры влияют на восприятие плотных текстовых блоков и многострочных подписей.

Условное форматирование через zoom и данные

Система выражений позволяет адаптировать текст в зависимости от масштаба и свойств данных.

Зависимость от zoom

"text-field": [
  "step",
  ["zoom"],
  "",
  5, ["get", "name"],
  10, ["get", "name_en"]
]

На низком масштабе показывается минимальная информация, на высоком — более подробная.

Данные-ориентированное форматирование

"text-color": [
  "match",
  ["get", "type"],
  "capital", "#ff0000",
  "city", "#0000ff",
  "#333333"
]

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

Поддержка мультиязычности

Форматирование текста тесно связано с локализацией. Типичный подход — хранение нескольких языковых полей:

"text-field": [
  "coalesce",
  ["get", "name_ru"],
  ["get", "name_en"]
]

Для более сложных сценариев используется выбор языка пользователя через глобальные переменные стиля:

"text-field": ["get", ["get", "preferred_language"]]

Работа с иконками и текстом вместе

Символические слои часто комбинируют текст и иконки.

{
  type: "symbol",
  layout: {
    "icon-image": "marker",
    "text-field": "{name}",
    "text-offset": [0, 1.2],
    "text-anchor": "top"
  }
}

Особенности взаимодействия:

  • текст может смещаться относительно иконки
  • collision detection учитывает оба элемента
  • приоритеты задаются через text-optional и icon-optional

Коллизии и размещение подписей

Система размещения текста в Mapbox GL JS основана на grid-based collision detection.

"text-allow-overlap": false
"text-ignore-placement": false

Алгоритм учитывает:

  • размер текста
  • текущий zoom
  • плотность объектов
  • приоритет слоя (symbol-sort-key)

Сортировка и приоритет текста

"symbol-sort-key": ["get", "importance"]

Это позволяет управлять тем, какие подписи остаются видимыми при конфликте размещения.

Поддержка направленных языков и RTL

При работе с арабским и ивритом автоматически активируется поддержка RTL-скриптов. Однако важно учитывать:

  • правильные font stacks
  • корректную ширину текста
  • отсутствие фиксированных layout ограничений

Практика комбинированного форматирования

Сложные подписи часто строятся через комбинацию выражений:

"text-field": [
  "format",
  ["upcase", ["get", "city"]],
  { "font-scale": 1.1 },
  "\n",
  {},
  ["concat", "Population: ", ["to-string", ["get", "population"]]],
  { "font-scale": 0.8, "text-color": "#888" }
]

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

Особенности рендеринга текста в Mapbox GL JS

Mapbox GL JS оптимизирует рендеринг текста через:

  • батчинг символов
  • SDF-глифы
  • GPU-ускорение
  • предварительное кеширование глифов

Это делает возможным отображение тысяч подписей без существенной деградации производительности.

Экосистема и роль Mapbox

Mapbox предоставляет инфраструктуру для генерации тайлов, стилей и шрифтов, что напрямую влияет на возможности форматирования текста в карте.

Mapbox official site

Оглавление