ImageStatic для статических изображений

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

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

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

  • отображение одного изображения без разбиения на тайлы;
  • привязка изображения к заданному экстенту;
  • поддержка любых форматов изображений, поддерживаемых браузером;
  • возможность масштабирования и перемещения вместе с картой;
  • использование как самостоятельного слоя или поверх других слоёв.

Модуль располагается в пакете:

import Static from 'ol/source/ImageStatic.js';

Принцип работы

Для корректного отображения OpenLayers должен знать:

  1. Путь к изображению.
  2. Географический экстент, который занимает изображение.
  3. Проекцию изображения.

На основе этих данных библиотека вычисляет положение изображения на карте и выполняет его трансформацию при изменении масштаба или перемещении карты.

Схема работы выглядит следующим образом:

Изображение
      ↓
ImageStatic
      ↓
ImageLayer
      ↓
Map

Создание простого слоя ImageStatic

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

import Map from 'ol/Map.js';
import View from 'ol/View.js';

import ImageLayer from 'ol/layer/Image.js';
import Static from 'ol/source/ImageStatic.js';

const imageLayer = new ImageLayer({
    source: new Static({
        url: 'images/map.png',
        imageExtent: [
            -1000000,
            -1000000,
            1000000,
            1000000
        ]
    })
});

const map = new Map({
    target: 'map',
    layers: [imageLayer],
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

В данном примере:

  • файл map.png загружается целиком;
  • экстент определяет область размещения изображения;
  • изображение отображается как полноценный картографический слой.

Параметр imageExtent

Параметр imageExtent является обязательным.

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

Формат:

[minX, minY, maxX, maxY]

Пример:

imageExtent: [
    500000,
    6500000,
    600000,
    6600000
]

Расшифровка:

Значение Назначение
minX левая граница
minY нижняя граница
maxX правая граница
maxY верхняя граница

Если экстент указан неверно:

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

Использование проекции

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

Если изображение использует другую систему координат, необходимо явно указать параметр projection.

Пример:

const source = new Static({
    url: 'image.png',
    projection: 'EPSG:4326',
    imageExtent: [
        30,
        50,
        40,
        60
    ]
});

Здесь координаты экстента представлены в градусах широты и долготы.

ImageLayer и ImageStatic

Источник ImageStatic всегда используется через слой изображений.

Пример:

const layer = new ImageLayer({
    source: new Static({
        url: 'plan.png',
        imageExtent: extent
    })
});

Типичная структура:

ImageLayer
    └── ImageStatic

Слой отвечает за:

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

Источник отвечает исключительно за загрузку изображения.

Наложение изображения поверх базовой карты

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

import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

const baseLayer = new TileLayer({
    source: new OSM()
});

const imageLayer = new ImageLayer({
    opacity: 0.6,
    source: new Static({
        url: 'overlay.png',
        imageExtent: [
            3000000,
            7000000,
            3200000,
            7200000
        ]
    })
});

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

Управление прозрачностью

Поскольку источник отображается через слой, прозрачность задаётся на уровне слоя.

const imageLayer = new ImageLayer({
    opacity: 0.5,
    source: source
});

Диапазон значений:

0.0  // полностью прозрачен
0.5  // полупрозрачен
1.0  // полностью непрозрачен

Изменение прозрачности во время работы:

imageLayer.setOpacity(0.7);

Ограничение области просмотра

Часто карта должна отображать только область изображения.

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

const extent = [
    0,
    0,
    1024,
    768
];

const view = new View({
    extent: extent,
    center: [512, 384],
    zoom: 2
});

Пользователь не сможет переместиться за пределы изображения.

Использование изображения без географической привязки

OpenLayers позволяет работать не только с географическими картами.

Например, можно отображать:

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

Пример для плана помещения:

const extent = [
    0,
    0,
    2000,
    1500
];

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

Использование пользовательской проекции

Для схем и планов часто применяется локальная проекция.

Пример:

import Projection from 'ol/proj/Projection.js';

const projection = new Projection({
    code: 'floor-plan',
    units: 'pixels',
    extent: [0, 0, 2000, 1500]
});

Создание источника:

const source = new Static({
    url: 'floor.png',
    projection: projection,
    imageExtent: projection.getExtent()
});

Теперь карта работает в пиксельных координатах изображения.

Автоматическое масштабирование к изображению

После загрузки изображения карту часто центрируют на его области.

Пример:

view.fit(imageExtent);

Полный вариант:

map.getView().fit(imageExtent, {
    padding: [20, 20, 20, 20]
});

В результате всё изображение становится видимым в окне карты.

Обработка загрузки изображения

Доступ к объекту источника позволяет отслеживать процесс загрузки.

source.on('imageloadstart', function () {
    console.log('Загрузка началась');
});

source.on('imageloadend', function () {
    console.log('Загрузка завершена');
});

source.on('imageloaderror', function () {
    console.log('Ошибка загрузки');
});

События полезны для:

  • отображения индикатора загрузки;
  • журналирования ошибок;
  • контроля состояния интерфейса.

Параметр imageLoadFunction

Стандартная загрузка изображения может быть переопределена.

Пример:

const source = new Static({
    url: 'image.png',
    imageExtent: extent,

    imageLoadFunction: function(image, src) {
        image.getImage().src = src;
    }
});

Данный механизм используется для:

  • авторизации запросов;
  • загрузки через прокси;
  • добавления токенов доступа;
  • нестандартной обработки изображений.

Работа с большими изображениями

ImageStatic загружает изображение полностью.

Например:

500 × 500 px   → небольшой объём
2000 × 2000 px → средний объём
10000 × 10000 px → очень большой объём памяти

При работе с крупными изображениями необходимо учитывать:

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

Для гигантских карт предпочтительнее использовать:

  • TileImage;
  • XYZ;
  • WMTS;
  • собственные тайловые наборы.

ImageStatic наиболее эффективен для изображений умеренного размера.

Масштабирование изображения

После привязки к экстенту изображение автоматически масштабируется вместе с картой.

view.setZoom(5);

При увеличении:

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

Механизм полностью управляется движком OpenLayers.

Переключение изображения во время работы

Источник можно заменить новым.

const newSource = new Static({
    url: 'new-map.png',
    imageExtent: extent
});

imageLayer.setSource(newSource);

Подход используется для:

  • переключения исторических карт;
  • отображения различных сценариев;
  • смены этажей здания;
  • показа разных временных состояний объекта.

Пример отображения исторической карты

const historicalLayer = new ImageLayer({
    opacity: 0.7,

    source: new Static({
        url: 'historical-map.jpg',

        imageExtent: [
            4100000,
            7300000,
            4300000,
            7500000
        ]
    })
});

После наложения поверх современных карт можно анализировать:

  • изменение городской застройки;
  • развитие транспортной сети;
  • изменение береговых линий;
  • исторические границы территорий.

Пример отображения плана здания

const extent = [
    0,
    0,
    3000,
    2000
];

const layer = new ImageLayer({
    source: new Static({
        url: 'building-plan.png',
        imageExtent: extent
    })
});

Подобная конфигурация часто используется для:

  • навигации внутри помещений;
  • отображения инженерных сетей;
  • систем мониторинга;
  • диспетчерских интерфейсов.

Основные параметры ImageStatic

Параметр Описание
url адрес изображения
imageExtent координатные границы изображения
projection система координат изображения
imageLoadFunction пользовательская функция загрузки
crossOrigin режим CORS

Пример полной настройки:

const source = new Static({
    url: 'map.png',

    projection: 'EPSG:3857',

    imageExtent: [
        -500000,
        -500000,
        500000,
        500000
    ],

    crossOrigin: 'anonymous'
});

Типичные ошибки

Неверный экстент

imageExtent: [
    0,
    0,
    100,
    100
]

Если реальные размеры области существенно отличаются, изображение окажется не на своём месте.

Несовпадение проекций

projection: 'EPSG:4326'

при использовании карты в

EPSG:3857

может привести к неправильному отображению без соответствующих преобразований координат.

Отсутствие доступа к изображению

Ошибка:

Failed to load image

Возможные причины:

  • неверный URL;
  • ошибка сервера;
  • ограничения CORS;
  • отсутствие файла.

Использование слишком больших изображений

Файл размером в десятки мегапикселей может вызвать:

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

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

Практические сценарии применения

ImageStatic особенно полезен для следующих задач:

  • отображение исторических карт;
  • работа с аэрофотоснимками;
  • визуализация архивных материалов;
  • размещение кадастровых схем;
  • отображение планов этажей;
  • построение интерактивных схем объектов;
  • создание игровых карт;
  • отображение технических чертежей;
  • визуализация производственных площадок;
  • интеграция растровых карт без тайловой инфраструктуры.

Источник ImageStatic представляет собой простой и эффективный механизм пространственной привязки одиночных изображений, обеспечивая их полноценную интеграцию в экосистему слоёв OpenLayers и совместную работу с инструментами масштабирования, навигации и управления отображением карты.

Оглавление