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

Question

我正在为传单试验 PolylineDecorator。我打算在每行的末尾绘制一条带箭头的多段线。我有这个代码：

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，那么我将得到：

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

Answer 1

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

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

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

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

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

How to place an arrowhead at the end of each line of a polyline using PolylineDecorator?

javascript

leaflet

polyline-decorator