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

Question

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

Answer 1

不太清楚您遇到的是什么问题。如果您有三层（layer1、layer2、layer3），其中顶层是 layer1 并且您只想响应它的点击事件，您可以这样做：

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

如果这不是您的意思，也许可以澄清您所说的“重叠层”和“希望只为位于顶部的层调用点击处理程序”的意思。另外，请提供您当前的代码，并举例说明问题所在。

编辑

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

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;
});

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

Mapbox gl js - overlapping layers and mouse event handling

javascript

mapbox

mapbox-gl-js