비행 구역 기초 좌표 상세 작업

src/components/basis/flight/plan/FlightPlanAreaMap.js

@@ -71,11 +71,12 @@ const FlightPlanAreaMap = (props) => {
     };    
 
     const handleInitCoordinates = () => {
-        dispatch(AREA_COORDINATE_LIST_SAVE(null))
+        const init = initFlightBas.initDetail.areaList.concat();
+        dispatch(AREA_COORDINATE_LIST_SAVE(init))
     }
         
     const handleCoordinates = (areaInfo) => {        
-        const initAreaList = Object.assign([], initFlightBas.initDetail.areaList);                    
+        const initAreaList = initFlightBas.initDetail.areaList.concat()
         const coordList = []; 
 
         // radius = 10;            
@@ -88,12 +89,14 @@ const FlightPlanAreaMap = (props) => {
             coordList.push(coord);
         });
 
-        initAreaList[0].bufferZone = areaInfo.bufferZone;        
-        initAreaList[0].areaType = areaInfo.areaType;
+        // initAreaList[0].bufferZone = areaInfo.bufferZone;        
+        // initAreaList[0].areaType = areaInfo.areaType;
         
         const areaList = initAreaList.map((area, i) => {
             return {
                 ...area,
+                bufferZone: areaInfo.bufferZone,
+                areaType: areaInfo.areaType,
                 coordList : coordList
             }
         })        

src/components/map/naver/draw/FlightPlanDrawTest.js

