Типы источников

В Mapbox GL JS источники данных (sources) определяют, откуда и в каком формате карта получает географическую информацию. Архитектура источников построена вокруг концепции разделения данных и их визуализации: источник описывает данные, слой (layer) отвечает за их отображение. Такое разделение позволяет гибко комбинировать разные типы данных в одной сцене, оптимизировать загрузку и управлять производительностью.

Каждый источник в стиле описывается как объект с уникальным идентификатором и типом:

{
  "id": "my-source",
  "type": "geojson",
  "data": "https://example.com/data.geojson"
}

Ключевые характеристики:

  • id — уникальный идентификатор источника
  • type — тип данных (geojson, vector, raster и т.д.)
  • data / url / tiles — способ получения данных
  • minzoom / maxzoom — ограничения по зуму
  • дополнительные параметры, зависящие от типа источника

Источники объявляются внутри map.addSource() или в JSON-стиле карты.

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

GeoJSON источник

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

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

  • Поддержка точек, линий и полигонов
  • Возможность динамического обновления данных
  • Поддержка кластеризации
map.addSource('points', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [66.9237, 48.0196]
        },
        properties: {
          name: 'Example point'
        }
      }
    ]
  }
});

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

GeoJSON источник поддерживает кластеризацию, что особенно важно для больших наборов точек:

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

Кластеризация снижает нагрузку на рендеринг и улучшает производительность при работе с тысячами объектов.

Vector источник

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

Пример:

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

или через шаблон тайлов:

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

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

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

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

Raster источник

Raster sources представляют собой растровые тайлы — готовые изображения карты.

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

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

  • Данные уже отрендерены на сервере
  • Нельзя изменять отдельные объекты
  • Высокая совместимость с внешними картографическими сервисами

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

Raster DEM (цифровая модель рельефа)

Raster DEM (Digital Elevation Model) используется для отображения высот и построения 3D-террейна.

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

Применение:

  • 3D рельеф
  • теневые эффекты (hillshade)
  • анализ высот

Пример включения террейна:

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

Image источник

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

map.addSource('overlay', {
  type: 'image',
  url: '/images/overlay.png',
  coordinates: [
    [66.9, 48.1],
    [67.2, 48.1],
    [67.2, 47.8],
    [66.9, 47.8]
  ]
});

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

  • Привязка изображения к четырём координатам
  • Подходит для исторических карт, схем, визуальных слоёв
  • Не поддерживает тайлинг

Video источник

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

map.addSource('drone-video', {
  type: 'video',
  urls: [
    'https://example.com/video.mp4',
    'https://example.com/video.webm'
  ],
  coordinates: [
    [66.9, 48.1],
    [67.2, 48.1],
    [67.2, 47.8],
    [66.9, 47.8]
  ]
});

Применение:

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

Canvas источник

Canvas source позволяет использовать HTML5 canvas как динамический источник данных.

map.addSource('animated-canvas', {
  type: 'canvas',
  canvas: 'myCanvasId',
  animate: true,
  coordinates: [
    [66.9, 48.1],
    [67.2, 48.1],
    [67.2, 47.8],
    [66.9, 47.8]
  ]
});

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

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

Сравнение типов источников

GeoJSON

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

Vector

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

Raster

  • простота
  • отсутствие интерактивности объектов
  • быстрый старт

Raster DEM

  • 3D рельеф
  • вычисления высот

Image

  • фиксированное наложение
  • ограниченная интерактивность

Video

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

Canvas

  • полная динамика
  • ручной контроль отрисовки

Обновление источников данных

GeoJSON-источники могут обновляться динамически:

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

source.setData({
  type: 'FeatureCollection',
  features: []
});

Для vector и raster источников данные обновляются через изменение стиля или тайлового URL.

Производительность и выбор источника

Архитектура источников напрямую влияет на производительность:

  • Vector tiles предпочтительны для больших слоёв данных
  • GeoJSON подходит для средних и динамических наборов
  • Raster используется для фоновых слоёв
  • Canvas и Video требуют осторожного применения из-за нагрузки на GPU

Взаимодействие источников и слоёв

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

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

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

Оглавление