javascript - Openlayers如何更新 map 移动事件上的叠加位置

Question

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

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

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

这是一个可以重现问题的 fiddle : Openlayers overlay JSFiddle

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

Answer 1

精确定位在功能上，但在您点击的世界中:

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]]);