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

你可能感兴趣的:(【WebGIS实例】,javascript,开发语言,ecmascript)