Основные компоненты стиля

Mapbox GL JS использует декларативную модель стилей, основанную на спецификации Mapbox Style Specification. Стиль в этой системе представляет собой структурированное описание того, как географические данные должны отображаться на карте: от источников данных до визуального представления слоёв, шрифтов, иконок и световых эффектов.

Стиль в Mapbox GL JS — это JSON-документ, который определяет внешний вид карты. Его ключевые элементы формируют единый конвейер визуализации.

Основные поля стиля

  • version — версия спецификации стиля. Обычно используется значение 8.
  • name — человекочитаемое имя стиля.
  • metadata — произвольные данные, используемые приложением.
  • sources — источники геоданных.
  • layers — визуальные слои, определяющие рендеринг данных.
  • sprite — путь к набору иконок.
  • glyphs — шаблон URL для загрузки шрифтов.
  • transition — параметры анимации изменений стиля.

Каждый из этих компонентов играет строго определённую роль в процессе отрисовки карты.

Источники данных (sources)

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

Типы источников

vector

Векторные тайлы — основной формат в Mapbox GL JS. Они содержат геометрию и атрибуты.

"sources": {
  "streets": {
    "type": "vector",
    "url": "mapbox://mapbox.mapbox-streets-v8"
  }
}

raster

Растровые тайлы представляют собой готовые изображения.

"satellite": {
  "type": "raster",
  "url": "mapbox://mapbox.satellite",
  "tileSize": 256
}

geojson

Используется для локальных или динамических данных.

"geo-data": {
  "type": "geojson",
  "data": "./data.geojson"
}

Слои (layers)

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

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

{
  "id": "road-layer",
  "type": "line",
  "source": "streets",
  "source-layer": "road",
  "paint": {
    "line-color": "#ff0000",
    "line-width": 2
  }
}

Типы слоёв

fill

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

line

Отвечает за линии: дороги, маршруты, границы.

symbol

Комбинированный слой для текста и иконок.

circle

Отображает точки как окружности.

fill-extrusion

Используется для 3D-объектов.

heatmap

Создаёт тепловые карты плотности.

Свойства стиля слоя

Каждый слой состоит из трёх категорий свойств:

layout

Определяет структуру отображения.

Примеры:

  • visibility
  • text-field
  • symbol-placement

paint

Отвечает за визуальные характеристики.

Примеры:

  • цвет
  • прозрачность
  • толщина линий
  • радиус окружностей

filter

Позволяет ограничить набор отображаемых объектов.

"filter": ["==", "class", "primary"]

Шрифты (glyphs)

Раздел glyphs определяет источник векторных шрифтов для текста на карте.

"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"

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

Спрайты (sprite)

Спрайт — это набор иконок, объединённых в один файл изображения и индекс.

"sprite": "mapbox://sprites/mapbox/streets-v11"

Он используется слоями типа symbol для отображения пиктограмм.

Переходы (transition)

Раздел transition управляет анимацией изменений между состояниями стиля.

"transition": {
  "duration": 300,
  "delay": 0
}

Параметры

  • duration — длительность анимации в миллисекундах
  • delay — задержка перед началом перехода

Эти параметры применяются ко всем свойствам, поддерживающим интерполяцию.

Иерархия рендеринга слоёв

Порядок слоёв в массиве layers определяет их визуальную иерархию. Слои, расположенные выше, отрисовываются поверх нижних.

Пример порядка:

  1. фон
  2. водные объекты
  3. дороги
  4. здания
  5. подписи

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

Динамическая стилизация

Стиль поддерживает выражения, позволяющие изменять отображение в зависимости от масштаба, атрибутов данных и других параметров.

Интерполяция по масштабу

"line-width": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 1,
  10, 4
]

Условные выражения

"circle-color": [
  "case",
  ["==", ["get", "type"], "park"],
  "#00ff00",
  "#ff0000"
]

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

Свет и глобальные эффекты

Стиль может включать настройки освещения для 3D-слоёв.

"light": {
  "anchor": "viewport",
  "color": "#ffffff",
  "intensity": 0.5
}

Параметры света

  • anchor — привязка источника света
  • color — цвет освещения
  • intensity — интенсивность

Эти параметры особенно важны при работе с fill-extrusion.

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

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

  1. Источник (sources) предоставляет данные.
  2. Слой (layers) выбирает данные через source-layer.
  3. Layout определяет структуру отображения.
  4. Paint задаёт визуальное оформление.
  5. Выражения уточняют динамическое поведение.
  6. Glyphs и sprites добавляют текст и иконки.
  7. Transition обеспечивает плавность изменений.

Внутренняя модель обработки

Рендеринг в Mapbox GL JS основан на WebGL. Каждый слой компилируется в набор GPU-инструкций.

Ключевые этапы:

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

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

Связь со стилями Mapbox

Платформа Mapbox предоставляет готовые стили, такие как Streets, Outdoors и Satellite, которые построены на той же системе компонентов.

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

Оглавление