Openlayers如何在地图moveend事件上更新叠加位置答案

【问题标题】：Openlayers how to update overlay position on map moveend eventOpenlayers如何在地图moveend事件上更新叠加位置
【发布时间】：2019-01-22 07:28:41
【问题描述】：

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

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

预期的结果是每当我点击功能时，覆盖应该显示在功能上，无论放大或缩小。

这是一个重现问题的工作小提琴： Openlayers overlay JSFiddle

截图：最初的目前放大后 放大或缩小后预期

【问题讨论】：

它看起来像一个样式问题（样式指针不在弹出窗口的锚点），但屏幕截图中的输出与代码中的样式不匹配（例如不同的颜色，没有圆形边框）。你有什么改变吗？
@Mike 是的，我提供了较短形式的问题，而不是提供完整而冗长的代码。屏幕截图仅供参考正在发生的事情和预期的事情。所以你机器上的输出会有所不同。这不是 CSS 问题。
你能添加一个重现错误的小提琴吗？
@bennos,@mike 我已经上传了小提琴链接，请看一下。

标签： javascript openlayers openlayers-3 openlayers-5 angular-openlayers

【解决方案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]]);

【讨论】：

这正是要求，你做得很好，谢谢。
虽然有一个问题，请查看这里 [jsfiddle.net/m2sndw9y/1/] 并尝试单击阿根廷和南非附近的点，您会注意到覆盖显示我们单击非洲地区而不是北美周围地区的确切位置.
是的，在计算点击了哪个世界时，我不允许主世界中有负值。我现在已经更正了。

【解决方案2】：

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

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

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

https://jsfiddle.net/2jf56q0g/

【讨论】：

Hello bennos，您的解决方案只能让用户在一个世界中看到弹出窗口，那么左边或右边的世界呢。该功能在每个世界中都有，因此弹出窗口也应该在那里可用。
对于每个世界的弹出窗口，您需要为每个世界创建新的叠加层，包括它们使用的三个元素，然后将坐标偏移主弹出窗口的正负一个世界。即coordinate = [coordinate[0]-ol.extent.getWidth(ol.proj.get('EPSG:3857').getExtent()),coordinate[1]]; 代表左边的世界。
@Mike 嘿，迈克，“每个世界的叠加层”，我的意思是无论世界用户点击什么，叠加功能都应该显示在那个特定的世界中，而不是在每个世界中。功能将同时在每个世界中可见，但叠加层应在单击的世界中可见。
问题是我已将叠加层绑定到点击事件的坐标，当我放大或缩小时，我认为它正在发生变化，因此我必须再次点击以获取新坐标并检测那里的特征。