Layers и components

Архитектура визуализации в Mapbox GL JS основана на декларативной модели стилей, где карта формируется из набора источников данных (sources) и слоёв (layers). Слои определяют способ отображения географических данных, а их комбинации формируют итоговую визуальную сцену.

Слой в Mapbox GL JS представляет собой объект стиля, который:

  • ссылается на источник данных;
  • задаёт тип визуализации;
  • описывает правила отображения через свойства paint и layout;
  • участвует в порядке отрисовки (z-order).

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

Типы слоёв

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

fill

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

Основные сценарии:

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

Ключевые свойства:

  • fill-color — цвет заливки;
  • fill-opacity — прозрачность;
  • fill-outline-color — обводка полигона.

line

Используется для линий и полилиний.

Применение:

  • дороги;
  • маршруты;
  • границы;
  • изолинии.

Ключевые свойства:

  • line-color — цвет линии;
  • line-width — толщина;
  • line-dasharray — пунктир;
  • line-join, line-cap — стиль соединений и концов.

symbol

Слой для текста и иконок.

Используется для:

  • подписи объектов;
  • POI (points of interest);
  • комбинированных иконок с текстом.

Основные свойства:

  • text-field — текст;
  • text-size — размер шрифта;
  • text-font — шрифт;
  • icon-image — изображение иконки;
  • text-anchor — позиционирование текста.

circle

Отображение точек в виде кругов.

Применение:

  • кластеризация;
  • статистические точки;
  • визуализация событий.

Свойства:

  • circle-radius — радиус;
  • circle-color — цвет;
  • circle-stroke-width — обводка;
  • circle-opacity — прозрачность.

heatmap

Слой тепловых карт.

Используется для анализа плотности:

  • активности пользователей;
  • распределения событий;
  • геостатистики.

Основные параметры:

  • heatmap-weight — вес точки;
  • heatmap-intensity — интенсивность;
  • heatmap-radius — радиус влияния;
  • heatmap-color — градиент.

fill-extrusion

3D-экструзия полигонов.

Применение:

  • 3D здания;
  • объемные карты плотности;
  • визуализация высот.

Ключевые свойства:

  • fill-extrusion-height — высота;
  • fill-extrusion-color — цвет;
  • fill-extrusion-opacity — прозрачность;
  • fill-extrusion-base — базовая высота.

raster

Отображение растровых тайлов.

Используется для:

  • спутниковых снимков;
  • тайловых изображений;
  • оверлеев.

Свойства:

  • raster-opacity — прозрачность;
  • raster-brightness-min/max — яркость;
  • raster-hue-rotate — поворот оттенков.

background

Фоновый слой карты.

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

  • не зависит от источников;
  • всегда располагается внизу стека слоёв;
  • задаёт базовую визуальную среду.

Свойства:

  • background-color;
  • background-opacity;
  • background-pattern.

Структура слоя: paint и layout

Каждый слой разделён на две ключевые группы свойств.

layout

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

Примеры:

  • видимость (visibility);
  • порядок символов;
  • размещение текста;
  • минимальный и максимальный зум отображения.

paint

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

Примеры:

  • цвет;
  • прозрачность;
  • ширина линий;
  • градиенты;
  • стилизация заливки.

Разделение на layout и paint позволяет оптимизировать рендеринг: layout вычисляется реже, paint может пересчитываться динамически.

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

Слои в Mapbox GL JS образуют упорядоченный стек. Порядок в массиве style.layers напрямую влияет на визуальное перекрытие.

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

  • слои, расположенные выше, перекрывают нижние;
  • background всегда находится внизу;
  • symbol-слои часто требуют отдельного управления порядком для корректной читаемости.

Управление порядком осуществляется через:

  • addLayer(layer, beforeId?);
  • moveLayer(id, beforeId?).

Фильтрация данных в слоях

Слои могут содержать фильтры, ограничивающие отображение объектов из источника.

Фильтры поддерживают логические операторы:

  • ==, !=;
  • >, <, >=, <=;
  • in, !in;
  • all, any, none.

Пример логики:

  • отображение только дорог определённого класса;
  • скрытие объектов вне текущего зума;
  • сегментация данных по атрибутам.

Фильтры выполняются на стороне рендера и не требуют модификации источника.

Зависящие от масштаба параметры

Каждый слой может иметь ограничения по зуму:

  • minzoom;
  • maxzoom.

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

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

Выражения (Expressions) в слоях

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

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

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

Примеры сценариев:

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

Выражения позволяют отказаться от императивной логики в коде и перенести её в стиль карты.

Источники данных и связь со слоями

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

  • vector tiles;
  • GeoJSON;
  • raster tiles;
  • image sources;
  • video sources.

Связь слоя и источника является ключевой:

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

Управление слоями через API

Mapbox GL JS предоставляет методы для управления слоями в рантайме:

  • добавление:
map.addLayer({
  id: 'roads',
  type: 'line',
  source: 'streets',
  paint: {
    'line-color': '#333',
    'line-width': 2
  }
});
  • изменение порядка:
map.moveLayer('roads', 'water');
  • получение информации:
map.getLayer('roads');
  • удаление:
map.removeLayer('roads');

Система компонентов карты

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

Контролы интерфейса

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

Обеспечивает базовую навигацию:

  • зумирование;
  • вращение;
  • сброс направления.

ScaleControl

Отображает масштабную линейку, адаптируемую к текущему зуму.

AttributionControl

Отвечает за отображение атрибуции источников данных.

FullscreenControl

Переключает карту в полноэкранный режим.

Камера и состояние отображения

Компонент камеры определяет, как пользователь видит карту:

  • центр (center);
  • масштаб (zoom);
  • наклон (pitch);
  • поворот (bearing).

Изменение камеры влияет на:

  • видимость слоёв;
  • применение фильтров по зуму;
  • пересчёт выражений, зависящих от масштаба.

Событийная модель

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

  • загрузка стиля;
  • клик по слою;
  • наведение на объект;
  • изменение камеры.

События позволяют связывать визуальные элементы карты с логикой приложения без прямого доступа к DOM.

Взаимодействие слоёв и компонентов

Слои и компоненты формируют единое пространство карты, где:

  • слои отвечают за визуализацию данных;
  • компоненты — за управление и интерфейс;
  • камера — за перспективу;
  • источники — за данные.

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

Оглавление