Leaflet中如何为Multipolyline的每个环设置不同随机颜色

• 单个L.polyline实例无法为内部的不同环单独设置颜色，你传入的样式配置会全局生效到该实例的所有路径，这就是所有环显示同色的原因。
• 实现分环配色不需要为每个环单独声明命名变量，只需要给每个环创建独立的Polyline实例，用数组或图层组统一管理即可，动态生成逻辑非常简单。

实现方案 #

你原来的逻辑是把所有环一次性传入单个Polyline构造函数，改为遍历环列表逐个创建实例即可：

// 获取所有环的坐标集合
const rings = createRings(allDriver.length);
// 用数组存储所有折线实例，替代原来的单个window.polyline，方便后续批量操作
window.polylines = [];

rings.forEach(ringCoords => {
  // 每个环单独创建实例，单独生成随机颜色
  const line = L.polyline(ringCoords, {
    color: generateRandomColor(1)
  }).addTo(map);
  window.polylines.push(line);
});

如果环的数量较多，推荐用Leaflet内置的图层组统一管理，后续批量操作（比如清空所有线、统一绑定事件）效率更高：

// 创建图层组并加到地图
window.polylineLayer = L.featureGroup().addTo(map);
const rings = createRings(allDriver.length);

rings.forEach(ringCoords => {
  L.polyline(ringCoords, {
    color: generateRandomColor(1)
  }).addTo(window.polylineLayer);
});

// 后续需要移除所有线时，直接调用clearLayers即可
// window.polylineLayer.clearLayers()

内容的提问来源于stack exchange，提问作者D.Schall