Типы слоев

В Mapbox GL JS слой (layer) представляет собой визуальный уровень, который описывает, как географические данные из источника (source) должны быть отрисованы на карте. Каждый слой привязан к одному источнику данных или к данным стиля и управляет их отображением через набор свойств paint и layout.

Архитектура слоёв основана на декларативной модели: слой описывает правила рендеринга, а движок Mapbox GL самостоятельно оптимизирует отрисовку в WebGL.

Fill layer (заливка полигонов)

Тип fill используется для отображения площадных объектов: земельных участков, административных границ, водоёмов.

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

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

Основные свойства:

  • fill-color — цвет заливки
  • fill-opacity — прозрачность
  • fill-outline-color — цвет контура

Пример:

map.addLayer({
  id: 'landuse',
  type: 'fill',
  source: 'landuse-source',
  paint: {
    'fill-color': '#2ecc71',
    'fill-opacity': 0.5
  }
});

Line layer (линейные объекты)

Тип line применяется для отображения линейных геометрий: дорог, маршрутов, границ, рек.

Характерные возможности:

  • переменная толщина линии
  • пунктирные стили
  • плавные кривые и интерполяция
  • динамическое масштабирование ширины

Основные свойства:

  • line-color
  • line-width
  • line-opacity
  • line-dasharray
  • line-join и line-cap

Пример:

map.addLayer({
  id: 'roads',
  type: 'line',
  source: 'roads-source',
  paint: {
    'line-color': '#3498db',
    'line-width': 3
  }
});

Symbol layer (символы и подписи)

Тип symbol объединяет текстовые подписи и иконки. Это наиболее сложный слой, так как он использует систему размещения (placement engine), предотвращающую пересечения.

Возможности:

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

Основные свойства:

  • text-field
  • text-size
  • text-font
  • icon-image
  • icon-size
  • text-allow-overlap

Пример:

map.addLayer({
  id: 'cities',
  type: 'symbol',
  source: 'cities-source',
  layout: {
    'text-field': ['get', 'name'],
    'text-size': 14,
    'icon-image': 'marker-15'
  }
});

Circle layer (точечные данные)

Тип circle предназначен для визуализации точек без использования изображений.

Применяется для:

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

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

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

Основные свойства:

  • circle-radius
  • circle-color
  • circle-stroke-color
  • circle-opacity

Пример:

map.addLayer({
  id: 'earthquakes',
  type: 'circle',
  source: 'earthquakes-source',
  paint: {
    'circle-radius': 6,
    'circle-color': '#e74c3c'
  }
});

Heatmap layer (тепловые карты)

Тип heatmap используется для визуализации плотности точек.

Механика основана на интерполяции влияния каждой точки на соседние области.

Ключевые параметры:

  • радиус влияния
  • интенсивность
  • вес точки
  • цветовая шкала

Основные свойства:

  • heatmap-weight
  • heatmap-intensity
  • heatmap-radius
  • heatmap-color

Пример:

map.addLayer({
  id: 'heat',
  type: 'heatmap',
  source: 'points-source',
  paint: {
    'heatmap-radius': 20,
    'heatmap-intensity': 1
  }
});

Fill-extrusion layer (3D здания и объёмы)

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

Применяется для:

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

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

  • поддержка высоты
  • псевдо-3D в WebGL
  • управление освещением

Основные свойства:

  • fill-extrusion-height
  • fill-extrusion-base
  • fill-extrusion-color
  • fill-extrusion-opacity

Пример:

map.addLayer({
  id: 'buildings',
  type: 'fill-extrusion',
  source: 'buildings-source',
  paint: {
    'fill-extrusion-height': ['get', 'height'],
    'fill-extrusion-color': '#888',
    'fill-extrusion-opacity': 0.8
  }
});

Raster layer (растровые тайлы)

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

Характеристики:

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

Основные свойства:

  • raster-opacity
  • raster-brightness-min
  • raster-brightness-max

Пример:

map.addLayer({
  id: 'satellite',
  type: 'raster',
  source: 'satellite-source'
});

Hillshade layer (рельеф)

Тип hillshade визуализирует рельеф местности на основе данных высот (DEM).

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

  • анализа ландшафта
  • навигации
  • географической аналитики

Ключевые параметры:

  • угол источника света
  • интенсивность тени
  • высотная чувствительность

Основные свойства:

  • hillshade-exaggeration
  • hillshade-shadow-color
  • hillshade-highlight-color

Background layer (фон карты)

Тип background задаёт базовый фон карты.

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

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

Основные свойства:

  • background-color
  • background-opacity

Пример:

map.addLayer({
  id: 'bg',
  type: 'background',
  paint: {
    'background-color': '#1e1e1e'
  }
});

Sky layer (небо и атмосфера)

Тип sky используется для создания атмосферного окружения в 3D-сценах.

Возможности:

  • градиенты неба
  • имитация горизонта
  • поддержка освещения сцены

Основные свойства:

  • sky-type
  • sky-atmosphere-color
  • sky-opacity

Custom layer (пользовательские слои)

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

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

  • сложных визуализаций
  • интеграции 3D-движков
  • нестандартных рендеров

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

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

Порядок отрисовки и стек слоёв

Слои в Mapbox GL JS формируют стек, где порядок добавления определяет визуальное наложение.

Принципы:

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

Пример управления порядком:

map.moveLayer('roads', 'labels');

Условная стилизация слоёв

Все типы слоёв поддерживают выражения, позволяющие изменять визуализацию на основе данных.

Примеры:

  • изменение цвета по атрибуту
  • масштабирование толщины линии
  • динамическая прозрачность
'circle-color': [
  'case',
  ['>', ['get', 'mag'], 5],
  '#ff0000',
  '#00ff00'
]
Оглавление