React-Leaflet中基于坐标与方位角绘制扇形的角度计算问题

我正在使用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（异常效果）：

问题原因 #

1. 需求是90°开口，但代码中误用了120°的半角计算（120/2），导致开口角度不符合要求。
2. 未处理负数角度的取模逻辑：JS中负数取模会返回负值，当azimuth - 半角得到负数时，stopAngle为负，会让SemiCircle绘制出错误的大扇形。

修复方案 #

调整角度计算逻辑，确保角度始终为正且开口为90°：

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

  // 设定目标开口角度为90°，计算半角
  const openingAngle = 90;
  const halfOpening = openingAngle / 2;

  // 计算角度时先加360再取模，确保结果始终为0-360°的正值
  let startAngle = (azimuth - halfOpening + 360) % 360;
  let stopAngle = (azimuth + halfOpening) % 360;

  // 若起始角度大于结束角度，交换两者，保证绘制的是90°小扇形
  if (startAngle > stopAngle) {
    [startAngle, stopAngle] = [stopAngle, startAngle];
  }

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

关键说明 #

• 通过+360后取模，避免负数角度出现，确保所有角度值在合法范围内。
• 交换起始/结束角度的逻辑：SemiCircle是顺时针绘制，若起始角度大于结束角度，会自动画出超过180°的大扇形，交换后就能强制绘制我们需要的90°小扇形。
• 明确设定openingAngle为90°，和需求保持一致，避免混淆。

内容的提问来源于stack exchange，提问作者CeBoLaRk