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

WebGIS小智

已于 2024-05-20 13:49:41 修改

阅读量1.1k

点赞数

分类专栏： GIS原理系列 MapBox高阶教学文章标签：前端 javascript 开发语言

于 2023-11-23 16:05:25 首次发布

本文链接：https://blog.youkuaiyun.com/lz5211314121/article/details/134577606

版权

GIS原理系列同时被 2 个专栏收录

40 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

MapBox高阶教学

17 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

本文讨论了在Mapbox中遇到点图层和面图层点击事件重叠的问题，即点击点位时面图层的弹窗也会出现。为了解决这个问题，提出了两种解决方案：1. 使用`e.preventDefault()`阻止事件穿透，配合在面图层事件中检查`e.defaultPrevented`来避免执行；2. 利用`queryRenderedFeatures()`查询多个图层的要素信息，通过状态标记法判断是否已点击点图层。这两种方法都旨在阻止不期望的点击行为，而非仅区分图层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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