Question

我正在努力创造一种悬停效果，我认为应该是相当紧张的，也是开发人员使用mapbox gl js的常见用例。

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

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

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

我尝试过的事情：

我尝试使用'之前'参数https://www.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/
我尝试创建一个位于第1层和第2层之上的新图层（第3层），其中包含与第1层大小相同的透明图标，并在第3层上侦听鼠标事件。 / p>
我尝试通过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.
    }
  }


});

Mapbox GL JS：堆叠图层时，无法在mouseenter和mouseleave上创建悬停效果（z-index）

1 个答案: