Размещение текста вдоль линий

Отображение подписей вдоль линейных геометрий реализуется через symbol-слой с режимом размещения symbol-placement: "line". В этом режиме текст не привязывается к точке, а вычисляется вдоль траектории линии, повторяя её изгибы и направление сегментов. Такой подход используется для подписей дорог, рек, маршрутов общественного транспорта и других протяжённых объектов.

Основной принцип линейного размещения

При использовании symbol-placement: "line" каждый символ текста позиционируется вдоль линии, полученной из геометрии LineString. В отличие от точечного размещения, где подпись имеет фиксированную координату, здесь текст распределяется по всей длине объекта.

Ключевым условием корректной работы является наличие линейного источника данных:

map.addSource('roads', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: [
            [76.95, 43.25],
            [76.97, 43.26],
            [76.99, 43.27]
          ]
        },
        properties: {
          name: 'Проспект'
        }
      }
    ]
  }
});

Базовая конфигурация слоя текста вдоль линии

Для визуализации подписи используется слой типа symbol:

map.addLayer({
  id: 'road-labels',
  type: 'symbol',
  source: 'roads',
  layout: {
    'symbol-placement': 'line',
    'text-field': ['get', 'name'],
    'text-size': 14,
    'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular']
  },
  paint: {
    'text-color': '#333'
  }
});

Параметр text-field определяет содержимое подписи, а symbol-placement: "line" переключает алгоритм размещения на линейный.

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

При включённом линейном размещении Mapbox GL JS выполняет несколько этапов обработки:

  1. Разбиение линии на сегменты
  2. Интерполяция точек вдоль геометрии
  3. Расчёт касательных направлений
  4. Размещение глифов вдоль касательной

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

Управление ориентацией текста

Поведение ориентации контролируется свойством:

'text-rotation-alignment': 'map'

Доступные значения:

  • map — текст следует географической ориентации линии
  • viewport — текст ориентируется относительно экрана

Для линейных подписей чаще используется map, поскольку он сохраняет географическую читаемость.

Дополнительно влияет параметр:

'text-pitch-alignment': 'map'

Он определяет поведение при наклоне карты в 3D-режиме.

Влияние lineMetrics

Для более точного управления подписью вдоль линии используется:

'lineMetrics': true

Этот параметр включается в источнике или слое и позволяет:

  • вычислять относительное положение вдоль линии
  • улучшать распределение текста
  • поддерживать эффекты, зависящие от длины сегмента

Пример:

map.addLayer({
  id: 'river-labels',
  type: 'symbol',
  source: 'rivers',
  layout: {
    'symbol-placement': 'line',
    'text-field': ['get', 'name'],
    'text-size': 13
  },
  layout: {
    'lineMetrics': true
  }
});

Контроль повторяемости текста

При длинных линиях подпись может повторяться. За это отвечают свойства:

  • symbol-spacing — расстояние между повторами текста
  • text-max-angle — максимальный угол между символами
  • text-allow-overlap — разрешение перекрытия подписей

Пример настройки:

layout: {
  'symbol-placement': 'line',
  'text-field': ['get', 'name'],
  'symbol-spacing': 200,
  'text-max-angle': 30,
  'text-allow-overlap': false
}

Чем меньше symbol-spacing, тем чаще повторяется подпись вдоль линии.

Управление читаемостью на изгибах

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

  • text-max-angle — ограничение допустимого угла между символами
  • text-keep-upright — предотвращает перевёрнутые надписи
layout: {
  'text-keep-upright': true,
  'text-max-angle': 25
}

text-keep-upright особенно важен для дорог с петлями и сложной геометрией, где направление линии может резко меняться.

Смещение и позиционирование вдоль линии

В линейном режиме стандартный text-offset работает иначе, чем для точек. Смещение применяется перпендикулярно направлению линии:

'text-offset': [0, 1.2]

Первый компонент отвечает за смещение вдоль линии, второй — поперёк. Это позволяет размещать подписи сбоку от дороги или реки.

Работа с плотностью данных и коллизиями

Система столкновений (collision detection) играет ключевую роль при линейных подписях. Используются параметры:

  • text-allow-overlap
  • text-ignore-placement
  • text-padding

Пример:

layout: {
  'symbol-placement': 'line',
  'text-field': ['get', 'name'],
  'text-padding': 2,
  'text-allow-overlap': false
}

При высокой плотности объектов важно увеличивать text-padding, чтобы избежать наложений между соседними линиями.

Масштабирование и зависимость от зума

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

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

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

Дополнительно применяется:

  • minzoom
  • maxzoom

для ограничения видимости слоя.

Особенности работы с кривыми и длинными объектами

При сложной геометрии линии алгоритм стремится оптимизировать размещение текста:

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

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

Использование выражений для динамических подписей

text-field поддерживает выражения Mapbox GL JS:

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

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

Дополнительно возможно использование условных выражений:

'text-field': [
  'case',
  ['==', ['get', 'type'], 'highway'],
  ['get', 'name'],
  ''
]

Типичные сценарии применения

Линейное размещение текста используется для:

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

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

Взаимодействие с 3D наклоном карты

При включённом наклоне (pitch) важно учитывать свойства:

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

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

Оглавление