Стили в Mapbox GL JS определяют визуальное представление карты: цветовую палитру, типографику подписей, отображение слоёв, порядок отрисовки геометрии, поведение при масштабировании и интерактивные состояния объектов. Вся графическая логика карты описывается через стиль, представленный в формате Mapbox Style Specification — структурированном JSON-документе, который интерпретируется рендерером Mapbox GL.
Mapbox Studio является основным инструментом создания и редактирования таких стилей. Он предоставляет визуальный интерфейс, позволяющий управлять слоями, источниками данных, фильтрами, выражениями и настройками отображения без прямого редактирования JSON, при этом сохраняя полную совместимость с программной моделью Mapbox GL JS.
Каждый стиль в Mapbox Studio базируется на нескольких ключевых сущностях:
Источники определяют, откуда поступают географические данные. Поддерживаются следующие типы:
Источник задаёт фундамент данных, но не определяет их внешний вид. Он лишь предоставляет структуру геометрии и атрибутов.
Слои определяют визуализацию данных из источников. Каждый слой включает:
Слои в Mapbox Studio организованы в виде стековой модели. Порядок слоёв критически важен: верхние слои перекрывают нижние.
Используются для полигональных объектов: административные границы, здания, зоны.
Основные параметры:
fill-colorfill-opacityfill-outline-colorПрименяются к линейным объектам: дороги, реки, маршруты.
Ключевые свойства:
line-colorline-widthline-dasharrayОтвечают за подписи и иконки.
Поддерживают:
Используются для точечных данных, особенно в аналитических визуализациях.
Параметры:
circle-radiuscircle-colorcircle-stroke-widthСоздаёт 3D-объекты, например здания с высотой.
Создание стиля начинается с выбора шаблона или пустого стиля. Шаблоны предоставляют преднастроенные слои для базовой карты: streets, light, dark, satellite.
Базовый стиль включает:
Изменение базового стиля определяет общий визуальный язык карты. Например:
Источники добавляются через панель Sources. При подключении vector tiles задаётся tileset ID или URL.
Пример логической структуры источника:
После добавления источник становится доступен для всех слоёв стиля.
Каждый слой имеет две группы свойств:
Определяют структуру отображения:
visibility)Определяют визуальные характеристики:
Фильтры ограничивают набор объектов, отображаемых в слое. Они используют выражения Mapbox Expression Syntax.
Примеры логики фильтрации:
Фильтрация позволяет разделять один источник на множество визуальных представлений без дублирования данных.
Mapbox Studio поддерживает выражения, которые позволяют динамически изменять стиль в зависимости от данных.
Основные категории выражений:
case, match)+, -, *,
/)interpolate)get)Пример логики:
Построение стиля в Studio всегда подчиняется принципу визуальной иерархии:
Нарушение этой последовательности приводит к визуальной перегрузке и снижению читаемости карты.
Каждый слой может иметь ограничения по zoom levels:
minzoom — минимальный масштаб отображенияmaxzoom — максимальный масштаб отображенияЭто позволяет изменять детализацию карты в зависимости от уровня приближения.
Примеры:
Sprites — набор иконок, используемых в symbol-слоях. Они хранятся в виде единого изображения и JSON-индекса.
Особенности:
Glyphs — набор шрифтов для текстовых слоёв.
Используются для:
Стили в Mapbox Studio могут экспортироваться в формате JSON и использоваться в Mapbox GL JS напрямую.
Структура экспортированного стиля включает:
Такой стиль подключается в коде через mapboxgl.Map, что
позволяет полностью синхронизировать визуальную модель Studio и
веб-приложения.
Каждый стиль имеет версионную структуру. Изменения сохраняются как новые версии, что позволяет:
Версионность играет ключевую роль в командной работе над картографическими проектами.
Производительность рендеринга зависит от структуры стиля:
Неэффективная структура стиля приводит к увеличению времени рендеринга и снижению плавности взаимодействия с картой.
Созданный в Studio стиль подключается в JavaScript следующим образом:
style в конфигурации картыsetStyleЭто создаёт связку между визуальным редактором и программной логикой приложения, где Studio отвечает за дизайн, а GL JS — за поведение карты в рантайме.