OpenLayers：在大型建筑物上附加地面层图像

Question

我有以下任务：

在植物上附加地面层（以 jpg 图像形式提供）。

我认为我找到了解决方案。

CodePen 上的现场演示：http://codepen.io/mizech/full/dXBoRq/

但它没有按预期工作。如果放大或缩小地图，图像不会变大或变小。

此外：图像应该随地图旋转。那也不行。

因此我的问题是：

我需要做些什么才能让它按应有的方式工作（图像在放大和缩小时缩放，图像在旋转时跟随） ?

还是我应该选择完全不同的方法？

非常感谢有关代码示例的任何提示。

这里是我的代码：

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

您可以尝试使用其他选项来完成您喜欢的效果，我能想到的有两个选项：

1.使用ol.layer.Image()，代码示例：

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

范围还只是粗略估计。

2. 使用矢量图层为使用您的图像的图标设置样式，已在此处解释： https://gis.stackexchange.com/questions/130603/how-to-resize-a-feature-and-prevent-it-from-scaling-when-zooming-in-openlayers-3/

要使其随地图一起旋转，请在您的图标样式中使用 rotateWithView: true，如下所示：

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

OpenLayers：在大型建筑物上附加地面层图像

OpenLayers: Attaching an ground layer image over an large building

javascript

geolocation

openlayers-3

geo