Кастомизация стилей

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

Основой кастомизации выступает JSON-структура стиля, где ключевыми сущностями являются источники данных (sources) и слои (layers). Источники предоставляют географическую информацию, а слои интерпретируют её визуально через набор параметров.

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

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

Источники данных задаются как именованные сущности:

"sources": {
  "cities": {
    "type": "geojson",
    "data": "cities.geojson"
  }
}

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

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

Базовая кастомизация стилей

Кастомизация начинается с изменения свойств слоя. Каждый слой содержит два основных блока:

  • paint — визуальные свойства (цвет, прозрачность, толщина)
  • layout — структурные параметры (видимость, порядок, размещение текста)

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

{
  "id": "land",
  "type": "fill",
  "source": "countries",
  "paint": {
    "fill-color": "#2ecc71",
    "fill-opacity": 0.8
  }
}

Свойства paint поддерживают динамическое изменение при изменении масштаба, данных или условий.

Динамическая стилизация через выражения

Ключевым механизмом кастомизации выступают выражения (expressions). Они позволяют вычислять значения свойств на основе данных, масштаба и условий.

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

  • интерполяция (interpolate)
  • ступенчатая функция (step)
  • сопоставление (match)
  • условные конструкции (case)
  • доступ к свойствам данных (get)

Пример цветовой интерполяции по зуму:

"fill-color": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, "#fee8c8",
  10, "#fdbb84",
  15, "#e34a33"
]

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

Стилизация на основе данных

Data-driven styling позволяет изменять внешний вид объектов в зависимости от их атрибутов.

Пример:

"circle-radius": [
  "interpolate",
  ["linear"],
  ["get", "population"],
  1000, 2,
  1000000, 10
]

Здесь радиус точек зависит от значения поля population.

Также используется конструкция match:

"fill-color": [
  "match",
  ["get", "type"],
  "park", "#2ecc71",
  "water", "#3498db",
  "#cccccc"
]

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

Порядок слоёв определяет визуальную иерархию. Слои рисуются в порядке их расположения в массиве layers.

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

  • addLayer — добавление слоя
  • removeLayer — удаление
  • moveLayer — изменение позиции
map.addLayer({
  id: "roads",
  type: "line",
  source: "streets",
  paint: {
    "line-color": "#333",
    "line-width": 2
  }
});

Изменение стиля во время выполнения

Смена всего стиля осуществляется методом setStyle, который загружает новый JSON-стиль:

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

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

Кастомные темы и визуальные схемы

Создание тематических карт базируется на модификации базовых параметров:

  • цветовая палитра
  • контрастность
  • прозрачность слоёв
  • типографика
  • насыщенность данных

Светлая и тёмная темы реализуются через переключение набора значений paint:

"background-color": "#111111"

или

"background-color": "#ffffff"

Работа с текстом и шрифтами

Текстовые слои используют symbol тип и зависят от glyphs. Шрифты задаются через шаблоны:

"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"

Кастомизация текста включает:

  • размер шрифта (text-size)
  • начертание (text-font)
  • цвет (text-color)
  • обводку (text-halo-color)

Пример:

"text-field": ["get", "name"],
"text-size": 14,
"text-color": "#222"

Иконки и sprite-атлас

Иконки управляются через sprite-атлас, представляющий собой единый набор изображений.

"sprite": "mapbox://sprites/mapbox/streets-v11"

Кастомизация включает:

  • добавление собственных sprite-изображений
  • замена стандартных иконок
  • управление масштабированием через icon-size

Анимации и переходы

Переходы между значениями свойств задаются через transition:

"transition": {
  "duration": 300,
  "delay": 0
}

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

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

Фильтры определяют, какие объекты отображаются в слое:

"filter": ["==", ["get", "type"], "road"]

Поддерживаются логические операции:

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

Масштабно-зависимая стилизация

Zoom-based styling позволяет менять визуализацию в зависимости от уровня приближения карты:

"line-width": [
  "interpolate",
  ["linear"],
  ["zoom"],
  10, 1,
  18, 5
]

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

3D-экструзии и объёмная визуализация

Тип слоя fill-extrusion используется для создания объёмных объектов:

"fill-extrusion-height": ["get", "height"],
"fill-extrusion-color": "#aaa"

Такой подход применяется для визуализации зданий и рельефа.

Ресурсы и оптимизация стилей

Производительность стиля зависит от:

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

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

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

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

map.getSource("points").setData(newGeoJson);

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

Управление стилем через Mapbox Studio

В экосистеме Mapbox стили часто создаются в визуальном редакторе Mapbox Studio. Там формируются базовые шаблоны, которые затем модифицируются через API.

Редактор позволяет управлять:

  • слоями
  • цветами
  • источниками
  • подписями
  • иконками
  • композициями слоёв

Композиция сложных визуальных систем

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

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

Оглавление