Mapbox gl js - 重叠图层和鼠标事件处理

是否有任何清晰可靠（和描述）的机制来控制 Mapbox GL JS 中重叠图层的鼠标事件？例如，我有 3 个重叠的层，但希望仅对顶部的层调用单击处理程序，而不是对所有 3 个层调用 - 这是否可能？目前，作为解决方法，我跟踪 MouseEnter 和 MouseLeave 事件并根据该事件调用适当的处理程序。但我根本不喜欢这个解决方案，因为它用多余的逻辑破坏了我的代码。

目前还不清楚您遇到了什么问题。如果您有三个图层（layer1、layer2、layer3），其中顶层是layer1，并且您只想响应其单击事件，则可以：

map.on('click', 'layer1', function(e) {...})

如果这不是您的意思，也许可以澄清“重叠层”和“希望仅针对顶部的层调用单击处理程序”的含义。另外，请提供您当前的代码，以及问题所在的示例。

EDIT

单击事件可以应用于单击点下方的所有图层，因此如果您想在单个单击事件中捕获多个图层，并识别单击的最上面的项目：

map.on('click', function(e) {
  let f = map.queryRenderedFeatures(e.point, { layers: ['layer1','layer2','layer3'] });
  if (f.length) {
    console.log(f[0]);  //topmost feature
  }
});

但是，如果您只想捕获单个图层的单击事件，您可以通过两种方式指定该图层：

map.on('click', function(e) {
  let f = map.queryRenderedFeatures(e.point, { layers: ['layer1'] });
  if (f.length) {
    console.log(f[0]);
    return;
  } 
  f = map.queryRenderedFeatures(e.point, { layers: ['layer2'] });
  if (f.length) {
    console.log(f[0]);
    return;
  }
  f = map.queryRenderedFeatures(e.point, { layers: ['layer3'] });
  if (f.length) {
    console.log(f[0]);
  }
});

或者如上面的原始答案：

map.on('click', 'layer1', function(e) {
  let f = map.queryRenderedFeatures(e.point, { layers: ['layer1'] });
  if (f.length) {
    console.log(f[0]);
  } 
  return;
});