Position a marker direction in react-leaflet facing a [long, lat]

问题

I'm trying to add a marker on GeoJSON bezier curve which connects origin and destination points. The marker needs to be positioned facing destination.

Here is the marker code:

<Marker position={midPoint} key={origin}>
  <Tooltip permanent direction="center" sticky>
    <span>
      &gt;
    </span>
  </Tooltip>
</Marker>

It would add markers at desired position

But those little ">" would not point towards destination.

Any solution for the above scenario?

回答1:

One option to consider is utilize Leaflet.PolylineDecorator leaflet plug-in which supports drawing arrow heads among another features.

Here is an example how to utilize it along with react-leaflet library to draw arrow heads:

function DirectionsRoute(props) {
    const ctx = useLeaflet()
    const {coords} = props; 
    const {map} = ctx;


    function handleEachFeature(feature, layer){
        L.polylineDecorator(layer, {
          patterns: [
            {offset: '10%', repeat: '20%',  symbol: L.Symbol.arrowHead({pixelSize: 15, pathOptions: {fillOpacity: 1, weight: 0}})}
          ]
        }).addTo(map); 
    }


    return <GeoJSON data={coords} onEachFeature={handleEachFeature} />;
}

Note:

offset , endOffset and repeat options are used to control pattern

Here is a demo

Result

来源：https://stackoverflow.com/questions/61915968/position-a-marker-direction-in-react-leaflet-facing-a-long-lat