Типы источников данных

Векторные источники являются основой большинства интерактивных карт в MapLibre GL JS. Они представляют геоданные в виде геометрий (точек, линий, полигонов), которые загружаются в виде тайлов и рендерятся на стороне клиента с использованием WebGL. Такой подход обеспечивает высокую производительность и гибкость стилизации.

Векторный источник подключается через тип vector и обычно ссылается на TileJSON или URL шаблон тайлов:

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

Ключевое свойство tiles задаёт шаблон адресов для загрузки PBF-файлов. Альтернативой может выступать url, указывающий на TileJSON-документ:

map.addSource('streets', {
  type: 'vector',
  url: 'https://example.com/tiles.json'
});

Векторные источники поддерживают несколько важных параметров оптимизации:

  • minzoom и maxzoom — ограничивают диапазон отображения источника
  • bounds — географические границы данных
  • scheme — схема нумерации тайлов (xyz или tms)
  • promoteId — выбор поля как уникального идентификатора фич
  • volatile — принудительное обновление данных при каждом кадре (редко используется)

Главное преимущество векторных данных заключается в возможности динамической стилизации: один и тот же источник может быть отрисован множеством слоёв с разными визуальными правилами.

GeoJSON источники

GeoJSON-источники предназначены для работы с объектами, загружаемыми и обрабатываемыми непосредственно в браузере. Они удобны для небольших и средних наборов данных, а также для динамически изменяемой информации.

map.addSource('points', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [71.4304, 51.1281]
        },
        properties: {
          title: 'Объект'
        }
      }
    ]
  }
});

Источник geojson поддерживает загрузку данных как напрямую, так и через URL:

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

Особенность GeoJSON источников — возможность динамического обновления данных:

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

Это делает их удобными для отображения изменяющихся наборов данных: трекинга объектов, пользовательских событий, результатов фильтрации.

Дополнительные возможности:

  • кластеризация точек (cluster: true)
  • настройка радиуса кластеров (clusterRadius)
  • лимит отображаемых точек (clusterMaxZoom)
  • генерация идентификаторов (generateId)

Пример кластеризации:

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

Растровые источники

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

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

Растровые данные не содержат геометрической структуры объектов — они представляют собой пиксельные изображения. Основная задача источника — обеспечить корректную подгрузку и тайлинг изображений.

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

  • tileSize — размер тайла (обычно 256 или 512)
  • bounds — ограничение области отображения
  • minzoom / maxzoom — управление уровнем детализации

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

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

Raster DEM источники применяются для работы с данными высот, используемыми для построения 3D-рельефа.

map.addSource('terrain', {
  type: 'raster-dem',
  tiles: [
    'https://example.com/dem/{z}/{x}/{y}.png'
  ],
  tileSize: 512,
  encoding: 'mapbox'
});

Параметр encoding определяет формат кодирования высотных данных. Наиболее распространённый вариант — mapbox, использующий закодированные значения RGB для представления высоты.

Raster DEM активно используется в сочетании с настройкой рельефа карты:

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

Это позволяет формировать трёхмерные сцены с визуализацией гор, долин и других форм рельефа.

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

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

map.addSource('overlay', {
  type: 'image',
  url: '/images/overlay.png',
  coordinates: [
    [71.0, 51.2],
    [71.5, 51.2],
    [71.5, 50.8],
    [71.0, 50.8]
  ]
});

Четыре координаты задают границы изображения по углам, позволяя точно позиционировать его на карте.

ImageSource поддерживает динамическое обновление:

const source = map.getSource('overlay');
source.updateImage({
  url: '/images/new-overlay.png',
  coordinates: [...]
});

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

VideoSource используется для наложения видеопотока на карту в пределах заданной географической области. Это может применяться для визуализации наблюдений, симуляций или временных данных.

map.addSource('video', {
  type: 'video',
  urls: [
    'https://example.com/video.mp4'
  ],
  coordinates: [
    [71.0, 51.2],
    [71.5, 51.2],
    [71.5, 50.8],
    [71.0, 50.8]
  ]
});

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

Canvas-источники

CanvasSource позволяет использовать HTML5 <canvas> как динамический источник данных. Он полезен для генерации визуализаций в реальном времени: тепловых карт, симуляций, графиков.

map.addSource('dynamic', {
  type: 'canvas',
  canvas: 'myCanvasId',
  animate: true,
  coordinates: [
    [71.0, 51.2],
    [71.5, 51.2],
    [71.5, 50.8],
    [71.0, 50.8]
  ]
});

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

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

Общие механизмы управления источниками

Все типы источников в MapLibre GL JS объединены единым жизненным циклом:

  • добавление через map.addSource
  • получение через map.getSource
  • удаление через map.removeSource

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

map.removeSource('streets');

Обновление данных зависит от типа источника: GeoJSON поддерживает setData, Image и Video — методы обновления содержимого, векторные и растровые источники обновляются через изменение URL или пересоздание тайлов.

Источники являются фундаментальным уровнем архитектуры MapLibre GL JS, определяя способ получения и обработки пространственных данных перед их визуализацией слоями.

Оглавление