1

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

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

预期的结果是，无论何时我单击功能，都应在功能上显示叠加层，而不管放大或缩小。

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

屏幕截图：初始 最初的] 当前放大后 预期放大或缩小后]

4

2 回答 2

3

要在特征上精确定位，但在您点击的世界中：

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]]);
于 2019-01-25T10:46:50.240 回答
1

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

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

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

https://jsfiddle.net/2jf56q0g/

于 2019-01-23T11:55:05.080 回答