6

我正在使用 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. 我们如何让建筑平面图真正覆盖在建筑物上。

建筑物实际上是向左旋转的。查看谷歌地图截图。

显示地图方向的谷歌地图屏幕截图。

4

1 回答 1

0

您需要先对图像进行地理配准，然后再将其覆盖在任何底图（OSM 等）之上。您可以使用具有良好图形环境的QGIS （实际上使用 GDAL 插件）。

你也可以在这里找到一个相当不错的教程

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

于 2019-04-10T23:17:30.650 回答