Leaflet.draw 多色折线段

如何解决Leaflet.draw 多色折线段

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

解决方法

最简单的解决方案是将每条线段绘制为单独的多段线，使用自己的颜色，然后使用 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!');