Style specification

Style specification определяет внешний вид карты: какие источники данных используются, как они визуализируются, в каком порядке отрисовываются слои, какие шрифты и тайлы подключаются, а также параметры освещения, переходов и 3D-эффектов. В основе лежит совместимая со спецификацией Mapbox Style Spec версия 8, реализованная в MapLibre GL JS.

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

Общая структура style.json

Базовый объект стиля включает несколько обязательных и дополнительных полей:

{
  "version": 8,
  "name": "Custom Style",
  "sprite": "https://example.com/sprites/sprite",
  "glyphs": "https://example.com/fonts/{fontstack}/{range}.pbf",
  "sources": {},
  "layers": []
}

Ключевые поля

version

  • Всегда 8
  • Определяет версию спецификации стиля

name

  • Человекочитаемое название стиля

sprite

  • Базовый URL для иконок (sprite sheet)
  • Используется для символов (symbol layers)

glyphs

  • Шаблон URL для шрифтов
  • Поддерживает подстановки {fontstack} и {range}

sources

  • Источники данных (vector tiles, raster tiles, GeoJSON и др.)

layers

  • Массив слоёв визуализации
  • Определяет, как данные из sources отображаются

Sources: источники данных

Sources описывают, откуда берутся геоданные.

Vector source

"sources": {
  "openmaptiles": {
    "type": "vector",
    "url": "https://example.com/tiles.json"
  }
}

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

Raster source

"sources": {
  "satellite": {
    "type": "raster",
    "tiles": [
      "https://example.com/tiles/{z}/{x}/{y}.png"
    ],
    "tileSize": 256
  }
}

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

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

GeoJSON source

"sources": {
  "points": {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": []
    }
  }
}

Подходит для:

  • динамических данных
  • небольших наборов объектов
  • интерактивных слоёв

Layers: система визуализации

Layers — центральная часть style specification. Каждый слой связывает источник данных с конкретным способом отображения.

Общая структура слоя:

{
  "id": "road-layer",
  "type": "line",
  "source": "openmaptiles",
  "source-layer": "transportation",
  "paint": {},
  "layout": {}
}

Типы слоёв

fill

Используется для полигонов.

{
  "id": "landuse",
  "type": "fill",
  "source": "openmaptiles",
  "source-layer": "landuse",
  "paint": {
    "fill-color": "#d9d9d9",
    "fill-opacity": 0.6
  }
}

Применение:

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

line

Линейные объекты: дороги, границы, маршруты.

{
  "id": "roads",
  "type": "line",
  "source": "openmaptiles",
  "source-layer": "road",
  "paint": {
    "line-color": "#333",
    "line-width": 2
  }
}

symbol

Комбинированный слой для текста и иконок.

{
  "id": "labels",
  "type": "symbol",
  "source": "openmaptiles",
  "source-layer": "place",
  "layout": {
    "text-field": "{name}",
    "text-size": 12,
    "icon-image": "marker-15"
  }
}

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

  • требует glyphs
  • использует sprite для иконок
  • поддерживает collision detection (избежание наложений)

circle

Точечные данные в виде кругов.

{
  "id": "cities",
  "type": "circle",
  "source": "openmaptiles",
  "source-layer": "city",
  "paint": {
    "circle-radius": 6,
    "circle-color": "#ff0000"
  }
}

fill-extrusion

3D-экструзии зданий.

{
  "id": "buildings-3d",
  "type": "fill-extrusion",
  "source": "openmaptiles",
  "source-layer": "building",
  "paint": {
    "fill-extrusion-color": "#aaa",
    "fill-extrusion-height": ["get", "height"],
    "fill-extrusion-opacity": 0.9
  }
}

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

  • 3D зданий
  • визуализации высот

raster

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

{
  "id": "satellite-layer",
  "type": "raster",
  "source": "satellite",
  "paint": {
    "raster-opacity": 0.8
  }
}

background

Фоновый слой карты.

{
  "id": "background",
  "type": "background",
  "paint": {
    "background-color": "#f0f0f0"
  }
}

hillshade

Визуализация рельефа.

{
  "id": "terrain",
  "type": "hillshade",
  "source": "terrain-source",
  "paint": {
    "hillshade-shadow-color": "#000000"
  }
}

sky

Используется для 3D сцены и неба.

{
  "id": "sky",
  "type": "sky",
  "paint": {
    "sky-type": "atmosphere"
  }
}

Layout vs Paint

Каждый слой разделяется на два блока: layout и paint.

Layout properties

Определяют поведение и структуру:

  • порядок размещения
  • видимость
  • текстовые поля
  • иконки
  • выравнивание

Пример:

"layout": {
  "visibility": "visible",
  "text-field": "{name}",
  "text-size": 14
}

Paint properties

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

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

Пример:

"paint": {
  "line-color": "#ff0000",
  "line-width": 3,
  "line-opacity": 0.8
}

Выражения (Expressions)

Style specification поддерживает декларативные выражения, позволяющие вычислять значения динамически.

Пример интерполяции

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

Это означает:

  • при zoom 5 радиус 2
  • при zoom 10 радиус 10

Условные выражения

"line-color": [
  "case",
  ["==", ["get", "type"], "highway"],
  "#ff0000",
  "#000000"
]

Доступ к атрибутам

["get", "property_name"]

Слои и порядок отрисовки

Порядок слоёв в массиве layers критически важен: рендер выполняется сверху вниз.

Пример:

"layers": [
  "background",
  "landuse",
  "roads",
  "labels"
]

Каждый следующий слой рисуется поверх предыдущего.

Transition: анимации изменений

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

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

Применяется к paint-параметрам:

  • цветам
  • ширинам
  • прозрачности

Light: освещение сцены

Для 3D-слоёв доступна настройка света:

"light": {
  "anchor": "map",
  "color": "#ffffff",
  "intensity": 0.5
}

Используется вместе с fill-extrusion для реалистичных зданий.

Terrain: рельеф

Terrain позволяет подключать DEM-данные:

"terrain": {
  "source": "terrain-source",
  "exaggeration": 1.5
}

Filter в слоях

Фильтрация данных происходит на уровне слоя:

"filter": [
  "==",
  ["get", "class"],
  "primary"
]

Поддерживаются:

  • сравнения
  • логические операции
  • проверки свойств

Минимальный полный стиль

{
  "version": 8,
  "sources": {
    "osm": {
      "type": "vector",
      "url": "https://example.com/tiles.json"
    }
  },
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "#ffffff"
      }
    }
  ]
}

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

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

map.setStyle("https://example.com/style.json");

или частично:

map.setPaintProperty("roads", "line-color", "#00ff00");

или:

map.setLayoutProperty("labels", "visibility", "none");

Особенности интерпретации style specification

  • стиль загружается асинхронно
  • изменения применяются через diff-обновления
  • слои пересчитываются при zoom/pan
  • expressions вычисляются на GPU или CPU в зависимости от типа

Взаимодействие с WebGL пайплайном

Style specification транслируется в WebGL:

  • sources → vertex buffers
  • layers → shader programs
  • paint → uniform variables
  • layout → feature placement logic

Результат — полностью GPU-ускоренный рендеринг карт с динамической стилизацией без перерисовки DOM.

Оглавление