김포공항 사각공역 생성

src/components/map/geojson/airArea.json

@@ -7656,26 +7656,6 @@
         "description": "인천공항 비행불가",
         "type": "0001"
       }
-    },
-
-    {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [126.78239009643008, 37.55852145849355, 0],
-            [126.78239009643008, 37.56750461133475, 0],
-            [126.79372336640101, 37.56750406965258, 0],
-            [126.79372336640101, 37.55852091681139, 0]
-          ]
-        ]
-      },
-      "properties": {
-        "name": "sdfsdfsdfsdf",
-        "description": "sdfssdfsdfsdfdf",
-        "type": "0006"
-      }
     }
   ]
 }

src/components/map/naver/NaverMap.js

@@ -1,20 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
 import { DronMarker } from './dron/DronMarker';
-import { DronHistory } from './dron/DronHistory';
 import NaverMapControl from './NaverMapControl';
-import { NaverMapSearch } from './search/NaverMapSearch';
 import { FeatureAirZone } from './feature/FeatureAirZone';
 import geoJson from '../geojson/airArea.json';
-import DronPlan from './dron/DronPlan';
+import gimPo from '../geojson/airportAirArea.json';
 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();
   const naver = window.naver;
 
   const [mapObject, setMapObject] = useState(null);
@@ -51,6 +45,8 @@ export const NaverCustomMap = () => {
 
   const [squarePaths, setSquarePaths] = useState([]);
 
+  const [jsonFormat, setJsonFormat] = useState([]);
+
   const uamPosition = [
     {
       name: 'V1',
@@ -125,23 +121,17 @@ export const NaverCustomMap = () => {
     }
   ];
 
-  let features = geoJson.features;
+  let airArea = geoJson.features;
+  let gimPofeatures = gimPo.features;
+  let features = airArea.concat(gimPofeatures);
+
+  // console.log(features);
+
   useEffect(() => {
     NaverMapInit();
-    // airPort?.map(air => polyArea(air));
+    airPort?.map(air => polyArea(air));
-    airPort?.map((air, idx) => polyArea(air, idx));
     // airPort?.map((air, idx) => airlist(air, idx));
-
+    // airPort?.map((air, idx) => polyArea(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(() => {
@@ -162,7 +152,7 @@ export const NaverCustomMap = () => {
               '</div>'
             ];
 
-      const marker = new naver.maps.Marker({
+      new naver.maps.Marker({
         position: position,
         map: mapObject,
         icon: {
@@ -193,16 +183,35 @@ export const NaverCustomMap = () => {
     //     }
     //   });
     // });
-    if (mapObject) {
+
-      airPort?.map((air, idx) => gridgrid(air, idx));
+    // if (mapObject) {
-    }
+    //   airPort?.map((air, idx) => gridgrid(air, idx));
+    // }
   }, [mapObject, coordValue]);
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (squarePaths.length > 315) {
+  //   if (squarePaths.length > 315) {
-      console.log(squarePaths, '>>>>');
+  //     // console.log(squarePaths, '>>>>');
-    }
+  //     const arr = [];
-  }, [squarePaths]);
+  //     squarePaths.map((path, idx) => {
+  //       const obj = {
+  //         type: 'Feature',
+  //         geometry: {
+  //           type: 'Polygon',
+  //           coordinates: [path]
+  //         },
+  //         properties: {
+  //           name: `${idx + 1}번째 영역`,
+  //           description: `${idx + 1}번째 영역 입니다.`,
+  //           type: '0001'
+  //         }
+  //       };
+  //       arr.push(obj);
+  //     });
+  //     console.log(arr, '>>>>>');
+  //   }
+  // }, [squarePaths]);
+
   const NaverMapInit = () => {
     const mapOptions = {
       center: new naver.maps.LatLng(37.520357, 126.610166),
@@ -303,110 +312,107 @@ export const NaverCustomMap = () => {
     }
   };
   const polyArea = (air, idx) => {
-    if (idx == 0) {
+    if (idx === 0) return;
-      const polyArr = [];
-      const radius = air.buffer;
-      const position = air.center; //공역 센터
-      const color = '#000';
-      const opacity = 0.7;
-      const coords = [];
 
-      let angle = 0;
+    const polyArr = [];
-      for (let i = 0; i < 4; i++) {
+    const radius = air.buffer;
-        angle += 90;
+    const position = air.center; //공역 센터
-        let buffer = 0;
+    const color = '#000';
-        // for (let j = 0; j < 4; j++) {
+    const opacity = 0.7;
-        for (let j = 0; j < 9; j++) {
+    const coords = [];
-          // buffer += 2000;
+
-          buffer += 1000;
+    let angle = 0;
-
+    for (let i = 0; i < 4; i++) {
-          //EPSG3857.getDestinationCoord
+      angle += 90;
-          //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
+      let buffer = 0;
-          const coord = new naver.maps.EPSG3857.getDestinationCoord(
+      // for (let j = 0; j < 4; j++) {
-            position,
+      for (let j = 0; j < 9; j++) {
-            angle,
+        // buffer += 2000;
-            buffer
+        buffer += 1000;
-          );
+
-          // console.log('coord>>>>>', coord);
+        //EPSG3857.getDestinationCoord
-          // coords.push(coord);
+        //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
-          // setCoordValue(coords);
+        const coord = new naver.maps.EPSG3857.getDestinationCoord(
-          let reduce = 0;
+          position,
-          reduce = air.reduce[j];
+          angle,
-
+          buffer
-          // 2km reduce
+        );
-          // [218.6, 905.4, 2195, 4560.2]
+        // console.log('coord>>>>>', coord);
-
+        // coords.push(coord);
-          if (angle % 180 == 0) {
+        // setCoordValue(coords);
-            const polyEW = new naver.maps.Polyline({
+        let reduce = 0;
-              path: [
+        reduce = air.reduce[j];
-                new naver.maps.EPSG3857.getDestinationCoord(
+
-                  coord,
+        // 2km reduce
-                  90,
+        // [218.6, 905.4, 2195, 4560.2]
-                  radius - reduce
+
-                ),
+        if (angle % 180 == 0) {
-                new naver.maps.EPSG3857.getDestinationCoord(
+          const polyEW = new naver.maps.Polyline({
-                  coord,
+            path: [
-                  270,
+              new naver.maps.EPSG3857.getDestinationCoord(
-                  radius - reduce
+                coord,
-                )
+                90,
-              ],
+                radius - reduce
-              strokeWeight: 0.8,
+              ),
-              strokeOpacity: opacity,
+              new naver.maps.EPSG3857.getDestinationCoord(
-              strokeColor: color
+                coord,
-              // map: map
+                270,
-            });
+                radius - reduce
-            polyArr.push(polyEW);
+              )
-          } else {
+            ],
-            const polyNS = new naver.maps.Polyline({
+            strokeWeight: 0.8,
-              path: [
+            strokeOpacity: opacity,
-                new naver.maps.EPSG3857.getDestinationCoord(
+            strokeColor: color
-                  coord,
+            // map: map
-                  0,
+          });
-                  radius - reduce
+          polyArr.push(polyEW);
-                ),
+        } else {
-                new naver.maps.EPSG3857.getDestinationCoord(
+          const polyNS = new naver.maps.Polyline({
-                  coord,
+            path: [
-                  180,
+              new naver.maps.EPSG3857.getDestinationCoord(
-                  radius - reduce
+                coord,
-                )
+                0,
-              ],
+                radius - reduce
-              strokeWeight: 0.8,
+              ),
-              strokeOpacity: opacity,
+              new naver.maps.EPSG3857.getDestinationCoord(
-              strokeColor: color
+                coord,
-              // map: props.map
+                180,
-            });
+                radius - reduce
-            polyArr.push(polyNS);
+              )
-          }
+            ],
+            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]);
-
-      // console.log(idx);
     }
-    //격자 공역
+    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]);
   };
 
   const gridgrid = (air, idx) => {
@@ -504,11 +510,8 @@ export const NaverCustomMap = () => {
 
     const arr = [];
     path.map(tt => {
-      const latlng = {
+      const latlngJson = [tt.lng(), tt.lat(), 0];
-        x: tt.lng(),
+      arr.push(latlngJson);
-        y: tt.lat()
-      };
-      arr.push(latlng);
     });
     setSquarePaths(prev => [...prev, arr]);
   };