Mapbox建筑图层建筑分离，hover高亮仅部分选中问题求助

核心原因 #

Mapbox默认建筑图层里，不少实际完整的建筑会被拆成多个独立的Polygon要素（比如按楼层、建筑区块划分），你的hover逻辑只触发单个要素高亮，自然会出现部分区域亮的情况。

具体解决方案 #

1. 利用官方数据的关联标识 #

如果用的是Mapbox官方的mapbox-streets-v8图层，要素属性里的building_id是同一建筑所有子要素共享的标识，直接用它来关联所有属于同一建筑的部分。

2. 修改hover高亮逻辑 #

先提前创建一个用于高亮的图层（比如叫buildings-highlight），样式设成你要的高亮效果，初始过滤条件设为不显示任何要素。然后修改交互逻辑：

// 监听建筑图层的鼠标移动事件
map.on('mousemove', 'buildings', (e) => {
  if (e.features.length > 0) {
    // 获取当前hover要素的统一建筑ID
    const targetId = e.features[0].properties.building_id;
    // 过滤出所有同ID的建筑要素，设置高亮
    map.setFilter('buildings-highlight', ['==', 'building_id', targetId]);
  }
});

// 鼠标移出时取消高亮
map.on('mouseleave', 'buildings', () => {
  map.setFilter('buildings-highlight', ['==', 'building_id', '']);
});

3. 自定义数据预处理（如果官方字段没用） #

如果你的建筑数据没有统一关联ID，用QGIS这类工具把属于同一建筑的相邻多边形合并，或者手动给它们加统一的标识字段，再上传成Mapbox自定义图层使用。

额外提示 #

• 调试时可以用Mapbox的要素检查工具，查看hover要素的属性，确认有没有共享的建筑标识字段
• 数据量大会影响性能的话，提前把要素按建筑ID分组存在对象里，hover时直接取对应分组的要素集合

内容的提问来源于stack exchange，提问作者Samyar