Javascript Openlayers如何在map moveend事件上更新覆盖位置

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

问题是，在放大或缩小地图时，叠加会使tip和div错位。然而，若你们再次点击该功能，它会正确显示，但每次点击并不理想。 我还试图在每个世界显示叠加，每个世界的问题都是一样的，它会混乱

预期结果是，每当我单击功能时，无论放大还是缩小，覆盖都应显示在功能上

下面是一个重现问题的工作小提琴：

截图： 最初的 当前正在放大后 放大或缩小后应为

---

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

尝试将弹出窗口的坐标设置为特征的坐标，如：

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

---

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

尝试将弹出窗口的坐标设置为特征的坐标，如：

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

---

要精确定位功能，但在您单击的世界中：

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

---

要精确定位功能，但在您单击的世界中：

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

---

---

这看起来像是样式问题。样式指针不在弹出窗口的锚点，但屏幕截图中的输出与代码中的样式不匹配，例如颜色不同，没有圆形边框。你做了什么修改吗？@Mike是的，我提供了较短形式的问题，而不是给出完整而冗长的代码。屏幕截图仅用于参考正在发生的事情和预期的情况。因此，您机器上的输出将不同。这不是css问题。你能添加一个复制错误的提琴吗？@bennos，@mike我已经上传了提琴链接，请看一看。这看起来像是样式问题。样式指针不在弹出窗口的锚点，但屏幕截图中的输出与代码中的样式不匹配，例如不同的颜色，没有圆形边框。你做了什么修改吗？@Mike是的，我提供了较短形式的问题，而不是给出完整而冗长的代码。屏幕截图仅用于参考正在发生的事情和预期的情况。因此，您机器上的输出将不同。这不是css问题。你能添加一个复制错误的小提琴吗？@bennos，@mike我已经上传了小提琴链接，请看一看。您好bennos您的解决方案只能让用户在一个世界中看到弹出窗口，左边或右边的世界如何。该功能在每个世界都有，因此弹出窗口也应该在那里可用。对于每个世界上的弹出窗口，您需要为每个世界创建新的覆盖图，包括它们使用的三个元素，然后将坐标从主弹出窗口偏移正负一个世界。i、 e.coordinate=[coordinate[0]-ol.extent.getwidthsol.proj.get'EPSG:3857'。getExtent，coordinate[1]]；对于左边的世界。@Mike嘿Mike，每个世界中的覆盖，我的意思是，无论世界上的用户单击了什么，覆盖功能都应该只显示在特定的世界中，而不是在每个世界中。功能将在每个世界中一次可见，但覆盖应在单击的世界中可见。问题是我已将覆盖绑定到单击事件的坐标，当我放大或缩小时，我认为它正在更改，因此我必须再次单击以获取新坐标并在那里检测功能。您好bennos您的解决方案仅适用于使用户只能在一个世界中看到弹出窗口，左侧或右侧的世界如何。该功能在每个世界都有，因此弹出窗口也应该在那里可用。对于每个世界上的弹出窗口，您需要为每个世界创建新的覆盖图，包括它们使用的三个元素，然后将坐标从主弹出窗口偏移正负一个世界。i、 e.coordinate=[coordinate[0]-ol.extent.getwidthsol.proj.get'EPSG:3857'。getExtent，coordinate[1]]；对于左边的世界。@Mike嘿Mike，每个世界中的覆盖，我的意思是，无论世界上的用户单击了什么，覆盖功能都应该只显示在特定的世界中，而不是在每个世界中。功能将在每个世界中一次可见，但覆盖应在单击的世界中可见。问题是我已将覆盖绑定到单击事件的坐标，当我放大或缩小时，我认为它正在发生变化，因此我必须再次单击以获取新坐标并检测那里的功能。这正是要求的内容，你做得很好，谢谢。但是有一个问题，请检查这里[并尝试单击阿根廷和南非附近的点，你会注意到叠加显示的正是我们单击非洲地区而不是北美地区的位置。是的，我在

---

计算单击了哪个世界。我现在已经更正了。这正是要求，你做得很好，谢谢。但是有一个问题，请检查这里[试着点击阿根廷和南非附近的点，你会注意到叠加显示的是我们点击非洲地区的确切位置，而不是北美地区的位置。是的，在计算点击哪个世界时，我没有考虑主要世界的负值。我现在已经更正了它。