如何使用Leaflet.draw为多段线各顶点间的线段设置不同颜色

你之前修改style.color未生效的核心原因是：Leaflet 默认的单个 L.Polyline 实例仅支持全局统一样式，修改整根多段线的样式无法实现不同分段显示不同颜色的需求。

实现思路 #

• 不使用单个多段线存储全部顶点，将每两个相邻顶点作为独立的线段对象单独管理，每条线段可单独配置样式
• 监听 Leaflet.draw 的绘制过程事件，动态生成、更新分段线段

核心实现代码 #

1. 初始化基础变量 #

// 存储用户点击的所有顶点坐标
let polylineVertices = [];
// 存储所有分段线段的图层组，提前添加到地图
let segmentLayerGroup = L.layerGroup().addTo(map);
// 自定义分段颜色池，可按需修改颜色、数量
const segmentColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];

2. 监听绘制过程事件，动态生成分段 #

// 用户每添加一个顶点时触发
map.on('draw:drawvertex', function(e) {
  const currentVertices = e.layers.getLayers().map(pointLayer => pointLayer.getLatLng());
  // 顶点数≥2时生成两个相邻点之间的线段
  if (currentVertices.length >= 2) {
    const [prevPoint, currentPoint] = currentVertices.slice(-2);
    // 按分段顺序取颜色，超出颜色池长度则循环取
    const segmentColor = segmentColors[(currentVertices.length - 2) % segmentColors.length];
    // 生成独立线段添加到图层组
    L.polyline([prevPoint, currentPoint], {
      color: segmentColor,
      weight: 3,
      opacity: 0.8
    }).addTo(segmentLayerGroup);
  }
  polylineVertices = currentVertices;
});

3. 处理绘制完成事件 #

map.on('draw:created', function(e) {
  // 直接丢弃Leaflet.draw默认生成的统一样式多段线，不需要添加到地图
  // 若之前已将默认图层添加到地图，可调用e.layer.remove()移除
  // 可在此处将顶点、分段数据写入自定义变量做后续业务处理
});

后续修改操作说明 #

如果需要调整已生成线段的颜色，直接从图层组中取出对应下标线段调用setStyle即可：

// 示例：修改第1段线段的颜色为橙色
const allSegments = segmentLayerGroup.getLayers();
allSegments[0].setStyle({color: '#FFA500'});

可选：支持编辑状态下的样式同步 #

如果需要支持用户编辑已绘制的多段线，监听draw:editvertex事件，用户拖动顶点时同步更新相邻两段线段的坐标即可，原有颜色配置不会失效。

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