带有度数和方位角的传单

Question

我正在使用 react-leaflet，我需要在地图上绘制地理坐标、度数和方位角，如图像示例中所示，但我没有找到如何做。

我有坐标和方位角，我需要绘制与图像中相同的图，开口为 90º。

更新 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>
  );
};

我设法做了一个半圆，但我认为我在计算度数时错了。 一些半圆正确显示，开口正确，而其他半圆显示错误，请参见图像。

示例 1：

例2，错误：

Answer 1

您需要创建一个自定义的 react-leaflet 组件才能使用 IvanSanchez 提到的插件。

您只需要地图引用和插件的 L.semiCircle 来实例化它。

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

然后使用它作为 MapContainer 的 chidl

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

演示