我正在使用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
});
上面的代码确实在地图上显示了一个图像,但它没有正确定位。
Static image displayed over building, but not placed properly.
我正在假设在OpenLayers中,我们需要设置包含图像的范围,从而确定图像在地图上的位置。
基于此:
建筑物实际上向左旋转。查看Google地图截图。
您需要在将图像覆盖到任何基本地图(OSM等)之前对其进行georeference。您可以使用具有良好图形环境的QGIS(实际上使用GDAL插件)。
你也可以找到一个fairly good tutorial here
地理参考图像将被旋转,因此会有一个黑色(或白色)空间,但由于它是一个具有Alpha通道(透明度)的PNG,您可以删除它。