记录一下openayers overlay的坑

357 阅读1分钟

现在用的是react16.3.2+openlayers5.3.2。

用overlayers的时候发现有一个问题,给overlay里面的元素一个点击事件并没有什么卵用,不会触发到这个点击事件。

new Overlay({    autoPan: true,    stopEvent:true,    offset:[20,-20],    autoPanAnimation: {      duration: 250    }});

这个是我的overlay的设置,element属性是在后面dom渲染完成之后再给setElement的。

查看了一下openlayers中overlay.js的源码以及网上大佬的文章:blog.csdn.net/qq_29722281…

终于发现了这个问题所在,当stopEvent元素设置为true的时候(不设置默认为true),给element里面的元素设置事件时,overlay会将所有的事件都给阻止了

关键就是这个getOverlayContainerStopEvent函数,通过查看这个函数可以再往下发现,将单击,双击,移动等事件都给阻止了。

可以看这个listen函数和stopPropagation函数,后面的函数比较简单,就是阻止了默认事件,listen函数较复杂,简单来说就是监听上面的数组里面的事件,监听到了就阻止。

因此,如果单纯想让overlay里面元素的事件生效可以让stopEvent属性为false。

我个人认为openlayers将overlay里面的事件给阻止的原因可能是如果overlay里面点击的那个元素和海图上面点击的元素重合的话会将两个元素的点击事件都给触发了。

记录一下我遇到的问题!!!