Leaflet.js绘制折线时按最短路径自动适配经度环绕区间方法

核心逻辑不需要做复杂的三区间距离遍历计算，利用Leaflet原生支持非标准经度区间渲染的特性，只需要做O(1)复杂度的经度偏移调整，就能自动匹配最短路径对应的经度区间。

实现原理 #

• 首先把任意输入的经度值（包括-600、720这类超出常规范围的值）归一化到[-180, 180]的基准区间，消除多圈环绕的冗余偏移
• 固定第一个点使用归一化后的经度值，调整第二个点的经度偏移：如果两点经度差大于180，就给第二个点经度减360；如果经度差小于-180，就给第二个点经度加360。调整后两点的经度差绝对值必然≤180，此时连线就是球面最短路径
• 调整后的第二个点经度会自动落在[-360,-180]/[-180,180]/[180,360]三个区间中对应的正确区间，完全匹配需求，不需要额外判断区间归属。

完整修改代码 #

createPolyLine(outside2, userLocation);

/**
 * 两点间绘制最短路径折线
 * @param {L.LatLng} loc1 第一个点坐标
 * @param {L.LatLng} loc2 第二个点坐标
 */
function createPolyLine(loc1, loc2) {
  // 经度归一化工具函数，将任意经度转换到[-180,180]基准区间
  const wrapLon = (lon) => {
    lon = lon % 360;
    if (lon > 180) lon -= 360;
    if (lon < -180) lon += 360;
    return lon;
  };

  // 先取两点归一化后的基准经纬度
  const baseLon1 = wrapLon(loc1.lng);
  const lat1 = loc1.lat;
  let adjustLon2 = wrapLon(loc2.lng);
  const lat2 = loc2.lat;

  // 调整第二个点经度，保证两点经度差绝对值不超过180，取最短路径
  const lonDiff = adjustLon2 - baseLon1;
  if (lonDiff > 180) {
    adjustLon2 -= 360;
  } else if (lonDiff < -180) {
    adjustLon2 += 360;
  }

  const latlongs = [
    [lat1, baseLon1],
    [lat2, adjustLon2]
  ];

  new L.Polyline(latlongs, {
    color: 'white',
    opacity: 1,
    weight: 1,
    clickable: false
  }).addTo(map);
}

方案优势 #

• 性能极高：所有计算都是基础算术运算，没有循环、距离换算这类冗余逻辑，执行效率拉满
• 无额外依赖：完全基于Leaflet原生渲染能力实现，不需要引入插件或修改地图配置
• 场景全覆盖：不管输入经度超出范围多少，都能自动适配到正确区间，不会出现跨大半个地球的错误连线，完全匹配预期效果。

避坑提醒：不要把两个点的经度都强制归一化到[-180,180]后直接连线，这就是之前出现错误长连线的原因——比如两点分别在170°E和170°W，都归一化后经度差为-340°，Leaflet会绘制穿过0°经线的长连线，而不是穿过180°经线的20°短连线。

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