Программное управление стилями

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

Модель стиля и её структура

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

  • sources — источники данных (vector, raster, geojson)
  • layers — слои отображения
  • sprite — набор иконок
  • glyphs — шрифты для текста
  • transition — глобальные анимации изменений

Каждый слой содержит:

  • id
  • type (fill, line, symbol, circle, heatmap и др.)
  • source
  • paint (визуальные свойства)
  • layout (структурные свойства)
  • filter (условия отображения)

Программное управление стилем опирается на API, позволяющий изменять как весь стиль целиком, так и отдельные его компоненты.

Полная замена стиля

Основной механизм смены визуального оформления карты реализуется через метод:

  • setStyle(styleUrl | styleObject)

При вызове происходит полная перезагрузка графического контекста стиля, включая источники и слои. Используются готовые стили Mapbox или пользовательские JSON-описания.

Пример логики смены:

  • удаляются текущие слои и источники
  • загружается новый стиль
  • инициируется повторная инициализация рендеринга
  • происходит событие styledata и load

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

Управление слоями в рамках текущего стиля

Вместо полной замены стиля часто применяется точечное изменение слоёв:

  • addLayer(layer, beforeId?)
  • removeLayer(layerId)
  • moveLayer(layerId, beforeId?)

Эти операции позволяют изменять визуальную структуру без перезагрузки стиля.

Добавление слоя

Добавление слоя требует указания корректного источника:

map.addLayer({
  id: 'roads-highlight',
  type: 'line',
  source: 'composite',
  'source-layer': 'road',
  paint: {
    'line-color': '#ff0000',
    'line-width': 3
  }
});

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

Изменение визуальных свойств слоёв

Изменение paint-параметров

Метод:

  • setPaintProperty(layerId, property, value)

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

Типичные свойства:

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

Пример логики изменения:

  • слой остаётся неизменным
  • перерисовывается только GPU-параметр
  • обновление происходит мгновенно или с переходом

Изменение layout-параметров

Метод:

  • setLayoutProperty(layerId, property, value)

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

  • видимость слоя (visibility)
  • размещение текста
  • поворот иконок
  • форматирование меток

Изменения layout чаще требуют пересчёта размещения объектов на карте.

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

Метод:

  • setFilter(layerId, filterExpression)

Фильтрация основана на выражениях Mapbox Expression Syntax.

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

  • выбор объектов по атрибутам
  • комбинирование условий AND/OR
  • сравнение числовых и строковых значений

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

Динамическое управление источниками данных

Источники могут обновляться без изменения стиля:

  • getSource(id)
  • setData(geojson) для GeoJSON-источников

Пример поведения:

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

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

Работа с выражениями (Expressions)

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

Примеры выражений:

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

Типовая структура:

  • interpolate
  • match
  • case
  • step

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

  • изменение цвета дороги в зависимости от класса
  • масштабирование ширины линии в зависимости от zoom

Переходы и анимации стиля

Глобальный параметр:

  • transition

Определяет:

  • длительность изменений
  • тип easing-функции

При изменении paint/layout свойств Mapbox GL JS интерполирует значения, создавая плавные анимации.

Программное управление позволяет:

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

Управление стилем через события

Ключевые события:

  • style.load
  • styledata
  • idle
  • render

Сценарий работы:

  • после вызова setStyle выполняется ожидание style.load
  • затем выполняются операции с слоями
  • при idle гарантируется завершение рендеринга

Игнорирование событий приводит к ошибкам доступа к неинициализированным слоям.

Частичное обновление стиля

Вместо полной замены применяется стратегия диффа:

  • добавление/удаление слоёв
  • обновление источников
  • изменение выражений

Такой подход:

  • снижает нагрузку на GPU
  • сохраняет состояние карты
  • уменьшает задержки интерфейса

Переключение тем и базовых стилей

Распространённый сценарий — смена визуальной темы:

  • светлая
  • тёмная
  • сателлит
  • минималистичная

Реализация через:

  • setStyle() с разными URL
  • повторная инициализация источников пользовательских данных

При этом требуется восстановление:

  • пользовательских слоёв
  • источников
  • фильтров

Программное управление и сохранение состояния

При смене стиля теряются:

  • динамически добавленные слои
  • runtime-источники
  • фильтры

Поэтому применяется стратегия восстановления:

  • сохранение конфигурации слоёв
  • сериализация источников
  • повторное применение после загрузки нового стиля

Интеграция с визуальной моделью Mapbox

Mapbox предоставляет базовую инфраструктуру для рендеринга векторных карт, тайлов и стилей. Программное управление стилями в Mapbox GL JS опирается на эту инфраструктуру, обеспечивая согласованную работу между серверной генерацией тайлов и клиентским рендерингом WebGL.

Ограничения и особенности runtime-изменений

При работе со стилями учитываются технические ограничения:

  • невозможность частичного пересоздания JSON-стиля без reload
  • задержки при загрузке шрифтов glyphs
  • необходимость повторной компиляции шейдеров при смене слоя
  • зависимость от порядка загрузки источников

Оптимизация достигается через:

  • минимизацию setStyle вызовов
  • использование setPaintProperty вместо замены слоёв
  • кеширование источников данных

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

Порядок слоёв определяет визуальную композицию:

  • фоновые слои (background)
  • базовые слои (land, water)
  • транспортные сети
  • объекты POI
  • аннотации

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

Оглавление