使用getClusterExpansionZoom缩放集群时几何位置偏移原因咨询

这其实是大多数地图集群组件（比如Mapbox GL JS的Cluster Layer）的默认设计导致的——集群的几何位置不是原始要素坐标的精确聚合点，而是对齐到了当前缩放级别下的瓦片网格单元格中心。

具体拆解一下原因：

• 当地图渲染集群时，会按照当前缩放等级把地图切分成固定尺寸的瓦片网格。每个集群本质是对应瓦片网格内所有要素的集合，它的位置会被自动设置为该瓦片单元格的中心点，而非原始点的平均坐标或某个原始点的坐标。
• 你提到的两个原始点坐标非常接近，但在低缩放级别下，它们所在的瓦片单元格中心和原始点坐标存在细微偏差，这就造成了集群位置的偏移。
• 当clusterMaxZoom和maxZoom都设为17时，触发getClusterExpansionZoom后，地图会先跳转到集群对应的瓦片中心，而非原始点的位置，所以看起来没有正确居中。

如果想要解决这个问题，让缩放后地图准确居中到原始要素位置，可以试试这两个方法：

• 不要直接用集群要素的几何位置设置地图中心点，而是在点击集群时，先获取该集群包含的所有原始要素坐标，计算它们的平均中心点，再将地图缩放并居中到这个平均点。
• 部分集群库可能提供了禁用瓦片网格对齐的配置项（不过多数库默认没有），优先推荐第一种方法。

给你一个简单的伪代码示例参考：

map.on('click', 'cluster-layer', (e) => {
  const clusterFeatures = map.queryRenderedFeatures(e.point, {
    layers: ['cluster-layer']
  });
  const clusterId = clusterFeatures[0].properties.cluster_id;
  
  // 获取集群内的所有原始要素
  map.getSource('your-cluster-source').getClusterLeaves(clusterId, 100, 0, (err, leafFeatures) => {
    if (err) return;
    
    // 计算原始要素的平均坐标
    let avgLng = 0, avgLat = 0;
    leafFeatures.forEach(feat => {
      avgLng += feat.geometry.coordinates[0];
      avgLat += feat.geometry.coordinates[1];
    });
    avgLng /= leafFeatures.length;
    avgLat /= leafFeatures.length;
    
    // 缩放并居中到平均点
    map.easeTo({
      center: [avgLng, avgLat],
      zoom: clusterFeatures[0].properties.expansionZoom
    });
  });
});

这样调整后，就能让地图在缩放时准确居中到原始要素的位置了。

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