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

ReBeX

已于 2024-01-10 10:14:58 修改

阅读量959

点赞数 11

分类专栏：【WebGIS实例】文章标签： javascript 开发语言 ecmascript

于 2024-01-09 16:11:02 首次发布

本文链接：https://blog.csdn.net/ReBeX/article/details/135483141

版权

【WebGIS实例】专栏收录该内容

15 篇文章 8 订阅

订阅专栏

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

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