如何让D3.js的geoPath在Leaflet地图上绘制大圆路径？

问题原因 #

你当前使用d3.geoTransform自定义投影时，仅对GeoJSON中的原始坐标点进行平面投影转换，没有对LineString执行大圆插值逻辑。而D3内置的地理投影（如d3.geoMercator）会自动为LineString生成大圆路径所需的插值点，因此能呈现弧形效果。

解决方案 #

通过D3的d3.geoInterpolate函数手动生成大圆上的插值点，将原始LineString转换为包含足够多中间点的路径，再交由D3绘制。

步骤1：编写大圆插值函数 #

该函数接收LineString几何对象，生成包含大圆插值点的新LineString：

function interpolateGreatCircle(lineString, steps = 50) {
  const coords = lineString.coordinates;
  const interpolatedCoords = [];
  
  // 遍历每一段原始线段
  for (let i = 0; i < coords.length - 1; i++) {
    const start = coords[i];
    const end = coords[i + 1];
    // 创建大圆插值器
    const interpolator = d3.geoInterpolate(start, end);
    
    // 生成指定数量的中间点
    for (let s = 0; s <= steps; s++) {
      interpolatedCoords.push(interpolator(s / steps));
    }
  }
  
  return {
    ...lineString,
    coordinates: interpolatedCoords
  };
}

步骤2：修改数据处理与路径绘制逻辑 #

在原有代码中，替换GeoJSON数据为插值后的版本，并绑定到D3选择器：

// 替换原有的areaPaths数据绑定部分
const interpolatedFeatures = geojson_linestring.features.map(feature => {
  if (feature.geometry.type === 'LineString') {
    return {
      ...feature,
      geometry: interpolateGreatCircle(feature.geometry)
    };
  }
  return feature;
});

const areaPaths = g.selectAll('path')
  .data(interpolatedFeatures)
  .join('path')
  .attr('fill', 'none') // LineString无需填充，修正原有设置
  .attr('fill-opacity', 0.3)
  .attr('stroke', 'black')
  .attr("z-index", 3000)
  .attr('stroke-width', 2.5)
  .on("mouseover", function(){
    d3.select(this).attr("stroke", "red") // 鼠标悬停修改线条颜色而非填充
  })
  .on("mouseout", function(){
    d3.select(this).attr("stroke", "black")
  })

步骤3：优化插值精度（可选） #

根据地图缩放级别动态调整插值步数，在低缩放时减少点数量提升性能，高缩放时增加点数量保证平滑度：

const onZoom = () => {
  const zoomLevel = map.getZoom();
  // 缩放级别越高，插值步数越多，上限可根据需求调整
  const steps = Math.max(20, zoomLevel * 4);
  
  const interpolatedFeatures = geojson_linestring.features.map(feature => {
    if (feature.geometry.type === 'LineString') {
      return {
        ...feature,
        geometry: interpolateGreatCircle(feature.geometry, steps)
      };
    }
    return feature;
  });
  
  areaPaths.data(interpolatedFeatures).attr('d', pathCreator);
}

最终效果 #

修改后，D3绘制的LineString会基于大圆插值点生成弧形路径，与你自定义地图的大圆效果一致。

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