공역 꼭짓점 구하기

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,104 +235,188 @@ export const NaverCustomMap = () => {
     setArrPolyline([...arrPolyline, line]);
   };
 
-  const polyArea = (air, idx) => {
+  const airlist = (air, idx) => {
-    //격자 공역
+    if (idx == 0) {
-    const polyArr = [];
+      const radius = air.buffer;
-    const radius = air.buffer;
+      const position = air.center; //공역 센터
-    const position = air.center; //공역 센터
+      const coords = [];
-    const color = '#000';
+      // console.log('>>', position);
-    const opacity = 0.7;
+      let angle2 = 0;
-
+      let buffer2 = 0;
-    let angle = 0;
+      let angle = 0;
-    for (let i = 0; i < 4; i++) {
+      for (let l = 0; l < 4; l++) {
-      angle += 90;
+        angle2 += 90;
-      let buffer = 0;
+        for (let i = 0; i < 1; i++) {
-      // for (let j = 0; j < 4; j++) {
+          angle += 90;
-      for (let j = 0; j < 9; j++) {
+          let buffer = 0;
-        // buffer += 2000;
+          // for (let j = 0; j < 4; j++) {
-        buffer += 1000;
+          for (let j = 0; j < 9; j++) {
-
+            // buffer += 2000;
-        //EPSG3857.getDestinationCoord
+            buffer += 1000;
-        //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
+            buffer2 = 0;
-        const coord = new naver.maps.EPSG3857.getDestinationCoord(
+            const coord = new naver.maps.EPSG3857.getDestinationCoord(
-          position,
+              position,
-          angle,
+              angle,
-          buffer
+              buffer
-        );
+            );
-
+            for (let k = 0; k < 9; k++) {
-        let reduce = 0;
+              //EPSG3857.getDestinationCoord
-        reduce = air.reduce[j];
+              //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
-
+              const po = coord;
-        // 2km reduce
+              if (l == 0) angle2 = 0;
-        // [218.6, 905.4, 2195, 4560.2]
+              buffer2 += 1000;
-
+              const coord2 = new naver.maps.EPSG3857.getDestinationCoord(
-        if (angle % 180 == 0) {
+                po,
-          const polyEW = new naver.maps.Polyline({
+                angle2,
-            path: [
+                buffer2
-              new naver.maps.EPSG3857.getDestinationCoord(
+              );
-                coord,
+              //  console.log('coord>>>>>', coord2);
-                90,
+
-                radius - reduce
+              coords.push(coord2);
-              ),
+            }
-              new naver.maps.EPSG3857.getDestinationCoord(
+
-                coord,
+            coords.push(coord);
-                270,
+          }
-                radius - reduce
-              )
-            ],
-            strokeWeight: 0.8,
-            strokeOpacity: opacity,
-            strokeColor: color
-            // map: map
-          });
-          polyArr.push(polyEW);
-        } else {
-          const polyNS = new naver.maps.Polyline({
-            path: [
-              new naver.maps.EPSG3857.getDestinationCoord(
-                coord,
-                0,
-                radius - reduce
-              ),
-              new naver.maps.EPSG3857.getDestinationCoord(
-                coord,
-                180,
-                radius - reduce
-              )
-            ],
-            strokeWeight: 0.8,
-            strokeOpacity: opacity,
-            strokeColor: color
-            // map: props.map
-          });
-          polyArr.push(polyNS);
         }
       }
+      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 NS = new naver.maps.Polyline({
+  };
-      path: [
+  const polyArea = (air, idx) => {
-        new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius),
+    if (idx == 0) {
-        new naver.maps.EPSG3857.getDestinationCoord(position, 180, radius)
+      const polyArr = [];
-      ],
+      const radius = air.buffer;
-      strokeWeight: 0.8,
+      const position = air.center; //공역 센터
-      strokeOpacity: opacity,
+      const color = '#000';
-      strokeColor: color
+      const opacity = 0.7;
-      // map: props.map
+      const coords = [];
-    });
+
-    polyArr.push(NS);
+      let angle = 0;
-    const EW = new naver.maps.Polyline({
+      for (let i = 0; i < 4; i++) {
-      path: [
+        angle += 90;
-        new naver.maps.EPSG3857.getDestinationCoord(position, 90, radius),
+        let buffer = 0;
-        new naver.maps.EPSG3857.getDestinationCoord(position, 270, radius)
+        // for (let j = 0; j < 4; j++) {
-      ],
+        for (let j = 0; j < 9; j++) {
-      strokeWeight: 0.8,
+          // buffer += 2000;
-      strokeOpacity: opacity,
+          buffer += 1000;
-      strokeColor: color
+
-      // map: props.map
+          //EPSG3857.getDestinationCoord
-    });
+          //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
-    polyArr.push(EW);
+          const coord = new naver.maps.EPSG3857.getDestinationCoord(
+            position,
+            angle,
+            buffer
+          );
+          // console.log('coord>>>>>', coord);
+          // coords.push(coord);
+          // setCoordValue(coords);
+          let reduce = 0;
+          reduce = air.reduce[j];
+
+          // 2km reduce
+          // [218.6, 905.4, 2195, 4560.2]
+
+          if (angle % 180 == 0) {
+            const polyEW = new naver.maps.Polyline({
+              path: [
+                new naver.maps.EPSG3857.getDestinationCoord(
+                  coord,
+                  90,
+                  radius - reduce
+                ),
+                new naver.maps.EPSG3857.getDestinationCoord(
+                  coord,
+                  270,
+                  radius - reduce
+                )
+              ],
+              strokeWeight: 0.8,
+              strokeOpacity: opacity,
+              strokeColor: color
+              // map: map
+            });
+            polyArr.push(polyEW);
+          } else {
+            const polyNS = new naver.maps.Polyline({
+              path: [
+                new naver.maps.EPSG3857.getDestinationCoord(
+                  coord,
+                  0,
+                  radius - reduce
+                ),
+                new naver.maps.EPSG3857.getDestinationCoord(
+                  coord,
+                  180,
+                  radius - reduce
+                )
+              ],
+              strokeWeight: 0.8,
+              strokeOpacity: opacity,
+              strokeColor: color
+              // map: props.map
+            });
+            polyArr.push(polyNS);
+          }
+        }
+      }
+      const NS = new naver.maps.Polyline({
+        path: [
+          new naver.maps.EPSG3857.getDestinationCoord(position, 0, radius),
+          new naver.maps.EPSG3857.getDestinationCoord(position, 180, radius)
+        ],
+        strokeWeight: 0.8,
+        strokeOpacity: opacity,
+        strokeColor: color
+        // map: props.map
+      });
+      polyArr.push(NS);
+      const EW = new naver.maps.Polyline({
+        path: [
+          new naver.maps.EPSG3857.getDestinationCoord(position, 90, radius),
+          new naver.maps.EPSG3857.getDestinationCoord(position, 270, radius)
+        ],
+        strokeWeight: 0.8,
+        strokeOpacity: opacity,
+        strokeColor: color
+        // map: props.map
+      });
+      polyArr.push(EW);
+
+      setPoly(m => [...m, polyArr]);
 
-    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}