reactjs 带有Angular 和方位角的瓣叶

egdjgwm8 于 2022-12-18 发布在 React

关注(0)|答案(1)|浏览(130)

我使用react-leaflet，我需要在Map上绘制地理坐标、度数和方位角，就像图像示例中那样，但我不知道如何操作。
我有了坐标和方位角，我需要画出和图像中一样的东西，开度为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>
  );
};

我设法画出了半圆，但是我想我的度数计算错了。有些半圆显示正确，开度合适，有些显示错误，看图像。
例一：

例2，错误：

reactjs

来源：https://stackoverflow.com/questions/74756888/leaflet-with-degress-and-azimuth

1条答案

按热度按时间

zfciruhq1#

您需要创建一个定制的react-leaflet组件，以便能够使用IvanSanchez提到的插件。
您所需要的只是Map引用和插件的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的子文件使用

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

Demo

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs 带有Angular 和方位角的瓣叶

1条答案

相关问题

热门标签

最新问答