MapboxGL地图组件重叠标记点分散方案求助：偏移同时保留原始点位标记

你需要实现的是标记点散开算法（spiderfy），和常见地图聚合标记点击后展开的逻辑类似，具体实现步骤如下：

• 第一步：先对所有标记点按经纬度分组，坐标相同或距离小于指定阈值的点归为同一组，阈值可以根据当前地图zoom等级动态调整
• 第二步：每组数量小于2的直接正常渲染原标记，大于等于2的做特殊处理：
  1. 先在原经纬度位置渲染一个更小的中心标记，尺寸建议设为原标记的1/2大小
  2. 对组内的每个点生成随机偏移坐标，你可以用极坐标转平面坐标的方式生成均匀分布的偏移，避免偏移后的点再次重叠：

  // 偏移计算函数，center是原经纬度，index是组内点的序号，count是组内总点数，offsetRadius是偏移半径
  const getOffsetPosition = (center, index, count, offsetRadius = 0.0005) => {
    // 每个点的角度均匀分布，也可以改成随机角度避免固定排列
    const angle = (index / count) * 2 * Math.PI + Math.random() * 0.5
    const offsetLon = offsetRadius * Math.cos(angle)
    const offsetLat = offsetRadius * Math.sin(angle)
    return {
      longitude: center.longitude + offsetLon,
      latitude: center.latitude + offsetLat
    }
  }
  

• 第三步：修改现有渲染逻辑，处理分组后的点：
  首先对posts做分组处理：

  const groupMarkers = (posts, threshold = 0.0001) => {
    const groups = []
    posts.forEach(post => {
      // 查找是否已有距离小于阈值的组
      const matchedGroup = groups.find(group => {
        const center = group.center
        const lonDiff = Math.abs(center.longitude - post.longitude)
        const latDiff = Math.abs(center.latitude - post.latitude)
        return lonDiff < threshold && latDiff < threshold
      })
      if (matchedGroup) {
        matchedGroup.items.push(post)
      } else {
        groups.push({
          center: {longitude: post.longitude, latitude: post.latitude},
          items: [post]
        })
      }
    })
    return groups
  }
  // 在组件内调用分组函数，可以监听viewport.zoom变化重新分组，适配不同缩放等级
  const markerGroups = useMemo(() => groupMarkers(posts || []), [posts, viewport.zoom])
  

  然后修改渲染部分的代码：

  {markerGroups.map((group, groupIndex) => (
    <React.Fragment key={groupIndex}>
      {/* 渲染原位置的小标记 */}
      {group.items.length >=2 && (
        <Marker
          latitude={group.center.latitude}
          longitude={group.center.longitude}
        >
          <button className="center-marker-btn">
            <Icon
              style={{
                width: 24,
                height: 24
              }}
              alt="中心标记"
            />
          </button>
        </Marker>
      )}
      {/* 渲染偏移后的标记 */}
      {group.items.map((item, index) => {
        const position = group.items.length === 1 
          ? group.center 
          : getOffsetPosition(group.center, index, group.items.length)
        return (
          <Marker
            key={item.id}
            latitude={position.latitude}
            longitude={position.longitude}
          >
            <button className="marker-btn">
              <Icon
                style={{
                  width: 48,
                  height: 48
                }}
                onMouseEnter={() => {
                  setSelectedProperty(item);
                  setIsPopupShown(true);
                }}
                onMouseOut={() => {
                  setSelectedProperty(null);
                  setIsPopupShown(false);
                }}
                alt="Marker"
              />
            </button>
          </Marker>
        )
      })}
    </React.Fragment>
  ))}
  

• 可选优化：可以根据当前地图zoom等级动态调整偏移半径和分组阈值，zoom越大偏移半径越小，避免放大后点偏移太远。如果需要完全随机的偏移位置，也可以把角度改成完全随机，同时增加碰撞检测逻辑，保证偏移后的点不会重叠。

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