Question

我在我的客户项目中使用Mapbox。在这里，我遇到了点击事件的一个问题。

实际上，我已经使用两层来加载重叠层2上的两种不同类型的数据层2。并且每一层都有带有相对点击事件的标记。

问题是，当layer1和layer2标记都在同一坐标中时，layer2标记位于重叠layer1的标记上。但是，在单击layer2标记时，它也会触发layer1 click事件。如何预防呢？

我的代码：

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

有人可以帮助我吗？

Answer 1

使用不带图层参数https://www.mapbox.com/mapbox-gl-js/api/#map#on的map.on版本，然后过滤掉所需的图层并从要素列表中选择一个要素。

Answer 2

我认为您正在寻找的是event.stopPropagation

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

它将阻止点击“冒泡”超过一层。

标记点击事件不会在图层之间覆盖

2 个答案: