Vector source

Векторный источник в Mapbox GL JS представляет собой тип источника данных, который загружает тайлы в формате векторных тайлов и предоставляет доступ к геометрии и атрибутам объектов для последующей отрисовки на карте. В отличие от растровых тайлов, где изображение уже «запечено», векторные источники содержат структурированные данные, позволяя выполнять динамическую стилизацию на стороне клиента.

Векторный источник в Mapbox GL JS работает на основе концепции векторных тайлов — фрагментированных наборов геометрических данных, разбитых по координатной сетке и уровням масштабирования. Каждый тайл содержит набор слоёв данных (source layers), которые соответствуют логическим группам объектов.

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

  • данные передаются в бинарном формате (Mapbox Vector Tile, MVT)
  • каждый тайл содержит геометрию и свойства объектов
  • отрисовка происходит на клиенте в браузере
  • стили применяются динамически через стиль карты

Платформа Mapbox использует векторные тайлы как базовый формат для масштабируемой и производительной работы с геоданными.

Объявление векторного источника

Векторный источник задаётся в стиле карты через секцию sources:

map.addSource('cities', {
  type: 'vector',
  tiles: [
    'https://example.com/tiles/cities/{z}/{x}/{y}.pbf'
  ],
  minzoom: 0,
  maxzoom: 14
});

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

type

  • фиксированное значение "vector"
  • определяет тип источника данных

tiles

  • массив URL-шаблонов тайлов
  • поддерживает подстановки {z}, {x}, {y}

minzoom / maxzoom

  • ограничивают диапазон загрузки данных
  • помогают оптимизировать производительность

Source layers и логическая структура данных

Векторный источник не содержит единого слоя. Вместо этого он включает набор именованных source layers, определённых на этапе генерации тайлов.

Пример использования:

map.addLayer({
  id: 'cities-fill',
  type: 'fill',
  source: 'cities',
  'source-layer': 'urban_areas',
  paint: {
    'fill-color': '#3b82f6',
    'fill-opacity': 0.5
  }
});

Параметр:

source-layer

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

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

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

Пример фильтрации по атрибуту:

map.addLayer({
  id: 'cities-large',
  type: 'circle',
  source: 'cities',
  'source-layer': 'urban_areas',
  filter: ['>', 'population', 1000000],
  paint: {
    'circle-radius': 6,
    'circle-color': '#ef4444'
  }
});

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

  • сравнения (>, <, ==)
  • логические операторы (all, any, !)
  • работа с атрибутами (get)

Преимущества векторных источников

Использование vector sources даёт значительные преимущества по сравнению с растровыми:

Динамическая стилизация

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

Малый размер данных

Векторные тайлы обычно компактнее растровых изображений.

Чёткое масштабирование

Геометрия остаётся резкой при любом масштабе.

Гибкая фильтрация

Можно отображать только нужные объекты на клиенте.

Оптимизация загрузки

Для повышения производительности применяются следующие подходы:

Границы источника (bounds) Позволяют ограничить область данных:

map.addSource('roads', {
  type: 'vector',
  tiles: ['https://example.com/roads/{z}/{x}/{y}.pbf'],
  bounds: [-180, -85, 180, 85]
});

Схема тайлов (scheme) Определяет способ разбиения карты:

  • xyz — стандартная схема
  • tms — обратная схема Y-координаты

Минимизация source-layer использования Чем меньше source layers запрашивается, тем быстрее рендеринг.

Работа с несколькими слоями одного источника

Один vector source может использоваться множеством визуальных слоёв:

map.addLayer({
  id: 'roads-line',
  type: 'line',
  source: 'roads',
  'source-layer': 'transportation',
  paint: {
    'line-color': '#111827',
    'line-width': 2
  }
});

map.addLayer({
  id: 'roads-highlight',
  type: 'line',
  source: 'roads',
  'source-layer': 'transportation',
  filter: ['==', 'class', 'primary'],
  paint: {
    'line-color': '#f59e0b',
    'line-width': 3
  }
});

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

Динамическое управление данными

Векторные источники могут обновляться без перезагрузки карты:

map.getSource('cities').setTiles([
  'https://example.com/tiles/v2/{z}/{x}/{y}.pbf'
]);

Также возможно комбинирование с runtime-обновлением стилей:

  • изменение фильтров
  • обновление paint properties
  • переключение source-layer

Проблемы и ограничения

Несмотря на гибкость, vector sources имеют ограничения:

  • зависимость от качества генерации тайлов
  • невозможность загрузки «сырых» GeoJSON напрямую через type vector
  • необходимость согласования source-layer между данными и стилем
  • высокая нагрузка на CPU при сложных стилях и больших наборах данных

Использование feature-state

Хотя feature-state не является частью самого источника, он тесно связан с vector sources:

map.setFeatureState(
  { source: 'cities', sourceLayer: 'urban_areas', id: 123 },
  { selected: true }
);

В стилях:

'circle-color': [
  'case',
  ['boolean', ['feature-state', 'selected'], false],
  '#22c55e',
  '#3b82f6'
]

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

Связь с экосистемой тайлов

Vector sources являются частью более широкой архитектуры тайлового рендеринга, где:

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

Такая модель обеспечивает масштабируемость до миллионов объектов без потери интерактивности.

Оглавление