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

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

Векторные тайлы

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

Конфигурация векторного источника:

map.addSource('streets', {
  type: 'vector',
  url: 'mapbox://mapbox.mapbox-streets-v8'
});

или через шаблон URL:

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

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

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

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

  • url — идентификатор tileset или Mapbox URL
  • tiles — массив URL-шаблонов
  • minzoom, maxzoom — диапазон загрузки тайлов
  • bounds — ограничение географической области

Растровые тайлы

Растровые источники используют готовые изображения тайлов (PNG, JPG). Данные уже визуализированы на сервере и не требуют клиентской стилизации геометрии.

map.addSource('satellite', {
  type: 'raster',
  tiles: [
    'https://example.com/tiles/{z}/{x}/{y}.png'
  ],
  tileSize: 256
});

Характерные свойства:

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

Используется для спутниковых снимков, сканов, картинок и фотореалистичных подложек.

GeoJSON источники

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

map.addSource('points', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [69.5901, 42.3417]
        },
        properties: {
          name: 'Object A'
        }
      }
    ]
  }
});

Обновление данных выполняется через:

const source = map.getSource('points');
source.setData(newGeojson);

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

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

Кластеризация:

map.addSource('earthquakes', {
  type: 'geojson',
  data: '/data/earthquakes.geojson',
  cluster: true,
  clusterMaxZoom: 14,
  clusterRadius: 50
});

Изображения как источники

ImageSource позволяет накладывать одиночное изображение на географическую область.

map.addSource('overlay', {
  type: 'image',
  url: '/images/overlay.png',
  coordinates: [
    [69.0, 42.5],
    [70.0, 42.5],
    [70.0, 41.5],
    [69.0, 41.5]
  ]
});

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

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

Видеоисточники

VideoSource позволяет отображать видеопоток в пределах географической области.

map.addSource('drone', {
  type: 'video',
  urls: [
    'https://example.com/video.mp4'
  ],
  coordinates: [
    [69.0, 42.5],
    [70.0, 42.5],
    [70.0, 41.5],
    [69.0, 41.5]
  ]
});

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

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

Рельефные данные (Terrain)

Рельефный источник использует высотные данные в формате raster-dem.

map.addSource('terrain', {
  type: 'raster-dem',
  url: 'mapbox://mapbox.terrain-rgb',
  tileSize: 512,
  maxzoom: 14
});

Применение:

  • 3D-рельеф
  • визуализация высот
  • интеграция с наклонной камерой

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

map.setTerrain({ source: 'terrain', exaggeration: 1.5 });

Тайловые схемы и URL-шаблоны

Многие источники используют шаблоны {z}/{x}/{y} для подстановки координат тайлов:

https://example.com/tiles/{z}/{x}/{y}.pbf

Параметры:

  • z — уровень масштаба
  • x, y — координаты тайла

Также поддерживаются поддомены:

https://{a-d}.tiles.example.com/{z}/{x}/{y}.pbf

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

Mapbox Tilesets

Mapbox использует собственный формат идентификаторов:

mapbox://username.tileset-id

Он автоматически разрешается в набор векторных или растровых тайлов через инфраструктуру Mapbox CDN.

Преимущества:

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

Ограничение области данных

Источники могут быть ограничены географически:

map.addSource('restricted', {
  type: 'vector',
  url: 'mapbox://mapbox.mapbox-streets-v8',
  bounds: [68.0, 41.0, 71.0, 43.0]
});

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

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

Управление обновлением данных

GeoJSON-источники поддерживают динамическое обновление через API:

  • setData() — полная замена данных
  • перерисовка слоёв происходит автоматически
  • изменения отражаются без перезагрузки карты

Векторные и растровые источники обновляются через:

  • изменение стиля карты
  • смену URL источника
  • инвалидирование кеша тайлов

События источников

Mapbox GL JS предоставляет события жизненного цикла:

  • загрузка данных источника
  • отсутствие тайлов
  • ошибки сети

Пример:

map.on('sourcedata', (e) => {
  if (e.isSourceLoaded) {
    console.log('Source loaded');
  }
});

Производительность и кеширование

Источники данных тесно связаны с системой тайлового кеширования:

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

Оптимизация достигается через:

  • корректные minzoom и maxzoom
  • ограничение bounds
  • уменьшение размера GeoJSON
  • использование кластеризации

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

В расширенных сценариях могут использоваться пользовательские источники через протоколы или кастомные реализации.

Примеры:

  • подключение через mapbox://
  • прокси-серверы тайлов
  • генерация тайлов на лету
  • интеграция с собственными GIS-системами

Такие источники подчиняются стандарту TileJSON или совместимым схемам описания.

Связь источников и слоёв

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

  • source определяет данные
  • layer определяет визуализацию

Пример:

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

Разделение данных и визуализации позволяет:

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