공역표출정보 최신 업데이트

src/components/map/geojson/_AirArea.js

@@ -0,0 +1,18 @@
+import prohibitedArea from './_prohibitedArea.json';
+import restrictedArea from './_restrictedArea.json';
+import controlArea from './_controlArea.json';
+import aerodromeArea from './_aerodromeArea.json';
+import airFieldArea from './_airFieldArea.json';
+import ultraLightVehicleArea from './_ultraLightVehicleArea.json';
+
+export const airArea = {
+  type: 'FeatureCollection',
+  features: [
+    ...prohibitedArea.features, // 비행금지구역
+    ...restrictedArea.features, // 비행제한구역
+    ...controlArea.features, // 관제권(공항)
+    ...aerodromeArea.features, // 관제권(군사/민간)
+    ...airFieldArea.features, // 경량항공기이착륙장
+    ...ultraLightVehicleArea.features // (UA)초경량비행장치공역
+  ]
+};

src/components/map/mapbox/MapBoxMap.js

@@ -27,6 +27,9 @@ import FeatureAirZone from './feature/FeatureAirZone';
 
 import threebox from 'threebox-plugin';
 
+// v월드 공역
+import { airArea } from '../geojson/_AirArea';
+
 import geoJson from '../../map/geojson/airArea.json';
 import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
 // 김포 격자 공역
@@ -116,23 +119,38 @@ export default function MapBoxMap() {
   const handlerCreateAirSpace = (
     map,
     useGeoJson = {
-      ...geoJson,
+      // ...geoJson,
+      ...airArea,
       ...flatGimpo,
-      features: [...geoJson.features, ...flatGimpo.features]
+      features: [
+        // ...geoJson.features,
+        ...airArea.features,
+        ...flatGimpo.features
+      ]
     }
   ) => {
     // useGeoJson = mapState.liner
     useGeoJson =
       mapState.areaType === 'linear'
         ? {
-            ...geoJson,
+            // ...geoJson,
+            ...airArea,
             ...flatGimpo,
-            features: [...geoJson.features, ...flatGimpo.features]
+            features: [
+              // ...geoJson.features,
+              ...airArea.features,
+              ...flatGimpo.features
+            ]
           }
         : {
-            ...geoJson,
+            // ...geoJson,
+            ...airArea,
             ...gimPoGrid,
-            features: [...geoJson.features, ...gimPoGrid.features]
+            features: [
+              // ...geoJson.features,
+              ...airArea.features,
+              ...gimPoGrid.features
+            ]
           };
     if (map.getLayer('maine')) {
       map.removeLayer('maine');

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

@@ -1,6 +1,10 @@
 import '../../../../assets/css/custom.css';
 import { useEffect } from 'react';
 import geoJson from '../../geojson/airArea.json';
+
+// v월드 공역
+import { airArea } from '../../geojson/_AirArea';
+
 import { useSelector } from '@src/redux/store';
 import { airSquareLine } from './FeatureAirSquare';
 
@@ -155,8 +159,12 @@ export default function FeatureAirZone(props) {
   // 공역 생성 함수
   const featureAirZoneInit = () => {
     const useGeoJson = {
-      ...geoJson,
-      features: [...geoJson.features]
+      // ...geoJson,
+      ...airArea,
+      features: [
+        // ...geoJson.features
+        ...airArea.features
+      ]
     };
 
     // 비행장 마커 생성
@@ -171,7 +179,7 @@ export default function FeatureAirZone(props) {
       });
 
     // 격자 공역 생성
-    airPort.map(air => airSquareLine(air, props.map));
+    // airPort.map(air => airSquareLine(air, props.map));
     // 마우스 오버 이벤트 생성
     featureAirEvent(markers);
 

src/utility/MapUtils.js

@@ -2,6 +2,9 @@ import * as turf from '@turf/turf';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
+// v월드 공역
+import { airArea } from '../components/map/geojson/_AirArea';
+
 import geoJson from '../components/map/geojson/airArea.json';
 import flatGimpo from '../components/map/geojson/flatGimpoAirportAirArea.json';
 
@@ -319,9 +322,14 @@ export const handlerCreateAirSpace = (
   map,
   mapControl,
   useGeoJson = {
-    ...geoJson,
+    // ...geoJson,
+    ...airArea,
     ...flatGimpo,
-    features: [...geoJson.features, ...flatGimpo.features]
+    features: [
+      // ...geoJson.features,
+      ...airArea.features,
+      ...flatGimpo.features
+    ]
   }
 ) => {
   if (map.getLayer('maine')) {

src/views/control/setting/ControlSetting.js

@@ -9,6 +9,10 @@ import {
   clientFlightAreaClick,
   clientMapTypeChange
 } from '@src/redux/features/control/map/mapSlice';
+
+// v월드 공역
+import { airArea } from '../../../components/map/geojson/_AirArea';
+
 import geoJson from '../../../components/map/geojson/airArea.json';
 import gimPo from '../../../components/map/geojson/gimpoAirportAirArea.json';
 // 김포 격자 공역
@@ -33,9 +37,14 @@ const ControlSetting = props => {
       const source = mapState.map.getSource('maine');
       if (source) {
         const useGeoJson = {
-          ...geoJson,
+          // ...geoJson,
+          ...airArea,
           ...flatGimpo,
-          features: [...geoJson.features, ...flatGimpo.features]
+          features: [
+            // ...geoJson.features,
+            ...airArea.features,
+            ...flatGimpo.features
+          ]
         };
         let arrGeoJson = [];
 
@@ -53,7 +62,7 @@ const ControlSetting = props => {
           } else if (item.properties.type === '0003' && mapState.area0003) {
             arrGeoJson.push({
               ...item,
-              properties: { ...item.properties, color: '#FFA800' }
+              properties: { ...item.properties, color: '#f5dcab' } //FFA800
             });
           } else if (item.properties.type === '0004' && mapState.area0004) {
             arrGeoJson.push({
@@ -68,7 +77,7 @@ const ControlSetting = props => {
           } else if (item.properties.type === '0006' && mapState.area0006) {
             arrGeoJson.push({
               ...item,
-              properties: { ...item.properties, color: '#009cad' }
+              properties: { ...item.properties, color: '#a4edf5' } //009cad
             });
           }
         });
@@ -261,7 +270,8 @@ const ControlSetting = props => {
                 </dt>
                 <dt>
                   <div className='list-left-txt'>
-                    <span className='dot-icon color-brown'></span>비행장(군사)
+                    <span className='dot-icon color-brown'></span>
+                    관제권(군사/민간)
                   </div>
                   <div className='list-right-txt'>
                     <CustomInput
@@ -277,7 +287,8 @@ const ControlSetting = props => {
                 </dt>
                 <dt>
                   <div className='list-left-txt'>
-                    <span className='dot-icon color-purple'></span>이착륙장
+                    <span className='dot-icon color-purple'></span>
+                    경량항공기이착륙장
                   </div>
                   <div className='list-right-txt'>
                     <CustomInput