mapbox两个图层叠加,点击重合部分都触发事件解决方案

mapbox两个图层叠加,点击重合部分都触发事件解决方案_第1张图片
大概我们的layer两个图层是这样重合的,当你点击的时候你会发现,两个layer的popup都进行了触发:
mapbox两个图层叠加,点击重合部分都触发事件解决方案_第2张图片
我们所需要的就是如果重合 上面的图层才能触发popup 下面的不会弹框
首先我们理出我们打印顺序,我们必须将上层的打印触发事件写在上面:
在这里插入图片描述
(这里我们上层显示的是spot-layer)
在上层的spot-layer中写入:

 e.preventDefault()

阻止默认事件
在下面的project-layer中我们可以打印他的e,可以看到_defaultPrevented: false,在project-layer中写入

if(e.defaultPrevented)return;

这样我们点击重合部分只有上层layer会出现弹框,同时没有重合的时候,点击下面部分也不会有影响。

你可能感兴趣的:(mapbox)