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, // 允许事件传递到地图,防止鼠标移动到悬浮图标上无法操作地图
});
标签:lable,鼠标,overlay,Overlay,地图,openlayers,div,图标
From: https://www.cnblogs.com/ZerlinM/p/18315508