React-map-GL+Maplibre聚合开关切换时地图不更新问题

该问题和MapLibre缺失属性无关，本质是react-map-gl的Source组件更新检测逻辑限制：GeoJSON类型的Source首次挂载完成后，仅修改cluster这类配置项的props值，不会自动同步到底层地图实例的Source配置上，因此不会触发视图更新。

以下两种方案均基于react-map-gl原生能力实现，无需切换到deck.gl：

• 方案一：绑定key属性强制Source重挂载（优先推荐，实现成本最低）
  将聚合开关状态绑定到Source组件的key属性上，当toggleCluster值变化时，React会自动卸载旧配置的Source实例，挂载带新聚合配置的新实例，直接触发视图同步更新。万级以内点数据量下，该方案几乎无感知性能损耗。
  核心代码参考：

  <Source
    key={`geojson-points-${toggleCluster}`}
    id="point-data-source"
    type="geojson"
    data={pointGeojsonData}
    cluster={toggleCluster}
    clusterRadius={50}
    clusterMaxZoom={14}
  >
    {/* 此处放置聚合图层、单点图层相关代码 */}
  </Source>
  

• 方案二：调用地图实例API手动更新配置（适合十万级以上大数据量场景）
  如果点数据量较大，不希望频繁销毁重建Source实例，可以在拿到地图实例后，监听toggleCluster状态变化，直接调用MapLibre原生API更新Source的聚合配置，手动触发重绘。
  核心代码参考：

  import { useMap } from 'react-map-gl';
  
  function MapComponent() {
    const [toggleCluster, setToggleCluster] = useState(true);
    const { current: map } = useMap();
  
    useEffect(() => {
      const source = map?.getSource('point-data-source');
      if (!source) return;
      // 更新聚合配置
      source.setClusterOptions({
        cluster: toggleCluster,
        clusterRadius: 50,
        clusterMaxZoom: 14
      });
      // 触发图层重绘
      map.triggerRepaint();
    }, [toggleCluster, map]);
  
    return (
      // 地图、Source、图层相关渲染逻辑
    )
  }
  

切换聚合状态时，建议同步给聚合图层、非聚合单点图层增加对应显示过滤规则：比如开启聚合时隐藏未聚合的单点渲染，关闭聚合时隐藏聚合圈层、聚合数量标注图层，避免出现渲染残留。

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