OpenLayers-要素属性信息简单弹窗

这里要引入   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

来配置一些参数来设置弹窗的样式、相对位置、偏移量等

本章可以搭配之前的要素识别一章的内容，做一些简单的识别或查询功能