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

Я использую 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, показывающий ориентацию карты.


person Wes Cole    schedule 20.05.2016    source источник
comment
Вы должны правильно преобразовать изображение, прежде чем загружать его в OL. GDAL может помочь в решении этой задачи. gdal.org/gdaltransform.html Если вы предоставите мне изображение, я могу преобразуйте его за вас и покажите, как это сделать с помощью GDAL.   -  person kagelos    schedule 20.05.2016


Ответы (1)


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

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

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

person TheVRChris    schedule 10.04.2019