Mapbox中点图层和面图层点击事件重叠,禁止点击穿透方案

使用mapbox的小伙伴们可能都遇到过这个问题,就是当地图上有两个图层,一个面图层一个点图层,二者相重合的时候。假设我们想点击点位弹窗展示一些内容,也想点击面图层的时候弹窗展示一些内容,这时候一个有意思的问题就产生了,就是点击点位弹窗的时候面图层对应的弹窗也会弹出来,就像这样(为了大家看的清楚我将点的弹窗偏移一些)

Mapbox中点图层和面图层点击事件重叠,禁止点击穿透方案_第1张图片

因为按照mapbox官方的写法,我们会这样写代码:

map.on("click", "point", (e) => {
        const dom = "
我是点弹窗
"; const feature = e.features[0]; const popup = new mapboxgl.Popup({ offset: [30, 30] }) .setHTML(dom) .setLngLat(feature.geometry.coordinates) .addTo(map); }); map.on("click", "polygon", (e) => { const dom = "
我是面弹窗
"; const popup = new mapboxgl.Popup() .setHTML(dom) .setLngLat([e

你可能感兴趣的:(GIS原理系列,MapBox高阶教学,前端,javascript,开发语言)