Question

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

Answer 1

目前尚不清楚您遇到了什么问题。如果你有三个图层（layer1，layer2，layer3），其中顶层是layer1，你只想响应它的点击事件，你可以这样做：

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

如果这不是您的意思，或许澄清您的意思＆＃34;重叠层＆＃34;和＆＃34;希望仅针对顶部＆＃34;上的图层调用该点击处理程序。另外，请提供您当前的代码，并举例说明问题所在。

修改

因此，您需要一个适用于多个图层的单击事件，并与最顶层的项目进行交互：

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

如果您需要不同的行为，具体取决于点击的图层：

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

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

1 个答案: