我正在使用我的客户项目之一的 Mapbox。在这里，我遇到了点击事件的一个问题。
实际上，我使用两层来加载两种不同类型的数据，第 2 层重叠在第 2 层之上。每个层都有带有相关点击事件的标记。
问题是当 layer1 和 layer2 标记都在同一坐标中时 layer2 标记在重叠 layer1 的标记上。但是，当点击 layer2 标记时，它也会触发 layer1 点击事件。如何防止这种情况？
我的代码：
map.addLayer({
id: 'layer1',
type: 'circle',
source: 'allPanels',
'source-layer': self.mapLayers['allPanels']['source-layer'],
minzoom: 7,
paint: {
'circle-opacity': 0.2,
'circle-radius': {
'base': 2,
'stops': [[9, 2], [11, 4]]
},
'circle-color': '#878787'
}
});
map.on('mouseenter', 'layer1', function () {
self.map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'layer1', function () {
self.map.getCanvas().style.cursor = '';
});
map.on('click', 'layer1', function(){
console.log("clicked layer 1")
});
map.addLayer({
id: 'layer2',
type: 'circle',
source: 'allPanels',
'source-layer': self.mapLayers['allPanels']['source-layer'],
minzoom: 7,
paint: {
'circle-opacity': 0.2,
'circle-radius': {
'base': 2,
'stops': [[9, 2], [11, 4]]
},
'circle-color': '#878787'
}
});
map.on('mouseenter', 'layer2', function () {
self.map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'layer2', function () {
self.map.getCanvas().style.cursor = '';
});
map.on('click', 'layer2', function(){
console.log("clicked layer2")
});
任何人都可以帮助我吗？