更改打字稿传单中 L.Symbol.arrowhead 的颜色

Question

I am implementing L.symbol.arrowhead to show arrows on polyline by using polyline-decorator plugin. I am able to dynamically change the polylines color, however, I am not able to dynamically change the color of the arrows. I am using react-leaflet with typscript.

function PolylineDecorator({ patterns, polyline,color }) {
  const map = useMap();
  useEffect(() => {
    if (!map) return;
   L.polyline(polyline, {color}).addTo(map);  // added color property
    L.polylineDecorator(polyline, {
      patterns,
    }).addTo(map);
  }, [map]);
 
  return null;
}

const arrow = [
{
  offset: "100%",
  repeat: 0,
  symbol: L.Symbol.arrowHead({
    pixelSize: 15,
    polygon: false,
    pathOptions: { stroke: true }
  })
}];


 {currentData?.movingActors.map(line =>(<PolylineDecorator key={line.id} patterns ={arrow} polyline={position}  color = {modeColor(line.mode)} />) ) }   //here I used color parameters to dynamically add colors

When I try to access the pathOptions via

arrow.forEach((line) => {line.symbol.pathOptions})

the typescript error I get is

"Property 'pathOptions' does not exist on type 'ArrowHead"

Answer 1

I have solved my problem by using Arrowhead plugin. It is much easier as it takes the same color as that of the polyline.

So my new solution looks like

function PolylineDecorator({polyline,color }) {
  const map = useMap();
  useEffect(() => {
    if (!map) return;
  var x = L.polyline(polyline, {color}).arrowheads({ size: '5%' });
  x.addTo(map);
  }, [map]);
 
  return null;
}


 {currentData?.movingActors.map(line =>(<PolylineDecorator key={line.id} polyline={position}  color = {modeColor(line.mode)} />) ) }  

However, if someone else has made it work with L.symbol.arrowhead then please update it here for others.