如何忽略mapbox图层上的鼠标事件

Question

我已经在我的Mapbox地图上构建了一个标记，当用户将鼠标放在它上面时，它看起来就像这样：

​

​

我遇到的问题是文档图标是一个独立于背景图钉的图层。这是为了让用户可以上传自定义图标。当使用mouseover和mouseleave事件在背景别针图层上创建悬停弹出窗口时，当用户将鼠标悬停在图标层上时，弹出窗口会闪烁。这是因为用户在技术上离开了背景引脚层。

我知道有一些javascript黑客可以做到这一点，但我真正想要的是一种“忽略”mapbox层事件的方法。这个是可能的吗？

编辑:这里的标记被渲染为Mapbox层，而不是HTML标记，因此使用画布绘制(我相信)，所以使用CSS忽略事件是不可能的。

Answer 1

您可以在不指定层的情况下注册mousemove事件，而不是按层注册事件，并使用queryRenderedFeatures查看游标是否在两个层中的任何一个层上。

另一种方法是使用像https://www.mapbox.com/mapbox-gl-js/example/add-image/这样的技术，并创建一个合成的图像客户端，这样您就只有一个层。

Answer 2

使用CSS忽略鼠标事件的一种简单方法是使用样式属性pointer-events:none，这不会在元素上触发任何指针(鼠标)事件