วิธีวางตำแหน่งภาพซ้อนทับแบบคงที่ที่ด้านบนของ OpenLayers 3 Map

ฉันใช้ 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 Map

ภาพหน้าจอของ Google Map ที่แสดงการวางแนวของแผนที่