如何在Leaflet中实现手绘折线的平滑曲线效果？

1. 调整Leaflet内置参数优化基础渲染 #

a. 修改smoothFactor #

你的代码中设置了smoothFactor: 1，这个参数控制折线的简化程度。降低该值（比如0.1或0.5）可以减少折线的自动简化，保留更多细节的同时让线条更顺滑；若追求极致平滑，可设为0（完全不简化）。注意：值越低，折线包含的点位越多，可能轻微影响性能。

b. 添加线条圆角属性 #

在折线选项中加入lineJoin: 'round'和lineCap: 'round'，让线段连接处和端点呈现圆角，大幅弱化尖锐锯齿感：

this.polyline = L.polyline([event.latlng], {
  ...trace,
  smoothFactor: 0.1,
  lineJoin: 'round',
  lineCap: 'round'
}).addTo(this.map);

2. 优化手绘点的采集逻辑 #

当前代码在mousemove事件中每帧都添加点位，导致折线包含大量密集点，反而显得 jagged。可通过距离阈值过滤，仅在鼠标移动超过指定距离时才添加新点：

// 存储上一次添加的点位
let lastAddedLatLng = null;

this.map.on('mousemove', (event) => {
  if (trace.type == 'primary') {
    if (!this.polyline) return;
    // 设定最小触发距离（示例为5米）
    if (!lastAddedLatLng || event.latlng.distanceTo(lastAddedLatLng) > 5) {
      this.common.lineExist.next(true);
      this.polyline.addLatLng(event.latlng);
      lastAddedLatLng = event.latlng;
    }
  }
  // 次要折线逻辑同理
});

3. 使用曲线插值算法生成平滑折线 #

若需要更流畅的曲线效果，可通过插值算法将原始点位转换为平滑曲线，常用方案包括Catmull-Rom样条或贝塞尔曲线。

a. 手动实现简化平滑算法 #

绘制完成后，对采集到的点位进行插值处理，生成新的平滑点位集：

// Catmull-Rom样条插值函数（简化版）
function smoothPolyline(latlngs, tension = 0.5) {
  if (latlngs.length < 3) return latlngs;
  
  const result = [];
  for (let i = 0; i < latlngs.length - 1; i++) {
    const p0 = i > 0 ? latlngs[i - 1] : latlngs[i];
    const p1 = latlngs[i];
    const p2 = latlngs[i + 1];
    const p3 = i < latlngs.length - 2 ? latlngs[i + 2] : p2;
    
    // 生成插值点
    for (let t = 0; t < 1; t += 0.1) {
      const lng = catmullRom(p0.lng, p1.lng, p2.lng, p3.lng, t, tension);
      const lat = catmullRom(p0.lat, p1.lat, p2.lat, p3.lat, t, tension);
      result.push(L.latLng(lat, lng));
    }
  }
  result.push(latlngs[latlngs.length - 1]);
  return result;
  
  function catmullRom(p0, p1, p2, p3, t, tension) {
    const v0 = (p2 - p0) * tension;
    const v1 = (p3 - p1) * tension;
    const t2 = t * t;
    const t3 = t * t * t;
    return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
  }
}

// 在mouseup事件中替换原始折线为平滑折线
this.map.on('mouseup', (event) => {
  if (event.originalEvent.button === 0) {
    // ...其他清理代码
    if (trace.type == 'primary' && this.polyline) {
      const originalPoints = this.polyline.getLatLngs();
      const smoothPoints = smoothPolyline(originalPoints);
      this.map.removeLayer(this.polyline);
      this.polyline = L.polyline(smoothPoints, {
        ...trace,
        lineJoin: 'round',
        lineCap: 'round'
      }).addTo(this.map);
    }
    // 次要折线逻辑同理
  }
});

b. 使用Leaflet专用插件 #

有成熟插件可直接实现平滑折线，无需手动编写算法：

• Leaflet.SmoothPolyline：基于Catmull-Rom样条，只需将L.polyline替换为L.smoothPolyline即可使用
• Leaflet.Curve：支持绘制贝塞尔曲线，适合需要精细控制曲线形态的场景

引入插件后，只需修改折线创建逻辑即可快速获得平滑效果。

4. 组合方案达到最佳效果 #

建议同时使用距离阈值过滤点位 + lineJoin/lineCap圆角 + 适当的smoothFactor，若追求极致平滑再加入插值算法或插件，既能保证性能，又能获得流畅的视觉效果。

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