D3世界地图部分国家质心偏移问题求助

你的问题核心是d3.geoPath().centroid()计算的是国家所有领土（包括飞地）的几何平均中心，飞地会拉偏这个位置，导致标记出现在非主领土区域。下面是几个可行的解决办法：

1. 基于主领土计算质心（通用方案） #

遍历国家的MultiPolygon几何，筛选出面积最大的多边形（主领土），只计算该区域的质心：

修改handleMouseOver函数：

const handleMouseOver = (feature) => (e) => {
  let targetGeometry = feature.geometry;

  // 处理MultiPolygon类型，提取面积最大的主领土
  if (targetGeometry.type === "MultiPolygon") {
    const largestPolygon = targetGeometry.coordinates.reduce((prev, curr) => {
      const prevArea = d3.geoArea({ type: "Polygon", coordinates: prev });
      const currArea = d3.geoArea({ type: "Polygon", coordinates: curr });
      return prevArea > currArea ? prev : curr;
    });
    targetGeometry = { type: "Polygon", coordinates: largestPolygon };
  }

  const coordinates = path.centroid(targetGeometry);
  setTooltipCoordinates(coordinates);
}

d3.geoArea计算的是地理实际面积，不受投影变形影响，能精准识别主领土。

2. 预定义特定国家的质心（精准方案） #

如果仅少数国家有问题，可以手动配置这些国家的主领土经纬度，转换为投影坐标后使用：

// 键为world-atlas中feature的ISO 3166-1三位代码
const customCentroids = {
  "NOR": [10.4515, 60.4720], // 挪威主领土经纬度
  "USA": [-95.7129, 37.0902], // 美国本土经纬度
  "FRA": [2.2137, 46.2276]    // 法国本土经纬度
};

const handleMouseOver = (feature) => (e) => {
  let coordinates;
  const countryId = feature.id;
  if (customCentroids[countryId]) {
    // 手动经纬度转换为投影坐标
    coordinates = projection(customCentroids[countryId]);
  } else {
    coordinates = path.centroid(feature);
  }
  setTooltipCoordinates(coordinates);
}

3. 优化投影方案（辅助改善） #

Mercator投影在高纬度区域变形严重，换成**自然地球投影（geoNaturalEarth1）**能让地图显示更均衡，同时配合上述质心方案效果更好：

const projection = d3.geoNaturalEarth1()
  .center([0, 60])
  .fitSize([900, 400], mapJson); // 自动适配SVG viewBox尺寸

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