Обработка изображений

Библиотека OpenLayers предназначена не только для отображения векторных объектов и картографических сервисов. Одним из важных направлений её применения является работа с растровыми изображениями. К таким данным относятся спутниковые снимки, аэрофотосъёмка, сканированные карты, фотографии местности, данные дистанционного зондирования Земли и различные графические материалы, привязанные к координатам.

Обработка изображений в OpenLayers включает:

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

Источники растровых данных

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

Наиболее распространённые:

  • ImageStatic
  • ImageWMS
  • TileWMS
  • XYZ
  • WMTS
  • GeoTIFF

ImageStatic

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

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

const imageLayer = new ImageLayer({
    source: new Static({
        url: 'map.jpg',
        imageExtent: [
            1000000,
            5000000,
            1100000,
            5100000
        ]
    })
});

Параметр imageExtent определяет область карты, которую занимает изображение.

GeoTIFF

Формат GeoTIFF широко применяется в геоинформационных системах, поскольку содержит координатную информацию непосредственно внутри файла.

import GeoTIFF from 'ol/source/GeoTIFF.js';
import WebGLTileLayer from 'ol/layer/WebGLTile.js';

const layer = new WebGLTileLayer({
    source: new GeoTIFF({
        sources: [{
            url: 'dem.tif'
        }]
    })
});

GeoTIFF позволяет работать с:

  • цифровыми моделями рельефа;
  • спутниковыми каналами;
  • индексами растительности;
  • научными растровыми данными.

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

Прозрачность является одним из основных инструментов визуального анализа.

Прозрачность слоя

imageLayer.setOpacity(0.5);

Значение изменяется от:

  • 0 — полностью прозрачный слой;
  • 1 — полностью непрозрачный слой.

Динамическое изменение прозрачности

slider.addEventListener('input', (event) => {
    imageLayer.setOpacity(
        Number(event.target.value)
    );
});

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

Изменение видимости изображений

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

imageLayer.setVisible(false);

Проверка состояния:

const visible = imageLayer.getVisible();

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

Работа с Canvas

OpenLayers активно использует HTML5 Canvas для визуализации слоёв.

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

const canvas = document.createElement('canvas');

const context = canvas.getContext('2d');

После получения контекста возможно:

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

Событие postrender

Для обработки изображения после его отрисовки применяется событие postrender.

layer.on('postrender', (event) => {

    const ctx = event.context;

    ctx.save();

    ctx.globalAlpha = 0.7;

    ctx.restore();
});

В обработчике доступен объект CanvasRenderingContext2D.

Получение данных пикселей

Для анализа растров используются методы Canvas API.

const imageData = ctx.getImageData(
    0,
    0,
    canvas.width,
    canvas.height
);

Массив пикселей:

const pixels = imageData.data;

Каждый пиксель содержит четыре значения:

R
G
B
A

Например:

255, 0, 0, 255

соответствует непрозрачному красному цвету.

Инверсия цветов

Простейшая операция обработки изображения — инвертирование.

for (let i = 0; i < pixels.length; i += 4) {

    pixels[i] = 255 - pixels[i];
    pixels[i + 1] = 255 - pixels[i + 1];
    pixels[i + 2] = 255 - pixels[i + 2];
}

После изменения данные возвращаются на холст:

ctx.putImageData(
    imageData,
    0,
    0
);

Перевод изображения в оттенки серого

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

for (let i = 0; i < pixels.length; i += 4) {

    const gray =
        (
            pixels[i] +
            pixels[i + 1] +
            pixels[i + 2]
        ) / 3;

    pixels[i] = gray;
    pixels[i + 1] = gray;
    pixels[i + 2] = gray;
}

Подобная обработка применяется при:

  • анализе снимков;
  • выделении контуров;
  • научных исследованиях.

Регулировка яркости

Яркость изменяется прибавлением значения ко всем цветовым каналам.

const brightness = 40;

for (let i = 0; i < pixels.length; i += 4) {

    pixels[i] += brightness;
    pixels[i + 1] += brightness;
    pixels[i + 2] += brightness;
}

Перед записью желательно ограничивать диапазон значений от 0 до 255.

Регулировка контрастности

Контрастность изменяется по специальной формуле.

const contrast = 100;

const factor =
    (259 * (contrast + 255)) /
    (255 * (259 - contrast));

for (let i = 0; i < pixels.length; i += 4) {

    pixels[i] =
        factor * (pixels[i] - 128) + 128;

    pixels[i + 1] =
        factor * (pixels[i + 1] - 128) + 128;

    pixels[i + 2] =
        factor * (pixels[i + 2] - 128) + 128;
}

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

Работа с отдельными каналами

Иногда требуется анализировать конкретный цветовой канал.

Красный канал

