grid polygon 생성

src/components/map/naver/NaverMap.js

@@ -49,6 +49,8 @@ export const NaverCustomMap = () => {
     }
   ];
 
+  const [squarePaths, setSquarePaths] = useState([]);
+
   const uamPosition = [
     {
       name: 'V1',
@@ -129,19 +131,18 @@ 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, '>>>>');
+    // 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
+    //   );
+
+    //   arr.push(coord);
+    // }
   }, []);
 
   useEffect(() => {
@@ -193,9 +194,17 @@ export const NaverCustomMap = () => {
     //     }
     //   });
     // });
+
+    if (mapObject) {
+      airPort?.map((air, idx) => gridgrid(air, idx));
+    }
   }, [mapObject, coordValue]);
 
-  useEffect(() => {}, []);
+  useEffect(() => {
+    if (squarePaths.length > 315) {
+      console.log(squarePaths, '>>>>');
+    }
+  }, [squarePaths]);
   const NaverMapInit = () => {
     const mapOptions = {
       center: new naver.maps.LatLng(37.520357, 126.610166),
@@ -402,6 +411,110 @@ export const NaverCustomMap = () => {
     //격자 공역
   };
 
+  const gridgrid = (air, idx) => {
+    if (idx !== 0) return;
+
+    const realCenter = air.center;
+    new naver.maps.Marker({
+      position: realCenter,
+      map: mapObject
+    });
+
+    let westEastAngle = 270;
+    for (let we = 0; we < 2; we++) {
+      if (we === 1) westEastAngle = 90;
+      let westEastBuffer = 0;
+      for (let westEast = 0; westEast < 10; westEast++) {
+        westEastBuffer += 1000;
+        const coord = new naver.maps.EPSG3857.getDestinationCoord(
+          realCenter,
+          westEastAngle,
+          westEastBuffer
+        );
+
+        let northSouthCoord = coord;
+        let notIncludes = 10;
+        if (westEast === 3 || westEast === 4) {
+          notIncludes = 9;
+        } else if (westEast === 5 || westEast === 6) {
+          notIncludes = 8;
+        } else if (westEast === 7) {
+          notIncludes = 7;
+        } else if (westEast === 8) {
+          notIncludes = 5;
+        } else if (westEast === 9) {
+          notIncludes = 3;
+        }
+
+        for (let ns = 0; ns < 2; ns++) {
+          getNorthSouth(northSouthCoord, notIncludes, we, ns);
+        }
+      }
+    }
+  };
+
+  const getNorthSouth = (northSouthCoord, notIncludes, weType, nsType) => {
+    for (let i = 0; i < notIncludes; i++) {
+      getSquare(northSouthCoord, weType, nsType);
+
+      const angle = nsType === 0 ? 0 : 180;
+      northSouthCoord = new naver.maps.EPSG3857.getDestinationCoord(
+        northSouthCoord,
+        angle,
+        1000
+      );
+    }
+  };
+
+  const getSquare = (coord, weType, nsType) => {
+    const square = [coord];
+
+    let angle = 0;
+
+    if (weType === 0 && nsType === 1) {
+      angle = 90;
+    } else if (weType === 1) {
+      if (nsType === 0) {
+        angle = 360;
+      } else if (nsType === 1) {
+        angle = 270;
+      }
+    }
+    for (let i = 2; i < 5; i++) {
+      const tt = new naver.maps.EPSG3857.getDestinationCoord(
+        square[i - 2],
+        angle,
+        1000
+      );
+      if (weType === 0) {
+        angle += 90;
+      } else if (weType === 1) {
+        angle -= 90;
+      }
+      square.push(tt);
+    }
+    const polygon = new naver.maps.Polygon({
+      strokeColor: '#283046',
+      strokeOpacity: 0.5,
+      // fillColor: '#7367F0',
+      fillOpacity: 0.1,
+      paths: square,
+      map: mapObject
+    });
+
+    const path = polygon.getPath()._array;
+
+    const arr = [];
+    path.map(tt => {
+      const latlng = {
+        x: tt.lng(),
+        y: tt.lat()
+      };
+      arr.push(latlng);
+    });
+    setSquarePaths(prev => [...prev, arr]);
+  };
+
   return (
     <>
       <div id='map' style={{ width: '100%', height: '100vh' }}></div>