Работа со встроенными стилями

Mapbox GL JS предоставляет набор предустановленных (built-in) стилей, основанных на векторных тайлах и описываемых через спецификацию Mapbox Style Specification. Эти стили представляют собой готовые визуальные конфигурации карты, включающие источники данных, слои, фильтры, слои символов и растровые тайлы, уже оптимизированные для различных сценариев отображения.

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

Архитектура встроенных стилей

Любой встроенный стиль Mapbox GL JS — это JSON-объект, доступный по URL вида:

mapbox://styles/mapbox/{style-id}

Внутри этот JSON включает:

  • описание источников данных (sources)
  • набор слоёв (layers)
  • правила отрисовки (paint properties)
  • правила компоновки (layout properties)
  • шрифты и спрайты (sprite, glyphs)
  • переходы и анимации (transition)

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

  1. Запрашивает JSON стиля
  2. Загружает векторные тайлы
  3. Строит граф слоёв рендеринга
  4. Применяет стили к WebGL контексту

Основные встроенные стили Mapbox

Streets

mapbox://styles/mapbox/streets-v11

Один из наиболее универсальных стилей, предназначенный для общего использования.

Особенности:

  • детализированная дорожная сеть
  • подписи улиц и объектов
  • POI (точки интереса)
  • сбалансированная визуальная иерархия

Используется в:

  • навигационных приложениях
  • городских сервисах
  • справочных картах

Outdoors

mapbox://styles/mapbox/outdoors-v11

Ориентирован на природные и туристические сценарии.

Особенности:

  • усиленный рельеф (hillshade)
  • тропы, маршруты, природные объекты
  • акцент на ландшафте
  • менее насыщенная городская детализация

Применяется в:

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

Light

mapbox://styles/mapbox/light-v10

Минималистичный светлый стиль.

Особенности:

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

Используется в:

  • бизнес-дашбордах
  • визуализации данных
  • геоаналитике

Dark

mapbox://styles/mapbox/dark-v10

Тёмная тема карты с высокой контрастностью.

Особенности:

  • тёмный фон снижает нагрузку на глаза
  • яркие акценты данных
  • подходит для ночных интерфейсов
  • хорошо выделяет поверхностные данные (heatmaps, точки)

Satellite

mapbox://styles/mapbox/satellite-v9

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

Особенности:

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

Satellite Streets

mapbox://styles/mapbox/satellite-streets-v11

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

Особенности:

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

Подключение встроенного стиля

Базовая инициализация карты с использованием встроенного стиля:

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [37.618423, 55.751244],
  zoom: 10
});

Ключевой параметр style определяет визуальную конфигурацию карты.

Динамическое переключение стилей

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

map.setStyle('mapbox://styles/mapbox/dark-v10');

После вызова setStyle:

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

Важный момент

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

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'
    }
  });
});

Структура style URL

Строка вида:

mapbox://styles/mapbox/streets-v11

распадается на:

  • mapbox://styles/ — протокол доступа к стилям
  • mapbox — namespace аккаунта
  • streets — идентификатор стиля
  • v11 — версия

Версионирование критично, так как изменения стиля могут повлиять на отображение слоёв.

Работа со слоями встроенных стилей

Встроенные стили содержат десятки и сотни слоёв. Каждый слой имеет:

  • id
  • type (fill, line, symbol, circle, raster, heatmap)
  • source
  • source-layer
  • paint
  • layout

Пример изменения слоя:

map.setPaintProperty('road-primary', 'line-color', '#ff0000');

Такой подход позволяет кастомизировать встроенный стиль без его полного переопределения.

Фильтрация объектов встроенного стиля

Можно управлять видимостью объектов через фильтры:

map.setFilter('poi-label', ['==', ['get', 'class'], 'park']);

Или скрыть слой:

map.setLayoutProperty('poi-label', 'visibility', 'none');

Использование стандартных слоёв Mapbox

Во встроенных стилях часто присутствуют стандартные слои:

  • water
  • landuse
  • road-*
  • building
  • poi
  • admin

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

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

При использовании встроенных стилей важно учитывать производительность:

1. Ограничение количества слоёв

Чрезмерное добавление кастомных слоёв поверх встроенного стиля увеличивает нагрузку на WebGL.

2. Использование фильтров вместо дублирования слоёв

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

3. Использование minzoom и maxzoom

{
  id: 'cities',
  type: 'symbol',
  source: 'places',
  minzoom: 5,
  maxzoom: 12
}

Переопределение встроенного стиля

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

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10'
});

map.on('load', () => {
  map.addLayer({
    id: 'custom-layer',
    type: 'circle',
    source: {
      type: 'geojson',
      data: '/data/points.geojson'
    },
    paint: {
      'circle-radius': 8,
      'circle-color': '#3366ff'
    }
  });
});

Работа с темами и переключением визуального режима

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

Пример переключения:

function setTheme(theme) {
  const styles = {
    light: 'mapbox://styles/mapbox/light-v10',
    dark: 'mapbox://styles/mapbox/dark-v10'
  };

  map.setStyle(styles[theme]);
}

Кеширование и загрузка встроенных стилей

Mapbox GL JS использует кеширование:

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

Однако при вызове setStyle кеш слоёв сбрасывается, так как структура рендера пересобирается.

Взаимодействие встроенных стилей с источниками данных

Встроенный стиль не ограничивает добавление пользовательских источников:

map.addSource('custom-data', {
  type: 'vector',
  url: 'mapbox://examples.8fgz4egr'
});

Далее можно интегрировать слой в существующую стилизацию.

Практика модификации встроенных слоёв

Изменение визуального стиля дорог:

map.setPaintProperty('road-street', 'line-color', '#00ffcc');
map.setPaintProperty('road-street', 'line-width', 2);

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

map.setPaintProperty('building', 'fill-opacity', 0.3);

Особенности версий встроенных стилей

Разные версии (v9, v10, v11) могут отличаться:

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

Обновление версии стиля требует проверки совместимости кастомных слоёв.

Роль встроенных стилей в архитектуре приложения

Встроенные стили выступают базовым визуальным слоем, на который накладывается бизнес-логика:

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

Они позволяют разделить:

  • визуальную основу (Mapbox style)
  • прикладную логику (custom layers)
  • данные (GeoJSON, vector sources)
Оглавление