javascript - 如何使用 PolylineDecorator 在折线的每条线的末尾放置一个箭头？

Question

我正在尝试使用 PolylineDecorator 制作传单。我打算在每条线的末尾绘制一 strip 有箭头的折线。我有这个代码:

var somePoints = [];
for (var rowIndex in rows) {
    somePoints.push(L.latLng(rows[rowIndex].Lat, rows[rowIndex].Lon));
}
var pl = L.polyline(somePoints);
pl.addTo(map);
var decorator = L.polylineDecorator(pl, {
    patterns: [
        // defines a pattern of 10px-wide dashes, repeated every 20px on the line
        {offset: 0, repeat: 50, symbol: L.Symbol.arrowHead({pixelSize: 8, polygon: false, pathOptions: {stroke: true}})}
    ]
}).addTo(map);

产生这个



我的意图是在行的每一端(标记位置)都有一个箭头。如果我改变 offset至 "100%"和 repeat至 0 ，然后我有这个:



我们在最后一个标记处有一个箭头，但其他标记没有箭头。我知道我们可以通过使用 offset 将每条线绘制为单独的折线来实现我想要的。的 "100%"和 repeat的 0 ，但我想知道这是否可以使用 decorator的参数中具有两个以上点的单个折线来实现.这是可能的还是我应该修改我的代码以具有 n - 1 strip 箭头的折线？

Answer 1

我知道这很愚蠢，但实际上我正在为此目的构建插件:

https://github.com/slutske22/leaflet-arrowheads

根据评论中的要求，这是一个带有大量示例的工作代码框:https://codesandbox.io/s/leaflet-arrowheads-example-zfxxc

我几乎完成了自述文件的充实，并且很快会要求将其添加到传单插件列表中。让我知道您的想法，如果您觉得它有帮助/任何更多功能请求/一般反馈。