Mapbox GL JS:当层堆叠(z-index)时，在mouseenter和mouseleave上创建悬停效果时出现

Question

我正在努力创建一种悬停效果，我认为这种效果应该非常简单，也是使用mapbox gl-js的开发人员的常见用例。

我有一张有两层的地图。图层1是一个使用图标在地图上标记点的符号图层。第2层是一个符号层，在第1层的图标顶部显示分数(文本)。

这是一段描述问题的视频

我使用过滤alahttps://www.mapbox.com/mapbox-gl-js/example/hover-styles/来监听鼠标事件，并在适当的时候隐藏和显示第2层。

在我的代码中，我正在侦听第1层上的mouseenter和mouseleave事件。我的问题是，当第2层通过过滤器的更改显示时，它会导致从第1层触发mouseleave事件，因为第2层位于第1层之上。当鼠标在第2层上移动时，当鼠标事件穿过第2层的文本行到达第1层时，第1层的mouseenter和mouseleave事件会不断触发。这会导致第2层在显示和隐藏时闪烁。

我尝试过的东西：

• 我尝试使用'before'参数https://www.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/

• 我试图创建一个新的层(第3层)，它位于第1层和第2层的顶部，包含一个与第1层大小相同的透明图标，并在第3层上侦听鼠标事件。

• 我尝试过通过setStyle(而不是使用过滤器)来切换第2层的可见性。

• 我尝试将第2层的内容作为第1层的文本字段，并寻找一种在悬停时显示地图框层的文本域的方法(无法确定……这可能吗？)

当通过过滤或样式更改修改层时，Mapbox gl-js似乎会重新绘制层顺序。重画似乎总是将受影响的层放在顶部！？

如有任何指示或建议，我们将不胜感激。被难住了！！

感谢阅读！

Answer 1

mouseenter事件可能会出现问题，原因有很多，包括您注意到的原因。

更可靠的方法是使用mousemove事件，然后直接调用queryRenderedFeatures()。类似于：

var lastFeatureId;
map.on("mousemove", function (e) {
var fs = queryRenderedFeatures(e.point, { layers: ['myiconlayer']});
if (fs.length > 0) {
f = fs[0];
if (f.id !== lastFeatureId) {
lastFeatureId = f.id;
// some visual effect now that the mouse is over a new layer.
}
}

});