问题描述
我正在使用 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!');