Ground Overlay для изображений на карте

Ground Overlay — механизм Google Maps JavaScript API, предназначенный для размещения растровых изображений поверх определённой географической области карты. Изображение привязывается к координатным границам и автоматически масштабируется, перемещается и отображается вместе с картой.

Технология применяется для визуализации:

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

В отличие от обычных маркеров или пользовательских элементов интерфейса, Ground Overlay занимает заданную географическую область и остаётся синхронизированным с координатной системой карты.

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

Основа работы Ground Overlay заключается в привязке изображения к прямоугольной области, определяемой двумя координатами:

  • юго-западной точкой (South-West);
  • северо-восточной точкой (North-East).

Google Maps автоматически вычисляет:

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

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

+----------------------+
|     Северо-восток    |
|                      |
|      Изображение     |
|                      |
|     Юго-запад        |
+----------------------+

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

Подключение Ground Overlay

Создание слоя выполняется через класс google.maps.GroundOverlay.

Общий синтаксис:

const overlay = new google.maps.GroundOverlay(
    imageUrl,
    bounds
);

Параметры:

Параметр Описание
imageUrl URL изображения
bounds Географические границы изображения

Создание карты

Базовая карта:

async function initMap() {

    const map = new google.maps.Map(
        document.getElementById("map"),
        {
            center: {
                lat: 40.74,
                lng: -74.18
            },
            zoom: 13
        }
    );

}

HTML-контейнер:

<div id="map"></div>

CSS:

#map {
    width: 100%;
    height: 600px;
}

Определение границ изображения

Для Ground Overlay используется объект с координатами области покрытия.

Пример:

const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.125440,
    west: -74.226550
};

Каждое значение задаёт предел изображения:

  • north — северная граница;
  • south — южная граница;
  • east — восточная граница;
  • west — западная граница.

Добавление изображения на карту

После создания границ можно разместить изображение:

const historicalOverlay =
    new google.maps.GroundOverlay(
        "images/newark-1922.jpg",
        imageBounds
    );

historicalOverlay.setMap(map);

После вызова setMap() изображение появляется поверх карты.

Полный пример:

async function initMap() {

    const map = new google.maps.Map(
        document.getElementById("map"),
        {
            zoom: 13,
            center: {
                lat: 40.743,
                lng: -74.18
            }
        }
    );

    const imageBounds = {
        north: 40.773941,
        south: 40.712216,
        east: -74.125440,
        west: -74.226550
    };

    const overlay =
        new google.maps.GroundOverlay(
            "images/map1922.jpg",
            imageBounds
        );

    overlay.setMap(map);
}

Удаление Ground Overlay

Для скрытия изображения используется тот же метод setMap(), но с параметром null.

overlay.setMap(null);

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

Повторное отображение:

overlay.setMap(map);

Получение текущей карты

Метод:

overlay.getMap();

Возвращает:

Map

или

null

если слой не отображается.

Пример:

const currentMap =
    overlay.getMap();

console.log(currentMap);

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

Ground Overlay поддерживает управление прозрачностью.

Параметр:

opacity

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

0.0 — полностью прозрачное
1.0 — полностью непрозрачное

Пример:

const overlay =
    new google.maps.GroundOverlay(
        imageUrl,
        imageBounds,
        {
            opacity: 0.6
        }
    );

Результат:

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

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

Метод:

overlay.setOpacity(value);

Пример:

overlay.setOpacity(0.3);

Получение текущего значения:

const opacity =
    overlay.getOpacity();

Пример:

console.log(
    overlay.getOpacity()
);

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

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

<input
    type="range"
    min="0"
    max="1"
    step="0.1"
    id="opacity"
/>

Jav * aScript:

const slider =
    document.getElementById("opacity");

slider.addEventListener(
    "input",
    event => {

        overlay.setOpacity(
            Number(event.target.value)
        );

    }
);

Подобное решение часто используется в GIS-системах для сравнения различных картографических слоёв.

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

Один из самых распространённых сценариев.

Например:

const historicalMap =
    new google.maps.GroundOverlay(
        "historic-map.jpg",
        imageBounds,
        {
            opacity: 0.7
        }
    );

historicalMap.setMap(map);

Возможности:

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

Отображение результатов аэрофотосъёмки

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

После геопривязки такой снимок можно разместить через Ground Overlay.

const droneOverlay =
    new google.maps.GroundOverlay(
        "drone-photo.png",
        bounds
    );

droneOverlay.setMap(map);

Типичные области применения:

  • строительство;
  • сельское хозяйство;
  • мониторинг объектов;
  • инспекция территорий.

Наложение погодных данных

Ground Overlay позволяет отображать:

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

Пример:

const weatherOverlay =
    new google.maps.GroundOverlay(
        "weather-layer.png",
        weatherBounds,
        {
            opacity: 0.5
        }
    );

weatherOverlay.setMap(map);

Переключение нескольких изображений

Иногда требуется отображать разные слои.

Создание набора оверлеев:

const overlay1 =
    new google.maps.GroundOverlay(
        "year-1950.png",
        bounds
    );

const overlay2 =
    new google.maps.GroundOverlay(
        "year-1980.png",
        bounds
    );

const overlay3 =
    new google.maps.GroundOverlay(
        "year-2020.png",
        bounds
    );

Переключение:

function showOverlay(overlay) {

    overlay1.setMap(null);
    overlay2.setMap(null);
    overlay3.setMap(null);

    overlay.setMap(map);

}

Использование:

showOverlay(overlay2);

Контроль видимости слоя

Флаг отображения:

let visible = true;

Переключение:

function toggleOverlay() {

    if (visible) {
        overlay.setMap(null);
    } else {
        overlay.setMap(map);
    }

    visible = !visible;

}

Кнопка:

<button id="toggle">
    Показать/скрыть
</button>
document
    .getElementById("toggle")
    .addEventListener(
        "click",
        toggleOverlay
    );

Особенности геопривязки

Точность отображения зависит от корректности координат.

Если изображение смещено:

Причина:
- неверные координаты границ;
- искажения исходного изображения;
- ошибки геореференцирования.

Для высокой точности рекомендуется:

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

Ограничения Ground Overlay

Ground Overlay предназначен для прямоугольных изображений.

Не поддерживаются:

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

Если требуется сложная геометрия, обычно используются:

  • пользовательские OverlayView;
  • WebGL Overlay View;
  • Tile Overlay;
  • Data Layer.

Производительность

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

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

Нежелательно использовать изображения размером:

15000 × 15000 px
20000 × 20000 px
30000 × 30000 px

Для больших карт предпочтительнее:

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

Ground Overlay и Tile Overlay

Характеристика Ground Overlay Tile Overlay
Одно изображение Да Нет
Очень большие карты Нет Да
Простота настройки Высокая Средняя
Масштабируемость Ограниченная Высокая
GIS-проекты Частично Отлично
Исторические карты Отлично Отлично

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

Практический пример

async function initMap() {

    const map = new google.maps.Map(
        document.getElementById("map"),
        {
            zoom: 14,
            center: {
                lat: 40.743,
                lng: -74.18
            }
        }
    );

    const bounds = {
        north: 40.773941,
        south: 40.712216,
        east: -74.125440,
        west: -74.226550
    };

    const overlay =
        new google.maps.GroundOverlay(
            "images/historical-map.jpg",
            bounds,
            {
                opacity: 0.7
            }
        );

    overlay.setMap(map);

    document
        .getElementById("opacity")
        .addEventListener(
            "input",
            e => {

                overlay.setOpacity(
                    Number(e.target.value)
                );

            }
        );
}

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

Оглавление