Mapbox GL JS：堆叠图层时在mouseenter和mouseleave上创建悬停效果时出现问题（z索引）

我正在努力创建一个悬停效果，我认为这应该是一个很好的发展方向，也是使用mapbox gl js的开发人员的常见用例

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

我使用过滤ala

https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

监听鼠标事件，并在适当时隐藏和显示第2层

在我的代码中，我正在监听第1层上的

mouseenter

和

mouseleave

事件。我的问题是，当第2层通过过滤器中的更改显示时，它会导致从第1层触发mouseleave事件，因为第2层位于第1层之上。当鼠标在第2层移动时，第1层的

mouseenter

和

mouseleave

事件会在鼠标事件穿过第2层的文本行到达第1层时持续激发。这会导致第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似乎会重新绘制图层顺序。重画似乎总是把受影响的层放在上面

如有任何指示或建议，将不胜感激。很难办

---

谢谢你的阅读

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.
    }
  }


});

---

Steve Bennett非常感谢您的回复！我已尝试按照您的建议使用mapbox的

map.queryRenderedFeatures（）

函数。如果“符号”层以重叠方式堆叠，则堆栈中较低的符号层不会包含在从

map.queryRenderedFeatures（）

返回的数组中。我在“不包括由于文本或图标冲突而隐藏的符号功能”中找到了这句话。添加了“图标允许重叠”：true”和类似的属性，但没有任何效果。谢谢是的，你可能应该检查鼠标是否在文本或图标上，然后做同样的动作。@SteveBennett你能看一下吗。我需要帮助。