공역 꼭짓점 구하기

src/components/map/naver/NaverMap.js

@@ -11,7 +11,6 @@ import NewDronPlan from './dron/NewDronPlan';
 import { NewDronHistory } from './dron/NewDronHistroy';
 import DronToast from './dron/DronToast';
 import SensorZone from './sensor/SensorZone';
-import ControlDraw from './draw/ControlDraw';
 
 export const NaverCustomMap = () => {
   const dispatch = useDispatch();
@@ -21,7 +20,7 @@ export const NaverCustomMap = () => {
   const [arrPolyline, setArrPolyline] = useState([]);
 
   const [poly, setPoly] = useState([]);
-
+  const [coordValue, setCoordValue] = useState([]);
   const airPort = [
     {
       title: '김포공항',
@@ -129,6 +128,19 @@ export const NaverCustomMap = () => {
     NaverMapInit();
     // airPort?.map(air => polyArea(air));
     airPort?.map((air, idx) => polyArea(air, idx));
+    airPort?.map((air, idx) => airlist(air, idx));
+
+    const arr = [];
+    for (let i = 0; i < 300; i++) {
+      const coord = new naver.maps.EPSG3857.getDestinationCoord(
+        new naver.maps.LatLng(37.558522, 126.793722),
+        i,
+        9300
+      );
+      // console.log(coord, '>>>>>>');
+      arr.push(coord);
+    }
+    //   console.log(arr, '>>>>');
   }, []);
 
   useEffect(() => {
@@ -158,8 +170,31 @@ export const NaverCustomMap = () => {
         }
       });
     });
-  }, [mapObject]);
 
+    const result = [];
+    //   for (let i = 0; i < coordValue.length; i += 2) {
+    //     const lat_sum = (coordValue[i]._lat + coordValue[i + 1]._lat) / 2;
+    //    const lng_sum = (coordValue[i]._lng + coordValue[i + 1]._lng) / 2;
+
+    // result.push({ lat: lat_avg, lng: lng_avg });
+    //   result.push({ lat: lat_sum, lng: lng_sum });
+    // console.log('coordvalue>>', coordValue);
+
+    coordValue.map((val, idx) => {
+      const po = new naver.maps.LatLng(val._lat, val._lng);
+      const cont = `<div style="background-color:#f8f9fa;border-radius:20px;color:#000000 ">${idx}번</div>`;
+      const marker = new naver.maps.Marker({
+        position: po,
+        map: mapObject,
+        icon: {
+          content: [cont].join(''),
+          anchor: new naver.maps.Point(20, 20)
+        }
+      });
+    });
+  }, [mapObject, coordValue]);
+
+  useEffect(() => {}, []);
   const NaverMapInit = () => {
     const mapOptions = {
       center: new naver.maps.LatLng(37.520357, 126.610166),
@@ -200,13 +235,91 @@ export const NaverCustomMap = () => {
     setArrPolyline([...arrPolyline, line]);
   };
 
+  const airlist = (air, idx) => {
+    if (idx == 0) {
+      const radius = air.buffer;
+      const position = air.center; //공역 센터
+      const coords = [];
+      // console.log('>>', position);
+      let angle2 = 0;
+      let buffer2 = 0;
+      let angle = 0;
+      for (let l = 0; l < 4; l++) {
+        angle2 += 90;
+        for (let i = 0; i < 1; i++) {
+          angle += 90;
+          let buffer = 0;
+          // for (let j = 0; j < 4; j++) {
+          for (let j = 0; j < 9; j++) {
+            // buffer += 2000;
+            buffer += 1000;
+            buffer2 = 0;
+            const coord = new naver.maps.EPSG3857.getDestinationCoord(
+              position,
+              angle,
+              buffer
+            );
+            for (let k = 0; k < 9; k++) {
+              //EPSG3857.getDestinationCoord
+              //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
+              const po = coord;
+              if (l == 0) angle2 = 0;
+              buffer2 += 1000;
+              const coord2 = new naver.maps.EPSG3857.getDestinationCoord(
+                po,
+                angle2,
+                buffer2
+              );
+              //  console.log('coord>>>>>', coord2);
+
+              coords.push(coord2);
+            }
+
+            coords.push(coord);
+          }
+        }
+      }
+      const incoords = [];
+      coords.map(coord => {
+        let centerLat = 37.558522;
+        let centerLng = 126.793722;
+        let radius = 9.3;
+        // let distance = Math.sqrt(
+        //   (coord._lat - centerLat) ** 2 + (coord._lng - centerLng) ** 2
+        // );
+        const centerLatRad = (centerLat * Math.PI) / 180;
+        const centerLngRad = (centerLng * Math.PI) / 180;
+        const coordlat = (coord._lat.toFixed(6) * Math.PI) / 180;
+        const coordlng = (coord._lng.toFixed(6) * Math.PI) / 180;
+
+        console.log('>>', coordlat);
+        const R = 6371; // Radius of the earth in km
+        const dLat = coordlat - centerLatRad;
+        const dLon = coordlng - centerLngRad;
+        const a =
+          Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+          Math.sin(dLon / 2) *
+            Math.sin(dLon / 2) *
+            Math.cos(centerLatRad) *
+            Math.cos(coordlat);
+        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+        const distance = R * c; // Distance in km
+
+        if (distance <= radius) {
+          incoords.push(coord);
+        }
+      });
+      setCoordValue(incoords);
+    }
+  };
   const polyArea = (air, idx) => {
-    //격자 공역
+    if (idx == 0) {
       const polyArr = [];
       const radius = air.buffer;
       const position = air.center; //공역 센터
       const color = '#000';
       const opacity = 0.7;
+      const coords = [];
 
       let angle = 0;
       for (let i = 0; i < 4; i++) {
@@ -224,7 +337,9 @@ export const NaverCustomMap = () => {
             angle,
             buffer
           );
-
+          // console.log('coord>>>>>', coord);
+          // coords.push(coord);
+          // setCoordValue(coords);
           let reduce = 0;
           reduce = air.reduce[j];
 
@@ -298,6 +413,10 @@ export const NaverCustomMap = () => {
       polyArr.push(EW);
 
       setPoly(m => [...m, polyArr]);
+
+      // console.log(idx);
+    }
+    //격자 공역
   };
 
   return (
@@ -312,8 +431,6 @@ export const NaverCustomMap = () => {
 
           <NaverMapControl map={mapObject} />
 
-          <ControlDraw map={mapObject} naver={naver} />
-
           {/* <DronHistory
             map={mapObject}
             naver={naver}