[英]how to show a pop-up/overlay window
i am trying to show an overlay containing the position of where the mouse is clicked.我正在尝试显示包含单击鼠标的 position 的叠加层。 i referred to the example in openlayers official webpage here but when i run the code, the console.log message is displayed showing the coordinates of where the mouse was clicked, but the overlay or the pop-up window never shows up.
我在这里参考了openlayers官方网页中的示例,但是当我运行代码时,会显示console.log消息,显示鼠标单击的坐标,但覆盖或弹出窗口window永远不会出现。 please let me know what is missing in the code posted below
请让我知道下面发布的代码中缺少什么
code :代码:
private visualisePolygonsAsMVTTiles(siteID,threshold,visualizationOperationID) {
/**
* Elements that make up the popup.
*/
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
const overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
this.map.on('singleclick', function (evt) {
console.log(evt.coordinate)
const coordinate = evt.coordinate;
const hdms = toStringHDMS(toLonLat(coordinate));
content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>';
overlay.setPosition(coordinate);
});
.css : .css :
.ol-popup {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
i found it out.我发现了。 i just did not add the overlay to the map as follows:
我只是没有将覆盖添加到 map,如下所示:
this.map.addOverlay(overlay)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.