Mapbox GL JS поддерживает несколько типов источников данных, среди которых ImageSource предназначен для наложения одиночного растрового изображения на карту с привязкой к географическим координатам. Этот тип источника применяется, когда необходимо геопривязанное изображение без тайловой структуры: исторические карты, схемы, результаты аэрофотосъёмки, погодные радары, пользовательские визуальные слои поверх базовой карты.
ImageSource реализует концепцию «одна картинка — одна геопривязка», где изображение растягивается между заданными координатами или четырьмя угловыми точками. В отличие от растровых тайловых источников, здесь отсутствует разбиение на плитки и масштабирование происходит как единого слоя.
Источник ImageSource создаётся через метод
map.addSource, где тип указывается как
"image". Основные параметры конфигурации включают URL
изображения и координаты его размещения.
Ключевые элементы:
url — адрес изображения (PNG, JPG, WEBP)coordinates — массив из четырёх угловых координатtype: "image"Пример логики конфигурации:
Такой порядок фиксирован и определяет географическую деформацию изображения.
Механизм координат в ImageSource основан на четырёхугольной проекции.
Каждая точка задаётся как [longitude, latitude].
Изображение интерполируется внутри этого четырёхугольника и
деформируется в соответствии с географией.
Ключевая особенность заключается в том, что ImageSource не использует проекцию в классическом картографическом смысле — он работает как текстурированный слой, наложенный на поверхность карты.
Это позволяет:
Процесс добавления источника состоит из двух этапов: регистрация источника и создание слоя для отображения.
Сначала создаётся источник:
"image"Затем создаётся слой типа "raster", который использует
этот источник.
Важный момент: ImageSource сам по себе не отображается, он является только источником данных. Отображение всегда осуществляется через слой.
ImageSource поддерживает динамическое обновление изображения без пересоздания источника. Это особенно важно для потоковых данных, таких как погодные радары или обновляемые карты.
Основной метод:
setImage(url) — заменяет текущее изображениеТакже возможно изменение геометрии:
setCoordinates(newCoordinates) — изменяет привязку
изображенияЭти операции позволяют:
После создания ImageSource он подключается к raster-layer:
type: "raster"source: "<id ImageSource>"Raster-слой обеспечивает рендеринг изображения с учётом прозрачности, масштабирования и поворота карты.
Взаимодействие слоя и источника строго разделено:
Такое разделение соответствует архитектуре Mapbox GL JS и позволяет переиспользовать один источник в нескольких слоях.
ImageSource автоматически адаптируется к изменению масштаба карты. Однако важно понимать, что изображение не имеет собственной внутренней системы масштабирования — оно деформируется вместе с географическими координатами.
При изменении зума:
Это делает ImageSource удобным для локальных областей, но менее подходящим для глобальных аналитических визуализаций.
ImageSource применяется в задачах, где требуется наложение статического или обновляемого изображения:
Особенно эффективно использование в системах мониторинга, где изображение обновляется регулярно и должно быть точно привязано к координатам.
Несмотря на универсальность, ImageSource имеет ряд ограничений:
Эти ограничения делают его специализированным инструментом, а не универсальным форматом визуализации.
Внутри Mapbox GL JS ImageSource преобразуется в текстуру WebGL. Изображение загружается в GPU-память и привязывается к координатной сетке слоя.
Процесс включает:
Благодаря этому достигается высокая производительность при минимальной CPU-нагрузке.
При изменении координат ImageSource происходит перерасчёт вершинной сетки. Каждый угол изображения пересчитывается в экранные координаты, после чего WebGL пересобирает треугольники, образующие поверхность.
Этот процесс позволяет:
ImageSource часто используется совместно с прозрачными PNG-изображениями. Это позволяет накладывать данные поверх базовой карты без полного перекрытия подложки.
Raster-слой поддерживает:
Таким образом создаются сложные композиции картографических данных.
Оптимизация работы с ImageSource включает несколько аспектов:
В высоконагруженных приложениях важно избегать постоянной перезагрузки текстур, так как WebGL операции являются дорогостоящими.
ImageSource часто используется как визуальный слой поверх данных из API:
В таких сценариях изображение выступает как финальный визуальный результат вычислений, а не как первичный источник данных.