Статические изображения

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

Статическое изображение в OpenLayers представляется как слой (ImageLayer), использующий источник ImageStatic. В отличие от тайловых слоёв, здесь вся картинка загружается целиком и привязывается к заданному географическому экстенту.

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

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

  • url — путь к изображению
  • imageExtent — географический прямоугольник привязки
  • projection — система координат
  • imageSize — физический размер изображения (опционально)

Базовая конфигурация слоя

Статическое изображение подключается через ol/source/ImageStatic.

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

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

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

const map = new Map({
  target: 'map',
  layers: [layer],
  view: new View({
    projection: 'EPSG:3857',
    center: [512, 384],
    zoom: 2,
    extent: extent
  })
});

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

Геопривязка изображения

Ключевым этапом является определение imageExtent. Этот параметр задаёт границы, в которых изображение будет растянуто.

Логика экстента

Экстент представляет собой массив:

[minX, minY, maxX, maxY]

Он определяет:

  • нижнюю левую точку изображения
  • верхнюю правую точку изображения

При использовании проекции EPSG:3857 значения должны соответствовать метрам в Web Mercator.

Работа с пользовательскими системами координат

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

import { get as getProjection } from 'ol/proj.js';

const projection = getProjection('EPSG:3857');

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

const source = new ImageStatic({
  url: 'floorplan.png',
  imageExtent: extent,
  projection: projection
});

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

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

Статические изображения не обладают тайловой структурой, поэтому масштабирование осуществляется целиком. Это приводит к прямой зависимости качества от исходного разрешения изображения.

При увеличении масштаба:

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

При уменьшении масштаба:

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

Управление видимостью слоя

Как и любой слой OpenLayers, ImageLayer поддерживает управление отображением:

layer.setOpacity(0.6);
layer.setVisible(true);
layer.setZIndex(10);

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

Совмещение с векторными объектами

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

import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';

const point = new Feature({
  geometry: new Point([500, 400])
});

const vectorLayer = new VectorLayer({
  source: new VectorSource({
    features: [point]
  })
});

Если координатные системы совпадают, векторные объекты точно накладываются на изображение.

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

При использовании геопривязанных изображений (например, ортофото) экстент задаётся в реальных координатах:

const extent = [
  418000, 5630000,
  420000, 5632000
];

const source = new ImageStatic({
  url: 'orthophoto.tif.png',
  imageExtent: extent,
  projection: 'EPSG:3857'
});

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

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

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

Характерные особенности:

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

Обработка ошибок загрузки

При невозможности загрузки изображения слой может быть скрыт или отображён пустым.

const source = new ImageStatic({
  url: 'map.png',
  imageExtent: extent,
  imageLoadFunction: function(image, src) {
    const img = image.getImage();
    img.src = src;
    img.oner ror = function() {
      console.log('Ошибка загрузки изображения');
    };
  }
});

Динамическая замена изображения

Источник может быть заменён без пересоздания карты:

layer.setSource(new ImageStatic({
  url: 'new-map.png',
  imageExtent: extent
}));

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

Геометрическая интерпретация изображения

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

Преобразование осуществляется линейно:

  • X координата зависит от ширины изображения
  • Y координата зависит от высоты изображения
  • масштаб определяется экстентом

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

При построении схем помещений часто применяется условная система:

const extent = [0, 0, 100, 50];

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

В этом случае:

  • 1 единица координаты = условная единица плана
  • отсутствует географическая привязка
  • упрощается работа с интерактивными элементами

Сочетание с трансформацией координат

При необходимости совмещения с геоданными используется преобразование:

import { fromLonLat } from 'ol/proj.js';

const center = fromLonLat([74.6, 42.8]);

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

Практическая структура слоёв

Типичная конфигурация включает:

  • ImageLayer — статическое изображение
  • VectorLayer — интерактивные объекты
  • TileLayer — подложка (при необходимости)

Порядок слоёв влияет на визуальную иерархию:

  • нижний слой — базовая карта
  • средний слой — изображение
  • верхний слой — интерактивные элементы

Ограничения подхода

Использование статических изображений связано с рядом ограничений:

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

Типовые сценарии применения

Статические изображения применяются в случаях:

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