如何忽略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这不会触发元素上的任何指针（鼠标）事件