Openlayers如何在地图MoveEnd事件上更新叠加层位置

Question

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

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

预期的结果是，无论何时放大或缩小，只要我单击功能，覆盖层都应显示在功能上。

这是重现该问题的有效方法： Openlayers覆盖了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]]);

Answer 2

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

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

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

https://jsfiddle.net/2jf56q0g/