openlayer鼠标移入和鼠标点击后提示框展示信息

鼠标移入点击地图 提示框展示信息

移入事件：pointermove

点击事件：click 

前端代码

引入bootstrap.js

<div id="map">
	<div id="popup"></div>
</div>

 

const element_popup = document.getElementById('popup');
const popup = new ol.Overlay({
	element : element_popup,
	positioning : 'center-center',
});

map.on('pointermove', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
        return feature;
    });
    if (feature) {
        var coordinates = feature.getGeometry().getCoordinates();
        popup.setPosition(coordinates);
        $(element_popup).popover({
            // title: "地理信息", //设置 弹出框 的标题
            trigger : 'click|hover', // 触发方式
            placement : 'top',
            html : true,
            container : 'body',
            content : feature.get('name')
        });
        // console.log(feature.get('name'));
        map.addOverlay(popup);
        $(element_popup).popover('show');
    } else {
        $(element_popup).popover('destroy');
    }

});