김포국제공항 관제권 공역 분리

src/components/map/naver/NaverMap.js

@@ -6,80 +6,81 @@ import NaverMapControl from './NaverMapControl';
 import { NaverMapSearch } from './search/NaverMapSearch';
 import { FeatureAirZone } from './feature/FeatureAirZone';
 import geoJson from '../geojson/airArea.json';
+import testJosn from '../geojson/airTest.json';
 import { controlGroupAuthAction } from '../../../modules/control/gp';
 import DronPlan from './dron/DronPlan';
 import DronToast from './dron/DronToast';
+import SensorZone from './sensor/SensorZone';
 
 export const NaverCustomMap = () => {
-    const dispatch = useDispatch();
+  const dispatch = useDispatch();
-    const naver = window.naver;    
+  const naver = window.naver;
-    
+
-    const [mapObject, setMapObject] = useState(null);
+  const [mapObject, setMapObject] = useState(null);
-    const [arrPolyline, setArrPolyline] = useState([]);    
+  const [arrPolyline, setArrPolyline] = useState([]);
-    
+
-    let features = geoJson.features;
+  let features = geoJson.features;
-
+  let test = testJosn.features;
-    useEffect(() => {
+
-        NaverMapInit();
+  useEffect(() => {
-        dispatch(controlGroupAuthAction.request());
+    NaverMapInit();
-    }, []);
+    dispatch(controlGroupAuthAction.request());
-    
+  }, []);
-
+
-    const NaverMapInit = () => {
+  const NaverMapInit = () => {
-        const mapOptions = {
+    const mapOptions = {
-            center: new naver.maps.LatLng(37.520357, 126.610166),
+      center: new naver.maps.LatLng(37.520357, 126.610166),
-            // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
+      // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
-            // zoom: 10,
+      // zoom: 10,
-            zoom: 14,
+      zoom: 14,
-            zoomControl: true,
+      zoomControl: true,
-            mapTypeId: naver.maps.MapTypeId.NORMAR,
+      mapTypeId: naver.maps.MapTypeId.NORMAR,
-            zoomControlOptions: {
+      zoomControlOptions: {
-                position: naver.maps.Position.TOP_LEFT,
+        position: naver.maps.Position.TOP_LEFT,
-
+
-                style: naver.maps.ZoomControlStyle.SMALL
+        style: naver.maps.ZoomControlStyle.SMALL
-            }
+      }
-        };
-
-        setMapObject(new naver.maps.Map('map', mapOptions));
     };
 
-    const handleHistoryInit = (line) => {
+    setMapObject(new naver.maps.Map('map', mapOptions));
-        setArrPolyline([...arrPolyline, line])
+  };
-    }
 
-    return (
+  const handleHistoryInit = line => {
-        <>
+    setArrPolyline([...arrPolyline, line]);
-            <div id='map' style={{ width: '100%', height: '100vh' }}></div>
+  };
-            {mapObject != null ? (
-                <>
-                    <DronMarker
-                        map={mapObject}
-                        naver={naver}
-                    />
 
-                    <DronPlan
+  return (
-                        map={mapObject}
+    <>
-                        naver={naver}
+      <div id='map' style={{ width: '100%', height: '100vh' }}></div>
-                    />                    
+      {mapObject != null ? (
+        <>
+          <DronMarker map={mapObject} naver={naver} />
 
-                    <NaverMapControl map={mapObject} />
+          <DronPlan map={mapObject} naver={naver} />
 
-                    <DronHistory
+          <NaverMapControl map={mapObject} />
-                        map={mapObject}
-                        naver={naver}
-                        arrPolyline={arrPolyline}                        
-                        handleHistoryInit={handleHistoryInit}
-                    />
 
-                    <DronToast />
+          <DronHistory
+            map={mapObject}
+            naver={naver}
+            arrPolyline={arrPolyline}
+            handleHistoryInit={handleHistoryInit}
+          />
 
-                    <FeatureAirZone map={mapObject} naver={naver} features={features} />
+          <DronToast />
-                    {/* <NaverMapSearch map={mapObject} naver={naver} /> */}
-                    {/* <SensorZone map={mapObject} naver={naver} /> */}
-                </>
-            ) : null}
 
-            {/* */}
+          <FeatureAirZone
+            map={mapObject}
+            naver={naver}
+            features={features}
+            test={test}
+          />
+          {/* <NaverMapSearch map={mapObject} naver={naver} /> */}
+          {/* <SensorZone map={mapObject} naver={naver} /> */}
         </>
-    );
+      ) : null}
+
+      {/* */}
+    </>
+  );
 };

src/components/map/naver/feature/FeatureAirZone.js

@@ -114,6 +114,22 @@ export const FeatureAirZone = props => {
         icon: null
       };
     });
+
+    // const coordzip = [];
+    // let tt = 140;
+    // for (let i = 0; i <= 180; i++) {
+    //   const diff = tt;
+
+    //   const coord1 = new naver.maps.EPSG3857.getDestinationCoord(
+    //     new naver.maps.LatLng(37.558599, 126.797627),
+    //     tt,
+    //     9300
+    //   );
+    //   coordzip.push(coord1);
+    //   tt += 2;
+    // }
+    // console.log(coordzip);
+    // console.log(tt);
   };
 
   const featureAirEvent = () => {