@@ -62,7 +62,7 @@ export const FlightPlanDrawTest = props => {
   }, [mapControl.drawType])
 
   useEffect(() => {
-    // handleDetailDrwa();
+    handleDetailDrwa();
   }, [])
 
   const zoomChange = () => {
@@ -80,6 +80,7 @@ export const FlightPlanDrawTest = props => {
   }
 
   const drawInit = () => {   
+    console.log(mapControl.drawType); 
     if(mapControl.drawType==='LINE') {
       onClickButton('LINE');
     } else if(mapControl.drawType==='CIRCLE') {
@@ -87,7 +88,7 @@ export const FlightPlanDrawTest = props => {
     } else if(mapControl.drawType==='POLYGON') {
       onClickButton('POLYGON');
     } else if(mapControl.drawType==='RESET') {
-      // onClickReset('RESET')
+      onClickReset('RESET')
     }
   }
 
@@ -103,7 +104,7 @@ export const FlightPlanDrawTest = props => {
       return;
     }
 
-    mode = newMode;
+    // mode = newMode; 
 
     startMode(newMode);
   }
@@ -111,40 +112,69 @@ export const FlightPlanDrawTest = props => {
   const clearMode = (mode) => { 
     console.log('clearMode')
 
-    if(!mode) return;    
+    // if(!mode) return;
     
-    if (mode === 'LINE') {
+    // clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로..
     if (pastPolyline) {
+      console.log('clrea polyline ', pastPolyline)
       pastPolyline.setMap(null);
-        pastDragCircle.forEach(prev => prev.setMap(null));
-        setDragCircle([]);        
-      }
+      pastDragCircle.forEach(c => c.setMap(null));
 
-    } else if(mode === 'POLYGON') {
-      if(pastPolygon) {
-        pastPolygon.setMap(null);
-        setPolygon();
-        pastDragCircle.forEach(prev => prev.setMap(null));
+      setPolyline();
       setDragCircle([]);
     }
-    } else if(mode === 'CIRCLE') {
     if (pastCircle) {
+      console.log('clrea circle ', pastCircle)
       pastCircle.setMap(null);
-        setCircle();
       naver.maps.Event.removeListener(pastEve); 
+
+      setCircle();
     }
+    if (pastPolygon) {
+      console.log('clrea polygon ', pastPolygon)
+      pastPolygon.setMap(null);
+      pastDragCircle.forEach(c => c.setMap(null));
+
+      setPolygon();
+      setDragCircle([]);        
     }
 
     finishDraw();   
     props.handleInitCoordinates();     
+    
+    // if(mode === 'LINE' && pastPolyline) {
+    //   pastPolyline.setMap(null);
+    //   pastDragCircle.forEach(c => c.setMap(null));
+
+    //   setPolyline({});
+    //   setDragCircle([]);
+    // }
+
+    // if(mode === 'POLYGON' && pastPolygon) {
+    //   pastPolygon.setMap(null);
+    //   pastDragCircle.forEach(c => c.setMap(null));
+
+    //   setPolygon({});
+    //   setDragCircle([]);
+    // }
+
+    // if(mode === 'CIRCLE' && pastCircle) {           
+    //   pastCircle.setMap(null);
+    //   naver.maps.Event.removeListener(pastEve); 
+
+    //   setCircle({});      
+    // }
+
+    // if(mode === 'RESET') {
+    //   if(pastPolyline) pastPolyline.setMap(null);
+    //   if(pastCircle) pastCircle.setMap(null);
+    //   if(pastPolygon) pastPolygon.setMap(null);
+    // }    
   }
 
   const startMode = (mode) => {
     console.log('startMode')
 
-    // console.log(polyline, 'polyline', pastPolyline, 'pastPolyline');
-    // console.log(polygon, 'polygon', pastPolygon, 'pastPolygon');
-    // console.log(circle, 'circle',  pastCircle, 'pastCircle');
     if (!mode) return;
     
     if (mode === 'LINE') {
@@ -655,8 +685,9 @@ export const FlightPlanDrawTest = props => {
   }
 
   const onClickReset = () => {    
+    console.log('onClickRest - ', mapControl.drawType);
     if(mapControl.drawType === 'RESET') {      
-      clearMode(mode);
+      clearMode('RESET');
     }    
   }
 
@@ -664,15 +695,16 @@ export const FlightPlanDrawTest = props => {
 
     if (props.areaCoordList) {         
       const areas = props.areaCoordList[0];        
-        if(areas.areaType && areas.areaType === 'LINE') {
+
       const paths = [];
 
       areas.coordList.forEach((coord) => {
         const path = new naver.maps.LatLng(coord.lat, coord.lon)
 
         paths.push(path);
-          })          
+      });      
 
+      if(areas.areaType && areas.areaType === 'LINE') {
         polyline = new naver.maps.Polyline({
           strokeLineCap: 'round',
           strokeLineJoin: 'round',
@@ -687,16 +719,34 @@ export const FlightPlanDrawTest = props => {
         // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
       }
 
-        if(areas.areaType && areas.areaType === 'PLOYGON') {
+      if(areas.areaType && areas.areaType === 'POLYGON') {
+        polygon = new naver.maps.Polygon({
+          strokeColor: '#283046',
+          strokeOpacity: 1,
+          fillColor: '#7367F0',
+          fillOpacity: 0.1,
+          paths: paths,
+          map: map
+        });
 
+        setPolygon(polygon);
       }
 
       if(areas.areaType && areas.areaType === 'CIRCLE') {
+        circle = new naver.maps.Circle({
+          strokeColor: '#283046',
+          strokeOpacity: 1,
+          fillColor: '#7367F0',
+          fillOpacity: 0.1,
+          center: paths[0],
+          radius: areas.bufferZone,
+          map: map,
+          clickable: true
+        });
 
+        setCircle(circle);
       }
-
     }
-
 }
 
   return (

src/containers/basis/flight/plan/FlightPlanAreaContainer.js

@@ -30,7 +30,7 @@ const FlightPlanAreaContainer = ({handleModal}) => {
     }
 
     useEffect(() => {
-        dispatch(drawTypeChangeAction('RESET'));        
+        dispatch(drawTypeChangeAction(''));        
         getAirAreaList();
     }, []);
 

src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js

@@ -53,6 +53,8 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => {
     // detail의 area 정보가 존재하면 detail 정보로 매핑    
     if(detail.areaList[0].planAreaSno !== 0) {
       setAreaDetail(detail.areaList);
+      
+      dispatch(Actions.AREA_DETAIL_LIST_SAVE(detail.areaList));
     }   
   }, [])
 

src/containers/basis/flight/plan/FlightPlanDetailContainer.js

@@ -99,23 +99,31 @@ const FlightPlanDetailContainer = () => {
 
     useEffect(() => {
         if(areaList !== undefined) {            
-            const detailAreaList = detailData.areaList.concat();
-            const area = Object.assign({}, initFlightBas['area']);
+            // const detailAreaList = detailData.areaList.concat();
+            // const area = Object.assign({}, initFlightBas['area']);
 
-            area.bufferZone = areaList[0].bufferZone;
-            area.fltElev = areaList[0].fltElev;
-            area.fltMethod = areaList[0].fltMethod;
-            area.coordList = areaList[0].coordList;
 
-            detailAreaList.forEach((a, i) => {
-                detailAreaList[i] = area;
+            const detailAreaList = areaList.map((area) => {
+              return {
+                ...area
+              }  
+            })
 
-                // if(a.planAreaSno === 0) { // create
-                //     areaList[i] = area;
-                // } else { // update
+            // area.bufferZone = areaList[0].bufferZone;
+            // area.fltElev = areaList[0].fltElev;
+            // area.fltMethod = areaList[0].fltMethod;
+            // area.areaType = areaList[0]
+            // area.coordList = areaList[0].coordList;
 
-                // }
-            });            
+            // detailAreaList.forEach((a, i) => {
+            //     detailAreaList[i] = area;
+                
+            //     // if(a.planAreaSno === 0) { // create
+            //     //     areaList[i] = area;
+            //     // } else { // update
+
+            //     // }
+            // });            
 
             setDetailData(prevState => {
                 return {

src/modules/basis/flight/reducers/basisFlightReducer.ts

@@ -87,5 +87,6 @@ export const flightReducer = createReducer<FlightState, Actions.FlightAction>(in
    produce(state, draft => {
      const data = action.payload;
      draft.areaList = data;
+     draft.areaCoordList = data;        
    })
  )