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

Question

I am experimenting with PolylineDecorator for leaflet. I intend to draw a polyline with arrowheads at the end of each line. I have this code:

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);

which produces this

My intention is to have an arrowhead at each end of line (the marker positions). If I change offset to "100%" and repeat to 0 , then I have this:

we have an arrow at the very last marker, but no arrowheads for the other markers. I know we can achieve what I want by drawing each line as a separate polyline with an offset of "100%" and repeat of 0 , but I wonder whether this can be achieved using a single polyline with more than two points in the parameters of decorator . Is this possible or should I modify my code to have n - 1 polylines with arrowheads?

Answer 1

I know this is like stupid old but I am actually in the process of building a plugin for this purpose:

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

As per request in the comment, here is a working codesandbox with a bunch of examples: https://codesandbox.io/s/leaflet-arrowheads-example-zfxxc

I am almost done fleshing out the readme and will soon request it to be added to the leaflet plugin list. Let me know what you think, if you find it helpful / any more feature requests / general feedback.