OpenLayers: Attaching an ground layer image over an large building

Question

I've got the following task:

Attaching a ground layer (provided as an jpg-image) over an plant.

I thought that I've found an solution.

Live-Demo on CodePen: http://codepen.io/mizech/full/dXBoRq/

But it doesn't work as expected. If one zooms into or out the map the image doesn't scale bigger or smaller.

Moreover: The image is supposed to rotate with the map. That doesn't work neither.

Therefore my question:

What do I have to do to make it work the way it should (image scales when zoomed-in and -out, images follows when rotating) ?

Or should I choose a complete different approach?

Then any hints concerning code-examples are very appreciated.

Here my code so far:

var layer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var control = new ol.control.FullScreen();

var center = ol.proj.transform([6.9690055, 49.2175355], 'EPSG:4326', 'EPSG:3857');

var overlay = new ol.Overlay({
  position: center,
  element: document.getElementById('plant')
});

var view = new ol.View({
  center: center,
  zoom: 17
});

var map = new ol.Map({
  target: 'map',
  layers: [layer],
  controls: [control],
  overlays: [overlay],
  view: view
});

#plant {
  width: 1300px;
  height: 400px;
  border: 1px solid black;
  transform: rotate(16.5deg);
}

#plant img {
  opacity: 0.6;
}

<div id="map" class="map">
  <div id="plant"><img src="http://placehold.it/1300x400" alt="bild" /></div>
</div>

Answer 1

You can try to use another option to accomplish the preferred effect, there are two options I can think of:

1. Use ol.layer.Image(), code sample:

var extent = ol.proj.transformExtent([7.2, 49.3, 6.5, 49.1],
    'EPSG:4326', 'EPSG:3857');
new ol.layer.Image({
    opacity: 0.6,
    source: new ol.source.ImageStatic({
        url: 'http://placehold.it/1300x400',
        imageExtent: extent
    })
})

The extent is just a rough estimation yet.

2. Use a vector Layer to style an Icon using your image, already explained here: https://gis.stackexchange.com/questions/130603/how-to-resize-a-feature-and-prevent-it-from-scaling-when-zooming-in-openlayers-3/

To rotate it along with the map use rotateWithView: true in your icon style, like this:

var iconStyle = new ol.style.Icon({
    src: 'http://placehold.it/1300x400',
    rotateWithView: true,
    opacity: 0.6
});