openlayers在地图上使用Overlay渲染图标无法操作地图问题

ol对于在地图上渲染图标，并且图标可以随着地图的缩放层级自适应，跟随地图移动，ol是提供了一个很好用的方法的---overlay

代码如下：

//定义标注对象
let lable_div = document.createElement('div')
lable_div.className = [s.labelDiv]

let offsetY = 0
let _classname = ''
_classname = s.highClass
offsetY = -62
lable_div.innerHTML = `<div class=${s.con}>
    <div class=${s.title}><b> ${obj?.name} </b></div> 
    <div>水位(m)：${obj?sw}</div> 
    </div>`

const lable_overlay = new Overlay({
    element: lable_div,
    offset: [0, offsetY],
    positioning: 'top-center',
    className: _classname,
});
lable_overlay.setPosition(coordinate);
Global.map.addOverlay(lable_overlay);

解决

但会有一个问题，那就是当鼠标移入到该图标上后，就无法操作地图了，无论是双击放大、滚轮缩放、鼠标拖动地图这些都会失效，起因是当前鼠标作用到了overlay所在的dom盒子上去了，没有作用到地图所在盒子的canvas上面。
有一个配置项可以解决这个问题 ：
当你将一个overlay添加到地图上时，默认情况下，它会阻止鼠标事件透传到地图上，这就导致了无法拖动地图或进行缩放操作。这是因为overlay的元素会遮挡地图，并捕获所有与其相关的事件。
如果你希望在拖动overlay时仍然能够拖动地图或进行缩放操作，可以通过设置overlay的stopEvent属性为false来解决这个问题。这样做会允许鼠标事件继续传递到地图上。

以下代码片段，展示如何设置overlay的stopEvent属性：

const lable_overlay = new Overlay({
    element: lable_div,
    offset: [0, offsetY],
    positioning: 'top-center',
    className: _classname,
    stopEvent: false, // 允许事件传递到地图，防止鼠标移动到悬浮图标上无法操作地图
});