Использование studio стилей

Понятие стилевой модели Mapbox Studio

В основе визуализации карт в Mapbox GL JS лежит концепция стилей, определяющих внешний вид карты: цвета, слои, шрифты, иконки, прозрачность и поведение данных при масштабировании. Эти стили создаются и редактируются в Mapbox Studio и затем используются в клиентских приложениях через Mapbox GL JS.

Стиль в Mapbox представляет собой JSON-документ, описывающий:

  • источники данных (sources)
  • слои (layers)
  • типы визуализации (paint и layout свойства)
  • правила отображения на разных уровнях масштаба

Mapbox Studio выступает как визуальный редактор, а Mapbox GL JS — как движок рендеринга этих стилей в браузере.

Архитектура стилевого JSON

Стиль Mapbox GL JS базируется на спецификации Style Specification. Основные компоненты:

sources Определяют источники геоданных:

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

Поддерживаемые типы:

  • vector — векторные тайлы
  • raster — растровые тайлы
  • geojson — локальные или удалённые GeoJSON-данные
  • image — изображения

layers Каждый слой описывает способ отображения данных:

{
  "id": "water",
  "type": "fill",
  "source": "mapbox-streets",
  "source-layer": "water",
  "paint": {
    "fill-color": "#2c7fb8"
  }
}

Тип слоя определяет рендеринг:

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

Использование Studio стилей в Mapbox GL JS

Подключение стиля осуществляется через параметр style при инициализации карты:

import mapboxgl from "mapbox-gl";

mapboxgl.accessToken = "YOUR_TOKEN";

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  center: [37.6173, 55.7558],
  zoom: 10
});

Значение style может быть:

  • URL стиля из Mapbox Studio
  • JSON-объект стиля
  • локальный файл стиля

Стандартные стили Mapbox Studio

Mapbox предоставляет набор готовых стилей, созданных в Mapbox Studio:

  • mapbox/streets-v12 — универсальный стиль улиц
  • mapbox/outdoors-v12 — стиль для активного отдыха
  • mapbox/light-v11 — светлая минималистичная карта
  • mapbox/dark-v11 — тёмная тема
  • mapbox/satellite-v9 — спутниковые изображения
  • mapbox/satellite-streets-v12 — гибрид спутника и улиц
  • mapbox/navigation-day-v1 — навигационный дневной стиль
  • mapbox/navigation-night-v1 — навигационный ночной стиль

Эти стили можно использовать как есть или клонировать в Mapbox Studio для кастомизации.

Редактирование стилей в Mapbox Studio

Mapbox Studio позволяет модифицировать визуальные параметры без ручного редактирования JSON.

Основные возможности:

  • изменение цветовой схемы карты
  • управление видимостью слоёв
  • настройка шрифтов и подписей
  • добавление кастомных данных
  • управление уровнями масштабирования слоёв
  • настройка переходов (transition)

Каждое изменение в интерфейсе Studio отражается в JSON-стиле, который затем используется Mapbox GL JS.

Динамическое изменение стиля в Mapbox GL JS

Стиль можно менять во время работы карты:

map.setStyle("mapbox://styles/mapbox/dark-v11");

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

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

Для сохранения состояния используют событие style.load:

map.on("style.load", () => {
  map.addSource("points", {
    type: "geojson",
    data: "/data/points.geojson"
  });

  map.addLayer({
    id: "points-layer",
    type: "circle",
    source: "points",
    paint: {
      "circle-radius": 6,
      "circle-color": "#ff0000"
    }
  });
});

Кастомизация слоёв Studio стиля через API

Даже если стиль создан в Mapbox Studio, его можно модифицировать программно.

Изменение цвета слоя:

map.setPaintProperty("water", "fill-color", "#1e90ff");

Изменение прозрачности:

map.setPaintProperty("water", "fill-opacity", 0.5);

Изменение текста:

map.setLayoutProperty("place-label", "text-field", ["get", "name_en"]);

Использование кастомных Studio стилей

Кастомный стиль создаётся в Mapbox Studio и экспортируется как URL:

mapbox://styles/username/styleid

В Mapbox GL JS он используется так же, как стандартный стиль:

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/username/ckexample123456"
});

Особенности кастомных стилей:

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

Слои и порядок рендеринга в Studio стилях

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

  • нижние слои — фон, вода, рельеф
  • средние — дороги, здания
  • верхние — подписи, POI

Mapbox GL JS рендерит слои строго сверху вниз по порядку массива layers.

Изменение порядка влияет на читаемость карты и приоритет отображения объектов.

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

Слои могут содержать фильтры:

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

Возможные операторы:

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

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

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

Mapbox Studio стили поддерживают интерполяцию значений:

"circle-radius": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 2,
  10, 6,
  15, 12
]

Это позволяет изменять визуализацию в зависимости от zoom-уровня:

  • увеличение размера объектов при приближении
  • изменение прозрачности
  • смена цветов
  • появление подписей

Использование выражений в Studio стилях

Expressions позволяют строить динамическую логику:

"fill-color": [
  "match",
  ["get", "type"],
  "park", "#00ff00",
  "water", "#0000ff",
  "#cccccc"
]

Основные категории выражений:

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

Интеграция Studio стилей с пользовательскими данными

Mapbox GL JS позволяет добавлять собственные источники поверх Studio стиля:

map.addSource("custom-data", {
  type: "geojson",
  data: "/data/custom.geojson"
});

map.addLayer({
  id: "custom-layer",
  type: "circle",
  source: "custom-data",
  paint: {
    "circle-color": "#ff6600"
  }
});

Такие слои могут:

  • дополнять Studio стиль
  • перекрывать стандартные слои
  • использовать те же правила визуализации

Версионирование и обновление стилей

Каждый стиль в Mapbox Studio имеет версию. При обновлении:

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

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

Оптимизация Studio стилей

Эффективность рендеринга зависит от структуры стиля:

  • минимизация количества слоёв
  • использование source-layer вместо дублирования источников
  • ограничение сложных expressions
  • оптимизация фильтров
  • использование zoom-ограничений слоёв

Избыточная сложность стиля напрямую влияет на производительность WebGL-рендерера Mapbox GL JS.

Оглавление