带有度数和方位角的传单

Question

I'm using react-leaflet and I need to plot a geographic coordinate, degrees and azimuth on the map, as in the image example, but I didn't find how to do it.

I have the coordinate and the azimuth and I need to plot the same as it is in the image, with an opening of 90º.

UPDATE 1

const Map = ({ position, azimuth }) => {
  const ICON = icon({
    iconUrl: "images/antena.png",
    iconSize: [120, 120],
  });

  
  let startAngle = (azimuth + 120 / 2 )  % 360;
  let stopAngle = (azimuth - 120 / 2 ) % 360;

  
  console.log(azimuth, startAngle, stopAngle)

  return (
    <MapContainer
      style={{ height: "100%", minHeight: "100%" }}
      zoom={15}
      center={position}
      scrollWheelZoom={true}
    >
      <TileLayer
        attribution="aaaa"
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />

      <SemiCircle
        position={position}
        radius={1000}
        startAngle={startAngle}
        stopAngle={stopAngle}
        opacity={0.5}
        weight={1}
        // smoothFactor={1}
      />

      <PlotPolyline position={position} azimuth={azimuth} distance={1000} />
    </MapContainer>
  );
};

I managed to make the semicircle, but I'm wrong in the degree calculations, I think. Some semicircles are displayed correctly, with the proper opening and others are displayed wrong, see the images.

Example 1:

Example 2, wrong:

Answer 1

You need to create a custom react-leaflet component to be able to use the plugin IvanSanchez mentioned.

All you need is the map reference and plugin's L.semiCircle to instantiate it.

  export default function Semicircle() {
      const map = useMap();
    
      useEffect(() => {
        if (!map) return;
    
        L.semiCircle([51.5, -0.09], {
          radius: 500,
          startAngle: 45,
          stopAngle: 135
        }).addTo(map);
      }, [map]);
    
      return null;
    }

and then use it a chidl of MapContainer

<MapContainer>
  ...
  <Semicircle/>
</MapContainer>

Demo