OpenLayers v5叠加和缩放行为

Question

我目前正在使用openlayers，并使用新的ol.source.ImageStatic作为我的地图。

我想在地图顶部放置透明图像，并使用ol.Overlay和element.innerHTML覆盖图像。我现在遇到这种方法的缩放问题。我希望透明图像在缩小时随地图缩小，而在锚定到地图中的一个点时放大。

[目前看来，当您缩小地图时，覆盖的图像会扩展并且不会固定在同一位置，而放大时图像会变小并返回其位置。

任何帮助，谢谢您！

var element = document.createElement('div');

element.innerHTML = '<div class="spoiler" id=""> <img src="IMAGE" width="500" height="500" onclick="showSpoiler(this);""></img> <div class="inner" style="display:none;">sample text</div></div>';

var marker = new ol.Overlay({
position: [-520, 100],
positioning: 'center-center',
element: element,
insertFirst: true,
stopEvent: true,
autoPan: true
});
map.addOverlay(marker); 

Answer 1

查看ol-ext ol / source / GeoImage，以一定位置和比例在地图上显示图像。当比例尺定义地面分辨率时，图像将随地图缩放。

请参见在线示例https://viglino.github.io/ol-ext/examples/layer/map.geoimage.html

Answer 2

在我看来，您的评论是预期的行为。这是因为图像尺寸为您指定的500 x 500，并且不会改变。检查示例OL Example Overlay Popup，OL Example Overlay。

OL正在根据您的要求进行渲染，我很确定它也必须绑定到该位置。要对此进行检查，您应该平移地图。