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. 建物のフロア マップを実際に建物の上に配置するにはどうすればよいでしょうか。

建物は実際には左に回転しています。Google マップのスクリーンショットをご覧ください。

地図の向きを示す Google マップのスクリーンショット。

4

1 に答える 1

0

ベースマップ (OSM など) の上に画像を重ねる前に、画像をジオリファレンスする必要があります。素敵なグラフィカル環境を備えたQGIS (実際には GDAL プラグインを使用) を使用できます。

ここでかなり良いチュートリアルを見つけることもできます

ジオリファレンスされた画像は回転し、そのために黒い (または白い) スペースができますが、アルファ チャネル (透明度) を持つ PNG であるため、削除できます。

于 2019-04-10T23:17:30.650 に答える