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

Question

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

Answer 1

目前还不清楚您遇到的问题是什么。如果您有三层(第 1 层、第 2 层、第 3 层(，其中顶层是第 1 层，并且您只想响应它的点击事件，则执行以下操作：

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