공역 표출 토글 버튼 맵 리로딩 -> 맵 업데이트로 수정

src/components/map/mapbox/MapBoxMap.js

@@ -99,16 +99,7 @@ export default function MapBoxMap() {
     if (mapObject) {
       handlerCreateAirSpace(mapObject);
     }
-  }, [
+  }, [mapControl.areaType]);
-    mapControl.area0001,
-    mapControl.area0002,
-    mapControl.area0003,
-    mapControl.area0004,
-    mapControl.area0005,
-    mapControl.area0006,
-    // mapControl.liner
-    mapControl.areaType
-  ]);
 
   // 공역 생성
   const handlerCreateAirSpace = (
@@ -136,7 +127,7 @@ export default function MapBoxMap() {
       map.removeLayer('maine');
       map.removeSource('maine');
     }
-    console.log(mapControl.areaType);
+
     if (altitudeMarker.length > 0) {
       altitudeMarker.map(i => {
         i.remove();

src/views/control/setting/ControlSetting.js

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { Button, ButtonGroup, CustomInput } from 'reactstrap';
@@ -6,6 +7,12 @@ import {
   areaClickAction,
   mapTypeChangeAction
 } from '../../../modules/control/map/actions/controlMapActions';
+import geoJson from '../../../components/map/geojson/airArea.json';
+import gimPo from '../../../components/map/geojson/gimpoAirportAirArea.json';
+// 김포 격자 공역
+import gimPoGrid from '../../../components/map/geojson/airportAirArea.json';
+// 김포 선형 공역
+import flatGimpo from '../../../components/map/geojson/flatGimpoAirportAirArea.json';
 
 const ControlSetting = props => {
   const dispatch = useDispatch();
@@ -14,6 +21,68 @@ const ControlSetting = props => {
   // 지도, 지도타입, 공역 타입 컨트롤
   const mapControl = useSelector(state => state.controlMapReducer);
 
+  useEffect(() => {
+    if (mapControl.map) {
+      const source = mapControl.map.getSource('maine');
+      if (source) {
+        const useGeoJson = {
+          ...geoJson,
+          ...flatGimpo,
+          features: [...geoJson.features, ...flatGimpo.features]
+        };
+        let arrGeoJson = [];
+
+        useGeoJson.features.map(item => {
+          if (item.properties.type === '0001' && mapControl.area0001) {
+            arrGeoJson.push({
+              ...item,
+              properties: { ...item.properties, color: '#FF3648' }
+            });
+          } else if (item.properties.type === '0002' && mapControl.area0002) {
+            arrGeoJson.push({
+              ...item,
+              properties: { ...item.properties, color: '#FFA1AA' }
+            });
+          } else if (item.properties.type === '0003' && mapControl.area0003) {
+            arrGeoJson.push({
+              ...item,
+              properties: { ...item.properties, color: '#FFA800' }
+            });
+          } else if (item.properties.type === '0004' && mapControl.area0004) {
+            arrGeoJson.push({
+              ...item,
+              properties: { ...item.properties, color: '#A16B00' }
+            });
+          } else if (item.properties.type === '0005' && mapControl.area0005) {
+            arrGeoJson.push({
+              ...item,
+              properties: { ...item.properties, color: '#AB40FF' }
+            });
+          } else if (item.properties.type === '0006' && mapControl.area0006) {
+            arrGeoJson.push({
+              ...item,
+              properties: { ...item.properties, color: '#009cad' }
+            });
+          }
+        });
+
+        useGeoJson.features = arrGeoJson.filter(
+          i => i.geometry.type === 'Polygon'
+        );
+
+        source.setData({ ...useGeoJson });
+      }
+    }
+  }, [
+    mapControl.map,
+    mapControl.area0001,
+    mapControl.area0002,
+    mapControl.area0003,
+    mapControl.area0004,
+    mapControl.area0005,
+    mapControl.area0006
+  ]);
+
   // 지도 유형 변경
   const handlerMapType = val => {
     if (val === mapControl.mapType) return;
@@ -29,7 +98,6 @@ const ControlSetting = props => {
       mapControl.map.setMaxPitch(85);
       mapControl.map.dragRotate.enable();
     } else if (val === '2D') {
-      console.log(mapControl.map);
       mapControl.map.setMaxPitch(0);
       mapControl.map.setBearing(0);
       mapControl.map.dragRotate.disable();
@@ -38,7 +106,7 @@ const ControlSetting = props => {
   };
 
   // 공역 표출
-  const handlerAreaClick = val => {
+  const handlerAreaClick = (e, val) => {
     dispatch(areaClickAction(val));
   };
 
@@ -79,13 +147,13 @@ const ControlSetting = props => {
           <ButtonGroup>
             <Button
               color={mapControl.areaType === 'linear' ? 'primary' : ''}
-              onClick={e => handlerAreaClick('linear')}
+              onClick={e => handlerAreaClick(e, 'linear')}
             >
               선형
             </Button>
             <Button
               color={mapControl.areaType === 'square' ? 'primary' : ''}
-              onClick={e => handlerAreaClick('square')}
+              onClick={e => handlerAreaClick(e, 'square')}
             >
               격자
             </Button>
@@ -128,7 +196,7 @@ const ControlSetting = props => {
                 </div>
                 <div className='list-right-txt'>
                   <CustomInput
-                    onClick={e => handlerAreaClick('0001')}
+                    onClick={e => handlerAreaClick(e, '0001')}
                     className='custom-control-red'
                     type='switch'
                     id='test01'
@@ -144,7 +212,7 @@ const ControlSetting = props => {
                 </div>
                 <div className='list-right-txt'>
                   <CustomInput
-                    onClick={e => handlerAreaClick('0002')}
+                    onClick={e => handlerAreaClick(e, '0002')}
                     className='custom-control-pink'
                     type='switch'
                     id='test02'
@@ -160,7 +228,7 @@ const ControlSetting = props => {
                 </div>
                 <div className='list-right-txt'>
                   <CustomInput
-                    onClick={e => handlerAreaClick('0003')}
+                    onClick={e => handlerAreaClick(e, '0003')}
                     className='custom-control-orange'
                     type='switch'
                     id='test03'
@@ -176,7 +244,7 @@ const ControlSetting = props => {
                 </div>
                 <div className='list-right-txt'>
                   <CustomInput
-                    onClick={e => handlerAreaClick('0004')}
+                    onClick={e => handlerAreaClick(e, '0004')}
                     className='custom-control-brown'
                     type='switch'
                     id='test04'
@@ -192,7 +260,7 @@ const ControlSetting = props => {
                 </div>
                 <div className='list-right-txt'>
                   <CustomInput
-                    onClick={e => handlerAreaClick('0005')}
+                    onClick={e => handlerAreaClick(e, '0005')}
                     className='custom-control-purple'
                     type='switch'
                     id='test05'
@@ -209,7 +277,7 @@ const ControlSetting = props => {
                 </div>
                 <div className='list-right-txt'>
                   <CustomInput
-                    onClick={e => handlerAreaClick('0006')}
+                    onClick={e => handlerAreaClick(e, '0006')}
                     className='custom-control-skyblue'
                     type='switch'
                     id='test06'