Leaflet.draw 多色折线段答案

【问题标题】：Leaflet.draw multi-coloured polyline segmentsLeaflet.draw 多色折线段
【发布时间】：2021-06-22 21:29:29
【问题描述】：

我正在使用 Leaflet.draw 绘制一条折线，用户完成所有点并单击（即这些点不是来自数据库）。我希望各个顶点之间的线条是不同的颜色。我尝试在传单公开的各种事件（例如创建）中设置 style.color 属性，但无济于事。

【问题讨论】：

【解决方案1】：

最简单的解决方案是将每条线段绘制为单独的折线，并使用自己的颜色，然后使用FeatureGroup 将线段组合在一起，以便您可以一起操作它们。例如

# Place a two-segment line on the map.
var segment1 = L.polyline(latlngs1, {color: 'red'});
var segment2 = L.polyline(latlngs2, {color: 'blue'});
var multiSegment = L.featureGroup([segment1, segment2])
    .addTo(map);

FeatureGroup 创建并放置在地图上后，您仍然可以添加其他线段（它们会立即显示在地图上）：

# Add another segment to the group later
var segment3 = L.polyline(latlngs3, {color: 'green'});
multiSegment.addLayer(segment3);

使用 FeatureGroup，您可以将事件侦听器、弹出窗口等作为一个整体绑定到该组，或者一次性执行诸如在地图中添加/删除等操作。

# Bind a popup to the whole group
multiSegment.bindPopup('Hello world!');

【讨论】：