Концепция слоев в Mapbox

Визуальная модель в Mapbox GL JS построена вокруг строгого разделения данных и их отображения. Центральным элементом этой модели выступают слои (layers), которые определяют, как геоданные превращаются в визуальные примитивы на карте.

Архитектура слоёв тесно связана с понятием стиля карты. Стиль представляет собой набор источников данных (sources) и слоёв, где каждый слой отвечает за конкретный способ визуализации данных из одного или нескольких источников.

Базовая модель слоя

Каждый слой в Mapbox GL JS представляет собой объект с набором свойств:

  • идентификатор слоя (id)
  • тип визуализации (type)
  • источник данных (source)
  • параметры отображения (layout и paint)
  • фильтры (filter)
  • ограничения по масштабу (minzoom, maxzoom)

Слой не содержит геоданных напрямую. Он лишь интерпретирует данные из источника.

Ключевой принцип: слой = правила отображения данных, а не сами данные.

Источники данных и их связь со слоями

Источник (source) определяет, откуда берутся геометрии. Один источник может использоваться несколькими слоями одновременно.

Основные типы источников:

  • vector — векторные тайлы
  • raster — растровые тайлы
  • geojson — локальные GeoJSON-данные
  • image — одиночные изображения
  • video — видеопотоки

Связь слоя с источником задаётся через свойство source:

map.addSource('cities', {
  type: 'geojson',
  data: '/data/cities.geojson'
});

map.addLayer({
  id: 'cities-layer',
  type: 'circle',
  source: 'cities'
});

Разделение источников и слоёв позволяет переиспользовать данные с разными стилями отображения.

Типы слоёв

Слои в Mapbox GL JS строго типизированы. Каждый тип соответствует определённой визуальной примитивной модели.

background

Фоновый слой. Отображает цвет или градиент под всей картой.

{
  id: 'background',
  type: 'background',
  paint: {
    'background-color': '#1a1a1a'
  }
}

fill

Используется для полигонов. Основной тип для отображения областей.

{
  id: 'countries-fill',
  type: 'fill',
  source: 'countries',
  paint: {
    'fill-color': '#3bb2d0',
    'fill-opacity': 0.6
  }
}

line

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

{
  id: 'roads',
  type: 'line',
  source: 'roads',
  paint: {
    'line-color': '#ff8800',
    'line-width': 2
  }
}

circle

Точечные данные в виде окружностей.

{
  id: 'points',
  type: 'circle',
  source: 'places',
  paint: {
    'circle-radius': 6,
    'circle-color': '#ff0000'
  }
}

symbol

Комбинированные слои для текста и иконок. Используются для подписей объектов.

{
  id: 'labels',
  type: 'symbol',
  source: 'places',
  layout: {
    'text-field': ['get', 'name'],
    'text-size': 12
  }
}

raster

Отображение растровых тайлов (например, спутниковые снимки).

{
  id: 'satellite',
  type: 'raster',
  source: 'satellite-source'
}

fill-extrusion

3D-экструзия полигонов, часто используется для зданий.

{
  id: 'buildings-3d',
  type: 'fill-extrusion',
  source: 'buildings',
  paint: {
    'fill-extrusion-height': ['get', 'height'],
    'fill-extrusion-color': '#aaa'
  }
}

heatmap

Визуализация плотности точек.

{
  id: 'heat',
  type: 'heatmap',
  source: 'earthquakes',
  paint: {
    'heatmap-intensity': 1,
    'heatmap-color': [
      'interpolate',
      ['linear'],
      ['heatmap-density'],
      0, 'blue',
      1, 'red'
    ]
  }
}

Порядок слоёв и композиция

Слои в стиле представляют собой упорядоченный стек. Порядок определяет перекрытие визуальных элементов.

Слой, добавленный позже, отображается выше предыдущих.

map.addLayer(layerA);
map.addLayer(layerB); // layerB выше layerA

Контроль порядка возможен через параметр beforeId:

map.addLayer(newLayer, 'existing-layer-id');

Это позволяет точно управлять визуальной иерархией.

Layout и Paint: разделение ответственности

Каждый слой разделяется на две группы свойств:

layout

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

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

Пример:

layout: {
  visibility: 'visible',
  'text-field': ['get', 'name']
}

paint

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

  • цвета
  • прозрачность
  • ширина линий
  • радиусы точек
  • градиенты
paint: {
  'line-color': '#00ff00',
  'line-width': 3
}

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

Фильтры ограничивают отображаемые объекты внутри слоя без изменения источника.

filter: ['==', ['get', 'type'], 'park']

Фильтры поддерживают логические операторы:

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

Пример сложного фильтра:

filter: [
  'all',
  ['==', ['get', 'status'], 'active'],
  ['>', ['get', 'population'], 100000]
]

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

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

Пример зависимости цвета от свойства:

'circle-color': [
  'interpolate',
  ['linear'],
  ['get', 'value'],
  0, '#2DC4B2',
  100, '#F7455D'
]

Данные могут напрямую управлять визуальными параметрами, что формирует data-driven styling.

Масштабозависимость слоёв

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

minzoom: 5,
maxzoom: 12

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

'line-width': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 1,
  10, 4
]

Управление видимостью

Слой может быть скрыт без удаления:

layout: {
  visibility: 'none'
}

Переключение состояния:

map.setLayoutProperty('layer-id', 'visibility', 'visible');

Идентификаторы слоёв и конфликты

Каждый слой обязан иметь уникальный id. Он используется для:

  • обновления свойств
  • изменения порядка
  • удаления слоя
  • привязки других слоёв
map.removeLayer('layer-id');

Ошибки в идентификаторах приводят к конфликтам при сборке стиля.

Смешивание слоёв и визуальная композиция

Слои не изолированы визуально. Они взаимодействуют через:

  • прозрачность (opacity)
  • порядок отрисовки
  • тип смешивания (compositing)

Пример наложения:

  • raster слой (фон)
  • fill слой (границы)
  • line слой (контуры)
  • symbol слой (подписи)

Такая структура формирует стандартную карту.

Пользовательские слои

Mapbox GL JS поддерживает кастомные слои через WebGL API.

const customLayer = {
  id: 'custom',
  type: 'custom',
  renderingMode: '3d',
  onAdd: function(map, gl) {
    // инициализация WebGL ресурсов
  },
  render: function(gl, matrix) {
    // отрисовка
  }
};

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

Связь слоёв с визуальной архитектурой карты

Слои формируют сцену, аналогичную графическому движку:

  • источники данных — модель сцены
  • слои — материалы и шейдеры
  • порядок слоёв — глубина (z-order)
  • выражения — параметры шейдеров

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

Оглавление