for (let i = 0; i < pixels.length; i += 4) {

    pixels[i + 1] = 0;
    pixels[i + 2] = 0;
}

Зелёный канал

for (let i = 0; i < pixels.length; i += 4) {

    pixels[i] = 0;
    pixels[i + 2] = 0;
}

Синий канал

for (let i = 0; i < pixels.length; i += 4) {

    pixels[i] = 0;
    pixels[i + 1] = 0;
}

Подобные операции используются при работе с мультиспектральными снимками.

Пиксельная обработка через RasterSource

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

import RasterSource from 'ol/source/Raster.js';

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

const raster = new RasterSource({
    sources: [source],

    operation: function(pixels) {

        const pixel = pixels[0];

        pixel[0] = 255 - pixel[0];
        pixel[1] = 255 - pixel[1];
        pixel[2] = 255 - pixel[2];

        return pixel;
    }
});

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

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

RasterSource способен комбинировать данные нескольких источников.

const raster = new RasterSource({
    sources: [
        source1,
        source2
    ],

    operation: function(pixels) {

        const p1 = pixels[0];
        const p2 = pixels[1];

        return [
            (p1[0] + p2[0]) / 2,
            (p1[1] + p2[1]) / 2,
            (p1[2] + p2[2]) / 2,
            255
        ];
    }
});

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

Создание пользовательских фильтров

Пример выделения красных объектов.

operation: function(pixels) {

    const pixel = pixels[0];

    if (
        pixel[0] > 180 &&
        pixel[1] < 80 &&
        pixel[2] < 80
    ) {
        return [255, 0, 0, 255];
    }

    return [0, 0, 0, 255];
}

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

Псевдоцветовая визуализация

Одноканальные изображения часто визуализируются цветовой шкалой.

operation: function(pixels) {

    const value = pixels[0][0];

    return [
        value,
        0,
        255 - value,
        255
    ];
}

В результате низкие значения становятся синими, а высокие — красными.

Работа с цифровыми моделями рельефа

GeoTIFF может содержать значения высот.

Получение высоты:

const source = new GeoTIFF({
    sources: [{
        url: 'elevation.tif'
    }]
});

Затем данные используются для:

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

Цветовые выражения WebGL

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

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

const layer = new WebGLTileLayer({

    source: source,

    style: {
        color: [
            '*',
            ['band', 1],
            [255, 0, 0]
        ]
    }
});

Вычисления выполняются значительно быстрее по сравнению с обработкой через JavaScript.

Нормализация значений

При работе со спутниковыми каналами данные часто находятся вне диапазона 0–255.

Для нормализации используется формула:

const normalized =
    (
        value - min
    ) /
    (
        max - min
    );

После этого результат переводится в диапазон цветов.

Работа с индексами дистанционного зондирования

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

Наиболее известный индекс — NDVI.

Формула:

NDVI=

где:

  • NIR — ближний инфракрасный канал;
  • RED — красный канал.

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

Теневой рельеф

Теневой рельеф позволяет повысить наглядность цифровой модели высот.

Основной принцип:

  1. определяется направление освещения;
  2. вычисляется наклон поверхности;
  3. рассчитывается интенсивность света;
  4. формируется новое изображение.

Результат визуально напоминает объёмный рельеф местности.

Смешивание слоёв

Для объединения нескольких изображений используются режимы наложения Canvas.

ctx.globalCompositeOperation =
    'multiply';

Другие режимы:

  • screen
  • overlay
  • darken
  • lighten
  • difference
  • source-over

Каждый режим создаёт собственный визуальный эффект.

Кэширование изображений

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

Основные рекомендации:

  • использовать тайловые источники вместо больших изображений;
  • применять WebGL-слои;
  • избегать частой полной переработки изображения;
  • выполнять тяжёлые вычисления через RasterSource;
  • использовать кэш браузера;
  • ограничивать количество одновременно отображаемых растров.

Обработка больших спутниковых снимков

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

Преимущества:

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

Наиболее распространённые форматы сервисов:

  • WMS;
  • WMTS;
  • XYZ;
  • TMS.

Комбинирование векторных и растровых данных

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

Пример структуры карты:

const map = new Map({

    layers: [

        rasterLayer,

        roadsLayer,

        buildingsLayer,

        labelsLayer

    ],

    target: 'map'
});

Такой подход позволяет накладывать:

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

Обработка изображений в OpenLayers охватывает широкий спектр задач: от простого управления прозрачностью до сложной пиксельной аналитики, работы с GeoTIFF, мультиспектральными данными и аппаратно ускоренной визуализации через WebGL. Благодаря интеграции с Canvas API, RasterSource и современными графическими технологиями библиотека предоставляет полноценную платформу для создания геоинформационных приложений, ориентированных на анализ и визуальную обработку растровых данных.

Оглавление