Openlayers如何更新地图移动事件上的叠加位置

Question

我在 openlayers 地图上有一个 ol.geom.Point 类型的点要素，单击该要素时会显示一个弹出窗口。弹出窗口是我作为叠加层添加的 <div> 元素，每当我在地图上找到点击事件的要素时，我都会显示和隐藏叠加层。

问题是当您放大或缩小地图时叠加层错位 （提示和 div）。但是，如果您再次单击功能，它会正确显示，但每次单击都不理想。 我也在尝试在每个世界显示叠加层，每个世界的问题都是一样的，它错位了。

预期的结果是每当我点击地图项时，无论放大或缩小，叠加层都应该显示在地图项上。

这是一个可以重现问题的 fiddle 方法： Openlayers overlay JSFiddle

截图： 最初的 当前 放大后 放大或缩小后预期

Answer 1

您正在将弹出窗口的坐标设置为事件坐标，可能会稍微偏离。

尝试将弹出窗口的坐标设置为功能的坐标，例如：

let coordinate = feature.getGeometry().getCoordinates();

https://jsfiddle.net/2jf56q0g/

Answer 2

要精确定位在要素上，但在您点击的世界中：

var worldWidth = ol.extent.getWidth(view.getProjection().getExtent());
var world = Math.floor((map.getCoordinateFromPixel(evt.pixel)[0] + worldWidth/2)/worldWidth);
let coordinate = feature.getGeometry().getCoordinates();
content.innerHTML = feature.get('desc');
popup.setPosition([coordinate[0] + world*worldWidth, coordinate[1]]);