这里要引入 Overlay
An element to be displayed over the map and attached to a single map location. Like Control, Overlays are visible widgets. Unlike Controls, they are not in a fixed position on the screen, but are tied to a geographical coordinate, so panning the map will move an Overlay but not a Control.
代码如下:
let ele = document.getElementById('popup') //div元素标签
let popup = new ol.Overlay({
element: ele,
});
let select = new ol.interaction.Select({});
map.addInteraction(select);
select.on('select', function (e) {
if (e.selected.length > 0) {
console.log('选中:', e.selected)
ele.innerHTML = ''
for (item in (e.selected)[0].values_) {
ele.innerHTML += item + ':' + (e.selected)[0].values_[item] + '\n'
}
popup.setPosition(e.mapBrowserEvent.coordinate);
map.addOverlay(popup);
}
else {
console.log('取消选中!')
map.removeOverlay(popup);
}
})
对此可以参照官方文档:OpenLayers v8.1.0 API - Class: Overlay
来配置一些参数来设置弹窗的样式、相对位置、偏移量等
本章可以搭配之前的要素识别一章的内容,做一些简单的识别或查询功能