Cara memposisikan overlay gambar statis di atas OpenLayers 3 Map

Saya menggunakan OpenLayers 3 untuk menampilkan peta dalam ruangan di aplikasi seluler Angular/Ionic. Peta adalah gambar statis yang saya tempatkan di atas peta OpenLayers.

Saya membuat peta dan menambahkan lapisan gambar seperti di bawah ini.

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
});

Kode di atas memang menampilkan gambar di atas peta, tetapi posisinya tidak tepat.

Gambar statis ditampilkan di atas bangunan, tetapi tidak ditempatkan dengan benar.

Saya berasumsi bahwa di OpenLayers, kita perlu mengatur sejauh mana gambar akan dimuat dan dengan demikian menentukan posisi gambar di peta.

Berdasarkan ini:

  1. Bagaimana cara menentukan luas sebenarnya bayangan tersebut, jika kita mempunyai koordinat keempat sudut bayangan tersebut?

  2. Bagaimana caranya agar peta lantai bangunan benar-benar terletak di atas bangunan tersebut.

Bangunannya justru diputar ke kiri. Lihat tangkapan layar Google Map.

Tangkapan layar Google Map yang menunjukkan orientasi peta.


person Wes Cole    schedule 20.05.2016    source sumber
comment
Anda harus mengubah gambar dengan benar sebelum memuatnya di OL. GDAL mungkin bisa membantu untuk tugas ini. gdal.org/gdaltransform.html Jika Anda bisa memberi saya gambarnya, saya mungkin bisa mengubahnya untuk Anda dan menunjukkan cara melakukannya dengan GDAL.   -  person kagelos    schedule 20.05.2016


Jawaban (1)


Anda perlu melakukan melakukan georeferensi pada gambar Anda sebelum melapisinya bagian atas peta dasar mana pun (OSM, dll.). Anda dapat menggunakan QGIS (yang sebenarnya menggunakan plugin GDAL) yang memiliki lingkungan grafis yang bagus.

Anda juga dapat menemukan tutorial yang cukup bagus di sini

Gambar yang digeoreferensi akan diputar dan akan ada ruang hitam (atau putih) karena itu, tetapi karena ini adalah PNG yang memiliki saluran alfa (transparansi), Anda dapat menghapusnya.

person TheVRChris    schedule 10.04.2019