Openlayers如何在地图移动结束事件上更新叠加层位置

Question

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

问题是当您放大或缩小地图时，叠加层会使（尖端和div）错位。但是，如果再次单击该功能，它将正确显示，但每次单击都不理想。 另外，我试图在每个世界上显示覆盖图，每个世界都存在相同的问题，它错位了。

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

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

Answer 2

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

尝试将popupt的坐标设置为要素的坐标，例如：

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

https://jsfiddle.net/2jf56q0g/