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：在大型建筑物上附加地面图像

1 个答案: