Стилизация текста

Векторные объекты в OpenLayers отображаются через систему стилей, где текст является отдельным компонентом ol/style/Text. Он применяется для подписей объектов карты: названий улиц, точек интереса, меток слоёв и динамических данных.

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

Базовая структура текстового стиля

Основной объект для работы с текстом — ol/style/Text, который передаётся в ol/style/Style:

import Style from 'ol/style/Style';
import Text from 'ol/style/Text';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';

const textStyle = new Text({
  text: 'Объект',
  font: '14px Arial',
  fill: new Fill({
    color: '#333'
  }),
  stroke: new Stroke({
    color: '#ffffff',
    width: 3
  })
});

const style = new Style({
  text: textStyle
});

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

Свойство text: статические и динамические значения

Поле text определяет содержимое подписи. Оно может быть:

  • строкой
  • функцией, возвращающей строку
  • значением из атрибутов объекта

Пример динамической привязки:

text: feature => feature.get('name')

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

Шрифты и типографика

Свойство font задаёт CSS-подобное описание:

font: 'bold 16px "Roboto", sans-serif'

Поддерживаются:

  • начертание (bold, italic)
  • размер в пикселях
  • список шрифтов с fallback
  • стандартный CSS-синтаксис

Шрифт влияет только на визуализацию текста, но не участвует в геометрии объекта.

Цвет текста и обводка

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

Fill

fill: new Fill({
  color: '#000'
})

Stroke

stroke: new Stroke({
  color: '#fff',
  width: 4
})

Обводка часто используется для повышения читаемости на насыщенных подложках. Комбинация fill + stroke является стандартом для картографических подписей.

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

textAlign

Определяет горизонтальное выравнивание:

  • left
  • right
  • center
  • end
  • start
textAlign: 'center'

justify

Используется для многострочного текста:

justify: true

textBaseline

Определяет вертикальную привязку:

  • top
  • middle
  • bottom
  • alphabetic

Смещение текста

Параметры смещения позволяют управлять положением подписи относительно геометрии:

offsetX: 10,
offsetY: -10

Применяется для предотвращения перекрытия текста с символами маркеров или геометрией.

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

rotation

rotation: Math.PI / 4

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

scale

scale: 1.2

Используется для адаптивного изменения размера без изменения шрифта.

Ограничение отображения текста

maxAngle

Ограничивает отображение текста на кривых:

maxAngle: 0.5

Если угол изгиба линии превышает значение, текст не рисуется.

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

overflow

overflow: true

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

Подложка текста

backgroundFill и backgroundStroke

Добавляют фон под текст:

backgroundFill: new Fill({
  color: 'rgba(255,255,255,0.7)'
}),
backgroundStroke: new Stroke({
  color: '#000',
  width: 1
})

Применяется для повышения читаемости поверх сложных картографических слоёв.

Отступы вокруг текста

padding

padding: [5, 5, 5, 5]

Порядок: верх, право, низ, лево.

Используется для создания визуального «воздуха» вокруг подписи.

Привязка текста к геометрии

placement

  • point — фиксированное положение
  • line — вдоль линии
  • line-center — центр линии
placement: 'line'

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

Приоритет и конфликт текстов

В плотных слоях подписи могут перекрывать друг друга. OpenLayers применяет алгоритмы разрешения конфликтов:

  • проверка пересечений
  • учёт масштаба
  • приоритет слоёв и стилей

Дополнительно используется:

declutter: true

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

Динамические стили текста через функцию

Наиболее гибкий подход — функция стиля:

const styleFunction = feature => {
  const name = feature.get('name');
  const type = feature.get('type');

  return new Style({
    text: new Text({
      text: `${name} (${type})`,
      font: '13px Arial',
      fill: new Fill({ color: '#111' }),
      stroke: new Stroke({ color: '#fff', width: 3 }),
      overflow: true
    })
  });
};

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

Многострочный текст

Перенос строки задаётся символом \n:

text: 'Город\nЦентр'

Каждая строка может иметь собственное выравнивание через textAlign и justify.

Производительность при большом количестве подписей

При большом числе объектов текстовая отрисовка становится ресурсоёмкой. Основные факторы оптимизации:

  • использование declutter
  • ограничение resolution
  • упрощение шрифтов
  • отказ от динамических функций там, где возможны статические значения
  • минимизация сложных стилей (background, rotation)

Комбинирование текста с иконками

ol/style/Text часто используется вместе с ol/style/Icon:

image: new Icon({
  src: 'marker.png'
}),
text: new Text({
  text: 'Точка',
  offsetY: -20
})

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

Особенности рендеринга

Текст в OpenLayers рендерится на canvas, поэтому:

  • отсутствует DOM-структура для подписей
  • стили применяются на уровне отрисовки
  • изменения стиля требуют перерисовки слоя
  • качество зависит от device pixel ratio

При масштабировании карты текст перерассчитывается в зависимости от текущего разрешения слоя.

Использование атрибутов геометрии и контекста

Текст может зависеть не только от свойств объекта, но и от контекста слоя:

text: feature => {
  const population = feature.get('pop');
  return population > 100000 ? feature.get('name') : '';
}

Пустая строка предотвращает отображение подписи.

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

Условное отображение реализуется через:

  • возврат '' в text
  • изменение visible слоя
  • проверку масштаба внутри функции стиля
text: feature => {
  const zoom = feature.get('zoomLevel');
  return zoom > 10 ? feature.get('name') : '';
}

Роль текста в картографической визуализации

Текстовые стили формируют семантический слой карты, связывая геометрию с именованной информацией. Они являются основным инструментом подписывания пространственных данных и обеспечивают читаемость карты без необходимости интерактивных всплывающих элементов.

Оглавление