Mapbox-gl-js中getClusterLeaves返回特征无id无法调用setFeatureState

我需要实现点击集群时，将该集群下所有叶子节点的特征状态设为selected: true。一开始用getClusterLeaves获取叶子节点，尝试直接调用setFeatureState却报错：

map.getClusterLeaves(clusterId, pointCount, 0, (error, leaves) => {
  if (error) return;

  leaves.forEach((leave) => {
    map.setFeatureState(leave, {
      selected: true,
    });
  });
});

报错原因是getClusterLeaves返回的叶子特征缺少id字段，而queryRenderedFeatures返回的完整特征（包含id）就能正常调用setFeatureState。

后来发现getClusterChildren也有类似问题：
一开始调用时抛出The source 'undefined' does not exist in the map's style.，手动给特征补上source属性后，又出现新错误：Error: The feature id parameter must be provided.，确实是因为返回的特征缺少id属性。

问题根源 #

Mapbox GL 的集群相关方法（getClusterLeaves/getClusterChildren）为了性能优化，返回的是简化版特征对象，只包含集群计算所需的核心属性，不会返回原始特征的完整字段（包括顶级id）。

解决方法 #

要让setFeatureState正常工作，只需要传入包含source和feature id的对象即可，不一定需要完整特征。具体步骤如下：

1. 确保原始数据源的特征带有唯一标识
   如果是GeoJSON数据源，确保每个特征都有顶级的id字段（或在properties中存储唯一ID，比如properties.featureId）：

   {
     "type": "Feature",
     "id": "unique-id-123", // 顶级id
     "properties": {
       "name": "某点位"
     },
     "geometry": {...}
   }
   

2. 通过简化特征的属性匹配原始ID，调用setFeatureState
   利用getClusterLeaves/getClusterChildren返回特征的properties中的唯一标识，构造包含source和id的对象传入setFeatureState：

   针对getClusterLeaves：

   map.getClusterLeaves(clusterId, pointCount, 0, (error, leaves) => {
     if (error) return;
   
     leaves.forEach((leave) => {
       // 假设原始特征的id存储在leave.properties.id中，替换为你的实际唯一标识字段
       map.setFeatureState(
         {
           source: "你的数据源ID",
           id: leave.properties.id
         },
         { selected: true }
       );
     });
   });
   

   针对getClusterChildren：

   map.getClusterChildren(clusterId, (_, children) => {
     for (const child of children) {
       map.setFeatureState(
         {
           source: "你的数据源ID",
           id: child.properties.id
         },
         { selected: true }
       );
     }
   });
   

3. 备选方案：从数据源获取完整特征
   如果需要完整特征，可以通过数据源的getFeatureById方法获取：

   const source = map.getSource("你的数据源ID");
   leaves.forEach((leave) => {
     const fullFeature = source.getFeatureById(leave.properties.id);
     map.setFeatureState(fullFeature, { selected: true });
   });
   

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