Как разместить наложение статического изображения поверх OpenLayers 3 Map

Question

Я использую OpenLayers 3 для отображения внутренних карт в мобильном приложении Angular/Ionic. Карты - это статические изображения, которые я помещаю поверх карты OpenLayers.

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

var extent = ol.proj.transformExtent([-79.180360, 37.351251, -79.179148, 37.349640], 'EPSG:4326', 'EPSG:3857');

var layer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var view = new ol.View({
    center: ol.extent.getCenter(extent),
    zoom: 18,
    rotation: 0
});


// Setting the Overlay Image
var image = new ol.layer.Image({
    source: new ol.sourceImageStatic({
        url: 'http://www.exampleimageurl.png'
        imageExtent: extent
    })
});

var map = new ol.Map({
    target: 'indoor-map',
    layers: [layer, image],
    view: view
});

Приведенный выше код отображает изображение в верхней части карты, но оно расположено неправильно.

Статическое изображение отображается над зданием, но не размещается должным образом.

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

Основываясь на этом:

1. Как мы определяем истинный экстент для изображения, если у нас есть координаты для 4 углов изображения?

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

Здание фактически повернуто налево. Смотрите скриншот Google Map.

Снимок экрана карты Google, показывающий ориентацию карты.

Answer 1

Вам нужно привязать свое изображение перед наложением поверх любой базовой карты (OSM и т. Д.). Вы можете использовать QGIS (который на самом деле использует плагин GDAL), который имеет приятную графическую среду.

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

Изображение с географической привязкой будет повернуто, и из-за этого появится черное (или белое) пространство, но, поскольку это PNG-файл с альфа-каналом (прозрачность), его можно удалить.