Видео-оверлеи

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

Основой работы с видео в Mapbox GL JS выступает источник данных:

map.addSource('video-source', {
  type: 'video',
  urls: [
    'https://example.com/video.mp4'
  ],
  coordinates: [
    [-122.51596391201019, 37.56238816766053],
    [-122.51467645168304, 37.56410183312965],
    [-122.51309394836426, 37.563391708549425],
    [-122.51423120498657, 37.56161849366671]
  ]
});

Ключевой параметр coordinates определяет четыре угловые точки видео на карте. Они задаются в порядке:

  • верхний левый угол
  • верхний правый угол
  • нижний правый угол
  • нижний левый угол

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

Добавление слоя отображения

После создания источника видео он визуализируется через слой типа raster:

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

Слой выполняет роль рендера, связывая видеопоток с WebGL-конвейером Mapbox. Видео интерпретируется как текстура, обновляемая на каждом кадре.

Управление воспроизведением

В отличие от стандартного HTML <video>, управление воспроизведением осуществляется через DOM-элемент, связанный с источником. Mapbox GL JS создаёт внутренний видеобуфер, но разработчик может получить доступ к элементу через getSource.

const videoSource = map.getSource('video-source');

const videoElement = videoSource.video;

videoElement.play();
videoElement.pause();
videoElement.currentTime = 10;
videoElement.playbackRate = 1.5;

При этом важно учитывать, что синхронизация с картой происходит автоматически: каждый новый кадр видео перерисовывается в текстуру WebGL.

Координатная трансформация видео

Видео не просто накладывается поверх карты, а трансформируется в соответствии с координатами четырёх углов. Mapbox GL JS выполняет матричное преобразование, сопоставляя:

  • пиксели видео (локальная система координат)
  • географические координаты (WGS84)

Таким образом формируется аффинное преобразование, позволяющее учитывать наклон, масштаб и поворот видеоплоскости.

При изменении координат источника:

videoSource.setCoordinates([
  [-122.52, 37.56],
  [-122.51, 37.56],
  [-122.51, 37.55],
  [-122.52, 37.55]
]);

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

Синхронизация с картой и тайминг

Видео в Mapbox GL JS не существует изолированно — оно привязано к циклу рендеринга карты. Это означает, что:

  • обновление кадра синхронизировано с WebGL render loop
  • панорамирование и масштабирование карты не прерывают воспроизведение
  • изменение pitch и bearing влияет на перспективное отображение видео

При высокой нагрузке возможно снижение FPS, поскольку видеотекстура конкурирует за GPU-ресурсы с тайлами карты.

Автовоспроизведение и ограничения браузеров

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

  • muted = true часто требуется для autoplay
  • playsInline = true особенно важно на мобильных устройствах
  • взаимодействие пользователя может быть обязательным для старта воспроизведения
videoElement.muted = true;
videoElement.playsInline = true;
videoElement.autoplay = true;
videoElement.play();

При нарушении этих правил источник остаётся в состоянии загрузки без отображения кадров.

Динамическое обновление источника

Видеоисточник может изменять как сам файл, так и геометрию отображения.

Замена видео

videoSource.setVideoURL('https://example.com/new-video.mp4');

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

Перерисовка при изменении сцены

При изменении положения камеры Mapbox GL JS автоматически пересчитывает проекцию:

  • zoom влияет на масштабирование видеоплоскости
  • pitch создаёт эффект перспективного наклона
  • bearing вращает видеоповерхность вместе с картой

Использование нескольких видеоисточников

Одновременное отображение нескольких видеослоёв возможно, но требует контроля порядка слоёв:

map.addLayer({
  id: 'video-layer-1',
  type: 'raster',
  source: 'video-source-1'
});

map.addLayer({
  id: 'video-layer-2',
  type: 'raster',
  source: 'video-source-2'
});

При наложении важно учитывать прозрачность и порядок отрисовки (layer order), поскольку WebGL рендерит слои последовательно.

Обработка событий видео

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

videoElement.addEventListener('play', () => {
  console.log('video playing');
});

videoElement.addEventListener('pause', () => {
  console.log('video paused');
});

videoElement.addEventListener('timeupdate', () => {
  console.log(videoElement.currentTime);
});

Эти события полезны для синхронизации внешних данных, например временных маркеров на карте.

Производительность и GPU-нагрузка

Видеослой является одним из наиболее ресурсоёмких типов рендеринга в Mapbox GL JS. Основные факторы нагрузки:

  • разрешение видео (HD/4K значительно увеличивает потребление GPU)
  • количество одновременно активных источников
  • частота обновления кадров
  • прозрачность и перекрытие слоёв

Оптимизация часто включает:

  • использование сжатых кодеков (H.264/VP9)
  • ограничение FPS видео
  • снижение разрешения при масштабировании

Ограничения геометрии и точности

Видео всегда интерпретируется как четырёхугольная плоскость. Это означает:

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

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

Практика интеграции с внешними данными

Видео часто используется совместно с GeoJSON-слоями:

map.addLayer({
  id: 'path-layer',
  type: 'line',
  source: {
    type: 'geojson',
    data: routeData
  }
});

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

Координатная точность и калибровка

При геопривязке видео важна точность исходных координат. Малейшее отклонение приводит к смещению изображения. Обычно применяется калибровка по контрольным точкам:

  • фиксированные ориентиры на местности
  • GPS-метки съёмки
  • сопоставление с ортофотопланами

Корректная настройка координат обеспечивает стабильное наложение без «плавания» видео при масштабировании карты.

Оглавление