如何在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地图截图.

Google地图的屏幕截图,显示地图的方向.

Answer 1

在将图像叠加到任何底图（OSM 等）之上之前，您需要对图像进行地理配准。您可以使用QGIS（实际上使用 GDAL 插件），它有一个很好的图形环境。

您还可以在这里找到相当不错的教程

地理参考图像将被旋转，因此会出现黑色（或白色）空间，但由于它是具有 Alpha 通道（透明度）的 PNG，因此您可以将其删除。