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/