我正在尝试显示包含单击鼠标位置的叠加层。我在这里参考了openlayers官方网页中的示例， 但是当我运行代码时，会显示console.log消息，显示鼠标单击的坐标，但不会出现覆盖或弹出窗口。请让我知道下面发布的代码中缺少什么
代码：
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：
.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: "✖";
}