D3地图绘制LineString时两点过远出现跨地图穿越问题如何解决

出现这个问题的核心是D3的地理投影默认会计算两点之间的大圆最短路径，当两点经度差超过180度时，投影会自动选择跨国际日期变更线的更短路径，就会出现线条从地图一侧穿到另一侧的情况。

可以通过以下几种方式强制沿指定方向绘制路径：

• 方法1：调整坐标经度值，强制路径沿同一方向绘制
  要避免跨180度经线，你可以手动调整第二个点的经度，让两点的经度差小于180度。比如如果起点经度是170°E，终点是170°W，原来的经度差是340度，你可以把终点的经度改成190°E，这样两点经度差就只有20度，LineString就会沿着指定方向绘制，不会跨地图穿越。
  示例代码片段：

  function adjustLongitude(startLng, endLng) {
    const diff = endLng - startLng;
    if (diff > 180) return endLng - 360;
    if (diff < -180) return endLng + 360;
    return endLng;
  }
  // 调整经度后再生成LineString
  const adjustedEndLng = adjustLongitude(startPoint[0], endPoint[0]);
  const lineString = {
    type: "LineString",
    coordinates: [[startPoint[0], startPoint[1]], [adjustedEndLng, endPoint[1]]]
  };
  

• 方法2：关闭路径默认裁剪逻辑
  如果你使用D3的geo路径生成器，可以设置clipAngle(null)关闭默认的角度裁剪，配合上面的坐标调整逻辑，就能完全避免路径自动跳转的问题：

  const path = d3.geoPath()
    .projection(d3.geoMercator().clipAngle(null))
  

• 方法3：手动插入中间点位
  如果需要绘制的是跨多个区域的长路径，你可以在两点之间插入若干中间坐标点，确保每一段相邻点的经度差都小于180度，LineString就会严格按照你指定的点顺序绘制，不会自动选择最短路径。

注意：以上方法调整的是坐标的逻辑值，不会影响最终点在地图上的渲染位置，投影会自动处理超过±180度的经度坐标，显示到正确的位置。

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