Стилизация через YAML

В экосистеме HERE Maps визуальное представление карты отделено от геометрии и данных, что позволяет гибко управлять отображением слоёв через декларативные стилевые описания. YAML используется как человекочитаемый формат описания стиля, который затем интерпретируется рендерером карты и преобразуется в набор инструкций для отрисовки тайлов.

Ключевая идея YAML-стилизации заключается в описании не отдельных объектов карты, а правил отображения классов объектов на основе их атрибутов, масштаба и контекста отображения.

Архитектура стилевой модели

Система стилизации в HERE Maps строится на нескольких уровнях абстракции:

1. Источник данных

  • векторные тайлы (vector tiles)
  • тематические слои (roads, buildings, water, landuse)
  • атрибуты объектов (class, kind, zoom_level, population, importance)

2. Стилевой слой

  • YAML-описание правил отображения
  • декларативные фильтры
  • параметры визуализации (цвет, толщина, прозрачность)

3. Рендеринг

  • преобразование YAML в внутренний стиль движка
  • оптимизация под текущий уровень масштабирования
  • генерация WebGL инструкций

Структура YAML-стиля

YAML-стиль в HERE Maps организуется как дерево конфигурации, включающее глобальные параметры, источники данных и набор слоёв.

style:
  version: 2
  name: base-map-style

sources:
  omv:
    type: MVT
    url: https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv

layers: []

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

Глобальная секция определяет базовое поведение стиля:

  • версия спецификации
  • имя стиля
  • глобальные переменные (цветовые палитры, шрифты)
  • масштабные ограничения
global:
  fonts:
    regular: "Roboto"
  colors:
    water: "#a0c8f0"
    road: "#ffffff"

Источники данных (sources)

Источники определяют, откуда поступают географические данные. В HERE Maps чаще всего используется формат MVT (Mapbox Vector Tile).

sources:
  base:
    type: MVT
    url: https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv

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

  • параметризация по координатам тайла {z}/{x}/{y}
  • поддержка CDN-доставки
  • кэшируемость данных на уровне браузера

Слои (layers) как основа стилизации

Каждый слой представляет собой набор правил отрисовки объектов определённого типа.

layers:
  - id: water
    source: base
    source-layer: water
    type: polygon

Основные типы слоёв

Polygon

  • водоёмы
  • здания
  • парки

Line

  • дороги
  • границы
  • железнодорожные пути

Symbol

  • подписи
  • POI
  • маркеры

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

Фильтры позволяют определять, какие объекты попадут под действие стилевого правила.

layers:
  - id: major-roads
    type: line
    filter:
      kind: road
      class: primary

Логика фильтрации

Фильтры опираются на:

  • равенство атрибутов
  • диапазоны значений
  • логические операторы (AND, OR, NOT)
  • масштаб отображения

Пример масштабной зависимости:

filter:
  minZoom: 10
  maxZoom: 18

Визуальные свойства

Каждый слой содержит набор свойств, определяющих визуализацию геометрии.

Цветовые параметры

paint:
  fill-color: "#dceefc"
  line-color: "#2a5c82"

Геометрические параметры

paint:
  line-width: 2
  line-opacity: 0.8

Масштабозависимые значения

paint:
  line-width:
    stops:
      - zoom: 5
        value: 0.5
      - zoom: 15
        value: 3

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

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

Условные конструкции

paint:
  fill-color:
    case:
      - condition: { kind: park }
        value: "#b6e3a8"
      - condition: { kind: industrial }
        value: "#d0d0d0"
      - value: "#cccccc"

Интерполяция значений

paint:
  line-width:
    interpolate:
      - zoom: 8
        value: 1
      - zoom: 14
        value: 5

Работа с подписями (labels)

Текстовые слои являются отдельной категорией стилизации и требуют отдельной конфигурации.

layers:
  - id: road-labels
    type: symbol
    layout:
      text-field: "{name}"
      text-font: "Roboto Regular"
      text-size: 12

Управление размещением текста

layout:
  text-anchor: center
  text-offset: [0, 1]
  text-allow-overlap: false

Иерархия слоёв и порядок отрисовки

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

  • сначала отрисовываются фоны (land, water)
  • затем базовая инфраструктура (roads, railways)
  • поверх размещаются подписи и маркеры
layers:
  - id: background
  - id: landuse
  - id: roads
  - id: labels

Приоритет слоёв влияет на перекрытие объектов и читаемость карты.

Тематические стили

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

Светлая тема

theme: light
colors:
  background: "#ffffff"
  text: "#000000"

Тёмная тема

theme: dark
colors:
  background: "#1a1a1a"
  text: "#e6e6e6"

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

Интеграция с JavaScript API HERE Maps

YAML-стиль подключается к JavaScript API через конфигурацию карты.

const platform = new H.service.Platform({
  apikey: "API_KEY"
});

const map = new H.Map(document.getElementById("map"), null, {
  center: { lat: 52.52, lng: 13.405 },
  zoom: 12
});

const provider = platform.getOMVService().createProvider({
  layer: "base"
});

const layer = new H.map.layer.TileLayer(provider);

map.addLayer(layer);

Стиль YAML применяется на уровне провайдера данных, влияя на визуализацию всех тайлов.

Производительность и оптимизация стилей

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

Основные факторы оптимизации

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

Кэширование

  • повторное использование тайлов
  • предвычисление стилей
  • WebGL батчинг геометрии

Ошибки и особенности интерпретации YAML

В процессе обработки стилевых файлов возникают специфические ограничения:

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

Некорректные фильтры или неверные типы значений приводят к игнорированию слоя без явного сообщения об ошибке.

Управление масштабной логикой

Масштаб является ключевым параметром поведения стиля.

minzoom: 5
maxzoom: 20

Применение масштабных ограничений:

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

Композиция сложных стилей

Сложные карты строятся как композиция множества независимых YAML-блоков:

  • базовый слой (terrain, water)
  • транспортная сеть
  • административные границы
  • POI-слой
  • текстовые аннотации

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

Оглавление