Leaflet.draw多色多段线线段

Question

我正在使用leaflet.draw绘制一条多段线，由用户完成所有的点并单击(即这些点不是来自数据库)。我希望各个顶点之间的线条具有不同的颜色。我已经尝试在各种事件列表中设置style.color属性(例如，创建)，但无用。

Answer 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!');