[英]Openlayers how to update overlay position on map moveend event
I have a Point feature of type ol.geom.Point on openlayers map and there is a popup which I am displaying on clicking the feature. 我在openlayers地图上具有ol.geom.Point类型的Point功能,单击该功能时会显示一个弹出窗口。 The popup is <div>
element which I have added as an overlay, I am displaying and hiding the overlay whenever I find the feature on click event on the map. 弹出窗口是我添加为叠加层的<div>
元素,只要在地图上单击事件时找到要素,我就会显示和隐藏该叠加层。
The problem is the overlay dislocates (tip and div) when you zoom in or out on the map. 问题是在地图上放大或缩小时叠加层会错位(提示和div) 。 However if you click again on feature it displays properly but clicking each time is not ideal. 但是,如果再次单击该功能,它将正确显示,但每次单击都不理想。 Also I am trying to display the overlay in every world, the problem is same for every world, it dislocates. 我也试图在每个世界上显示覆盖图,对于每个世界来说问题都是一样的,它错位了。
The expected outcome is whenever I click on feature the overlay should be displayed on the feature, irrespective of zoom in or out. 预期的结果是,无论何时放大或缩小,只要我单击功能,覆盖层都应显示在功能上。
Here is a working fiddle to reproduce the problem : Openlayers overlay JSFiddle 这是重现该问题的有效方法: Openlayers覆盖了JSFiddle
Screenshots: Initial 截图:初始 Currently After zooming in 当前放大后 Expected after zooming in or out 放大或缩小后预期
To position precisely on the feature, but in the world you clicked on: 要在特征上精确定位,但在世界上您单击了:
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]]);
You are setting the coordinates of the popup to the event-coordinates which can be slightly off. 您正在将弹出窗口的坐标设置为可以稍微偏离的事件坐标。
Try setting the coordinates of the popupt to the coordinates of the feature like: 尝试将弹出窗口的坐标设置为要素的坐标,例如:
let coordinate = feature.getGeometry().getCoordinates();
https://jsfiddle.net/2jf56q0g/ https://jsfiddle.net/2jf56q0g/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.