Styles API

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

Основой выступает объект style, который агрегирует источники данных (sources), слои (layers), ресурсы шрифтов (glyphs), спрайты (sprites) и параметры световой модели (light). Такая структура обеспечивает независимость геометрии данных от их визуального представления.

Структура style JSON

Style в Mapbox GL JS представляет собой JSON-документ с фиксированной схемой:

  • version — версия спецификации стилей
  • sources — набор источников данных (vector, raster, geojson, image)
  • layers — визуальные слои, определяющие отрисовку
  • glyphs — шаблон URL для загрузки шрифтов
  • sprite — набор иконок и изображений
  • transition — глобальные параметры анимации изменений
  • light — модель освещения для 3D-слоев

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

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

Sources являются фундаментом стилевой системы. Они определяют способ получения географических данных:

  • vector — тайлы векторной карты
  • raster — растровые изображения
  • geojson — динамические данные в формате GeoJSON
  • image — одиночные изображения с геопривязкой
  • video — видеопотоки, наложенные на карту

Каждый source описывается объектом с параметрами:

  • type
  • url или tiles
  • tileSize
  • minzoom / maxzoom

Vector sources являются наиболее производительными, так как позволяют выполнять стилизацию на уровне геометрии и атрибутов.

Слои и порядок отрисовки

Layers представляют собой упорядоченный стек визуализации. Порядок в массиве layers определяет z-index отрисовки.

Основные типы слоёв:

  • fill — заливка полигонов
  • line — линии и границы
  • symbol — текст и иконки
  • circle — точечные данные
  • heatmap — тепловые карты
  • fill-extrusion — 3D-экструзии
  • raster — растровая визуализация

Каждый слой содержит ключевые поля:

  • id — уникальный идентификатор
  • type — тип слоя
  • source / source-layer
  • paint — визуальные свойства
  • layout — поведение и размещение

Layout и Paint: разделение логики и визуала

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

layout properties определяют поведение:

  • видимость слоя (visibility)
  • порядок символов (symbol-placement)
  • выравнивание текста
  • повторяемость и смещение

paint properties отвечают за внешний вид:

  • цвет (fill-color, line-color)
  • прозрачность (opacity)
  • размытие (blur)
  • ширина линий (line-width)
  • градиенты и интерполяции

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

Данные-ориентированная стилизация

Одной из ключевых возможностей является data-driven styling — привязка визуальных параметров к атрибутам данных.

Используются выражения (expressions):

  • интерполяция (interpolate)
  • логические условия (case, match)
  • вычисления (+, *, get)
  • цветовые шкалы

Пример концепции:

  • радиус круга зависит от значения свойства population
  • цвет полигона изменяется по диапазону плотности
  • прозрачность зависит от zoom level

Такая модель заменяет классическую императивную логику стилизации декларативными правилами внутри JSON.

Expressions и вычислительный слой

Expressions формируют мини-язык внутри стиля. Они выполняются в рантайме и позволяют:

  • обращаться к свойствам фич (get)
  • использовать zoom-dependent логику (zoom)
  • выполнять математические операции
  • строить условные ветвления

Типичные выражения:

  • interpolate(linear, zoom, ...)
  • step(get("value"), ...)
  • match(get("type"), ...)

Выражения компилируются в оптимизированные структуры, что позволяет выполнять их на GPU-ориентированном pipeline.

Работа с API стилей в рантайме

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

  • setStyle(style) — полная замена стиля
  • getStyle() — получение текущего состояния
  • addLayer(layer, beforeId?) — добавление слоя
  • removeLayer(id) — удаление слоя
  • setLayoutProperty(layer, name, value) — изменение layout
  • setPaintProperty(layer, name, value) — изменение визуальных параметров
  • setFilter(layer, filter) — фильтрация данных

Изменения применяются инкрементально, что позволяет избегать полного пересоздания WebGL контекста.

Diffing и оптимизация обновлений

Внутренний механизм style diffing сравнивает старую и новую версии стиля. Обновляются только изменённые узлы:

  • добавленные слои компилируются отдельно
  • изменённые свойства пересчитываются частично
  • неизменённые источники остаются в памяти GPU

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

Спрайты и glyphs

Sprite представляет собой атлас изображений для иконок. Он загружается в двух форматах:

  • JSON-описание координат
  • PNG-атлас

Glyphs — шрифтовые тайлы для рендеринга текста. Они подгружаются по URL-шаблону:

  • поддержка Unicode диапазонов
  • кэширование по диапазонам символов
  • динамическая подгрузка при панорамировании

Анимации и transition

Глобальный объект transition задаёт параметры интерполяции:

  • duration — длительность анимации
  • delay — задержка
  • enablePlacementTransitions — анимация символов

Каждое paint-свойство может быть интерполируемым, что обеспечивает плавные переходы при изменении стилей.

Условная логика слоёв

Слои поддерживают фильтрацию через filter, основанную на выражениях:

  • сравнение свойств
  • проверка диапазонов
  • логические комбинации AND/OR

Фильтры выполняются до рендеринга, уменьшая нагрузку на GPU.

Интеграция с источниками данных

Связь layers и sources реализуется через:

  • source — идентификатор источника
  • source-layer — слой внутри vector tiles

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

Версионирование и совместимость

Style specification имеет версионную модель:

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

Роль Mapbox Platform в стилях

Система стилей тесно связана с платформой Mapbox, предоставляющей:

Mapbox Official Site

  • хостинг тайлов и стилей
  • редактор Mapbox Studio
  • CDN для glyphs и sprites
  • API для динамической генерации стилей

Динамическая модификация визуализации

Runtime API позволяет строить интерактивные сценарии:

  • переключение тем (light/dark)
  • изменение цветовых схем по состоянию приложения
  • адаптация под zoom level
  • реакция на пользовательские события

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

Производительность и WebGL pipeline

Стилевая система напрямую транслируется в WebGL инструкции:

  • геометрия батчится по типам слоёв
  • state sorting минимизирует переключения shader programs
  • uniform buffers обновляются частично
  • GPU выполняет интерполяции свойств

Такой подход обеспечивает масштабирование до миллионов объектов на карте без деградации интерактивности.

Оглавление