基于MapBox的路线（A->B）聚类实现问题

你的需求（基于焦点对起点-终点路线进行聚类分组）在react-map-gl + mapbox-gl的技术栈下完全可以实现，核心是把路线转化为可聚类的锚点，再结合Mapbox的聚类能力或自定义分组逻辑来完成。

核心实现步骤 #

1. 预处理路线数据，生成聚类锚点 #

Mapbox的原生聚类功能针对点要素设计，所以需要先把每条起点-终点路线转化为一个能代表其位置的点：

• 最常用的是计算路线的中点坐标：( (start.lat + end.lat)/2, (start.lng + end.lng)/2 )
• 如果需要严格围绕焦点分组，也可以用路线的起点/终点，或者计算路线与焦点的最近点作为锚点
• 给每个锚点绑定原路线的完整数据（起点、终点、ID等），方便后续关联渲染

2. 两种聚类方案选择 #

方案一：使用Mapbox原生动态聚类

适合需要根据地图缩放层级自动合并/拆分聚类的场景：

• 通过react-map-gl的Source组件配置cluster: true，设置聚类半径、最大缩放层级等参数
• 配置对应的聚类图层（显示聚合点、聚合数量）和非聚类点图层
• 点击聚合点时，可以通过Mapbox的事件获取组内所有锚点，进而渲染对应的路线

方案二：自定义焦点分组

适合围绕固定焦点（比如你提到的2个固定聚类中心）进行分组的场景：

• 先定义好所有焦点的坐标集合，比如const focusPoints = [{lat: 37.8, lng: -122.4}, {lat: 37.7, lng: -122.3}]
• 遍历每条路线，计算其锚点到每个焦点的距离（用Haversine公式计算球面距离），将路线分配给最近的焦点组
• 给每条路线标记所属组ID和组样式（比如颜色），直接渲染不同组的路线即可

3. 渲染聚类后的路线 #

• 如果用原生聚类：点击聚合点后，可以在地图上高亮显示组内所有路线，或者弹出信息面板展示路线数量
• 如果用自定义分组：直接给不同组的路线设置差异化样式（颜色、线宽），同时在焦点位置添加标记（比如显示“X条路线”）

极简代码示例（自定义焦点分组） #

import { Map, Source, Layer } from 'react-map-gl';
import mapboxgl from 'mapbox-gl';

// 模拟路线数据
const rawRoutes = [
  { start: { lat: 37.8, lng: -122.4 }, end: { lat: 37.81, lng: -122.41 } },
  { start: { lat: 37.7, lng: -122.3 }, end: { lat: 37.71, lng: -122.31 } },
  // 更多路线...
];

// 定义两个焦点
const focusPoints = [
  { id: 1, lat: 37.8, lng: -122.4, color: '#ff0000' },
  { id: 2, lat: 37.7, lng: -122.3, color: '#00ff00' }
];

// 计算两点间球面距离（简化版）
const calculateDistance = (lat1, lng1, lat2, lng2) => {
  const R = 6371; // 地球半径（km）
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLng = (lng2 - lng1) * Math.PI / 180;
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
    Math.sin(dLng/2) * Math.sin(dLng/2); 
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  return R * c;
};

// 给路线分配分组
const groupedRoutes = rawRoutes.map(route => {
  const midLat = (route.start.lat + route.end.lat)/2;
  const midLng = (route.start.lng + route.end.lng)/2;
  // 找到最近的焦点
  const closestFocus = focusPoints.reduce((prev, curr) => {
    const prevDist = calculateDistance(midLat, midLng, prev.lat, prev.lng);
    const currDist = calculateDistance(midLat, midLng, curr.lat, curr.lng);
    return currDist < prevDist ? curr : prev;
  });
  return { ...route, groupId: closestFocus.id, color: closestFocus.color };
});

// 路线图层配置
const routeLayer = {
  id: 'grouped-routes',
  type: 'line',
  paint: {
    'line-color': ['get', 'color'],
    'line-width': 2,
    'line-opacity': 0.7
  }
};

// 焦点标记图层配置
const focusMarkerLayer = {
  id: 'focus-markers',
  type: 'circle',
  paint: {
    'circle-color': ['get', 'color'],
    'circle-radius': 10,
    'circle-stroke-width': 2,
    'circle-stroke-color': '#fff'
  }
};

export default function RouteClusterMap() {
  return (
    <Map
      mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
      initialViewState={{ longitude: -122.35, latitude: 37.75, zoom: 11 }}
      mapStyle="mapbox://styles/mapbox/light-v11"
    >
      {/* 路线数据源 */}
      <Source
        id="routes"
        type="geojson"
        data={{
          type: 'FeatureCollection',
          features: groupedRoutes.map(route => ({
            type: 'Feature',
            properties: { color: route.color },
            geometry: {
              type: 'LineString',
              coordinates: [
                [route.start.lng, route.start.lat],
                [route.end.lng, route.end.lat]
              ]
            }
          }))
        }}
      >
        <Layer {...routeLayer} />
      </Source>

      {/* 焦点数据源 */}
      <Source
        id="focus-points"
        type="geojson"
        data={{
          type: 'FeatureCollection',
          features: focusPoints.map(point => ({
            type: 'Feature',
            properties: { color: point.color },
            geometry: { type: 'Point', coordinates: [point.lng, point.lat] }
          }))
        }}
      >
        <Layer {...focusMarkerLayer} />
      </Source>
    </Map>
  );
}

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