Background

В архитектуре стилей Mapbox GL JS слой типа background представляет собой базовый визуальный слой карты, который заполняет весь холст рендеринга и формирует фон под всеми остальными геопространственными слоями. Он не привязан к источникам данных и не зависит от геометрии — его назначение исключительно декоративное и структурное: создание визуальной основы карты, поверх которой отображаются тайлы, векторные слои, растровые данные и пользовательские оверлеи.

Назначение и поведение background-слоя

Background-слой всегда занимает нижний уровень в порядке отрисовки. Его ключевая особенность заключается в том, что он не использует source и не обращается к данным геометрии. Это делает его самым лёгким и быстрым для рендеринга элементом карты.

Основные функции:

  • формирование цветового или градиентного фона карты;
  • обеспечение визуального контраста для остальных слоёв;
  • создание стилистической основы (ночные карты, светлые темы, тематические фоны);
  • визуальная маскировка пустых областей вне тайловых данных.

Background может быть как полностью однотонным, так и изображением (через background-pattern), либо динамически изменяемым через выражения.

Структура слоя background

В стиле Mapbox GL JS слой определяется объектом следующей структуры:

{
  "id": "background-layer",
  "type": "background",
  "paint": {
    "background-color": "#1e1e1e",
    "background-opacity": 1
  }
}

Ключевым моментом является отсутствие секции source и source-layer, что отличает его от всех остальных типов слоёв.

Свойства paint для background

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

background-color

Определяет цвет заливки всего канваса карты. Может задаваться как статическое значение или через выражения.

"background-color": "#ffffff"

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

"background-color": [
  "interpolate",
  ["linear"],
  ["zoom"],
  0, "#0b1d2a",
  10, "#3b6ea5"
]

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

background-opacity

Определяет прозрачность слоя. Диапазон значений — от 0 до 1.

"background-opacity": 0.8

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

background-pattern

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

"background-pattern": "diagonal-stripes"

В отличие от background-color, этот параметр создаёт текстурированный фон, который может использоваться для декоративных эффектов или имитации материалов.

Порядок рендеринга и влияние на слои

Background-слой всегда рендерится первым, независимо от порядка объявления в стиле. Это гарантирует, что:

  • все tile-сообщества (raster, vector, fill, line, symbol) будут отображаться поверх него;
  • любые прозрачные области других слоёв будут визуально опираться на фон;
  • изменения background не влияют на геометрию или взаимодействие с объектами карты.

При наличии нескольких background-слоёв в стиле используется только первый корректно определённый слой данного типа; остальные игнорируются с точки зрения визуального результата, так как фон карты не предназначен для композиции из нескольких background-слоёв.

Динамическое управление через setPaintProperty

Background-слой может изменяться во время выполнения через API:

map.setPaintProperty('background-layer', 'background-color', '#2a2a2a');

или с использованием интерполяции:

map.setPaintProperty('background-layer', 'background-opacity', 0.5);

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

Анимации и переходы

Для background-слоя поддерживаются переходы через свойство transition:

"background-color": "#000000",
"transition": {
  "duration": 300,
  "delay": 0
}

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

Использование выражений (expressions)

Mapbox GL JS поддерживает использование выражений для динамического вычисления свойств background-слоя.

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

"background-color": [
  "case",
  ["<", ["zoom"], 5],
  "#0b3d91",
  "#f0f0f0"
]

Также возможно использование данных состояния карты:

"background-opacity": [
  "interpolate",
  ["linear"],
  ["zoom"],
  0, 1,
  10, 0.7
]

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

Ограничения background-слоя

Несмотря на гибкость, background-слой имеет ряд ограничений:

  • не поддерживает источники данных (source);
  • не может отображать геометрию;
  • не взаимодействует с событиями (click, hover);
  • не может быть фильтруемым;
  • ограничен набором paint-свойств.

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

Роль background в композиции стиля карты

Background-слой является фундаментом визуальной иерархии. Он определяет восприятие всей карты ещё до того, как пользователь увидит географические данные. В сложных стилях он часто используется как элемент адаптивной системы оформления:

  • базовый светлый или тёмный тон;
  • градиент, создающий глубину;
  • текстурный паттерн для стилизации;
  • динамическая смена оттенков при изменении масштаба.

В композиции Mapbox Style Specification background выполняет роль нижнего слоя сцены, аналогичного «небу» или «подложке» в графических системах, на которую накладываются все остальные визуальные элементы.

Оглавление