【WebGIS实例】（12）MapboxGL解决叠加图层的点击事件冒泡

解决方法一： 监听有冲突的图层

map.on('click', 'layerName', e => {
	e.preventDefault()
	console.log('上面的图层')
	console.log('点击的要素', e.features[0])
})

// 下面的那个图层：阻止默认事件，在下面的e可以看到_defaultPrevented: false，在layerName2中写入
map.on('click', 'layerName2', e => {
	if(e.defaultPrevented)return;
	console.log('下面的图层')
	console.log('点击的要素', e.features[0])
})

解决方法二： 监听全局点击事件

  map.on('click', (e) => {
    const { point} = e;
    const clickedFeatures = map.queryRenderedFeatures(point); // 获取点击处的要素
	console.log('最上面的图层 ', clickedFeatures[0]);
    }
  })