OpenLayers v5 ol.Overlay 和 Zooming 行为答案

【问题标题】：OpenLayers v5 ol.Overlay and Zooming behaviorOpenLayers v5 ol.Overlay 和 Zooming 行为
【发布时间】：2020-01-28 00:49:50
【问题描述】：

我目前正在使用 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);

【问题讨论】：

标签： javascript overlay openlayers openlayers-3 openlayers-5

【解决方案1】：

查看 ol-ext ol/source/GeoImage 以在地图上以某个位置和比例显示图像。图像将随地图一起缩放，因为比例定义了地面分辨率。

在线查看示例https://viglino.github.io/ol-ext/examples/layer/map.geoimage.html

【讨论】：

【解决方案2】：

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

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

【讨论】：

你知道是否有办法扭转预期的行为并让覆盖在缩小而不是增加时缩小？
我不知道是否可以通过更改视图的缩放级别或分辨率来更改叠加层的大小。即使有可能，我认为解决方案可能过于复杂。我宁愿选择像@Viglino Jean-Marc 提议这样的东西，使用图像层。我认为图像层是解决您问题的好方法。