[비행 구역] 기촤 좌표 create 작업

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

@@ -46,7 +46,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, data
                               const latlon = coord.lat + ' / ' + coord.lon;
 
                               return (
-                                <Col key={idx} className='list-input' lg={4} md={6} sm={12}>
+                                <Col key={idx} className='list-input' lg={6} md={6} sm={12}>
                                   <FormGroup>
                                     <Label for='test'><span className='necessary'>*</span>좌표 {idx+1} </Label>
                                     <Input
@@ -62,7 +62,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, data
                               )
                             })
                           :
-                            <Col className='list-input' lg={4} md={6} sm={12}>
+                            <Col className='list-input' lg={6} md={6} sm={12}>
                               <FormGroup>
                                 <Label for='test'><span className='necessary'>*</span>좌표 1</Label>
                                 <Input

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

@@ -15,7 +15,6 @@ import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/contr
 import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest';
 import { initFlight, initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel';
 import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction';
-import { VscDebugBreakpointLogUnverified } from 'react-icons/vsc';
 
 const FlightPlanAreaMap = (props) => {
     const dispatch = useDispatch();
@@ -23,11 +22,12 @@ const FlightPlanAreaMap = (props) => {
     const airArea = props.airArea;    
 
     const mapControl = useSelector(state => state.controlMapReducer);
+    const { areaCoordList } = useSelector(state => state.flightState);
 
     const [map, setMap] = useState();
     const [isMapLoad, setIsMapLoad] = useState(false);
     const [mode, setMode] = useState();
-    const [areaCoordList, setAreaCoordList] = useState(initFlightBas.initDetail.areaList);
+    const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList);    
 
     useEffect(() => {        
         NaverMapInit();        
@@ -70,20 +70,27 @@ const FlightPlanAreaMap = (props) => {
         dispatch(drawCheckAction(val));
     };    
 
-    const handleCoordinates = (coords, radius) => {
+    const handleInitCoordinates = () => {
+        dispatch(AREA_COORDINATE_LIST_SAVE(null))
+    }
+        
+    const handleCoordinates = (areaInfo) => {        
         const initAreaList = Object.assign([], initFlightBas.initDetail.areaList);                    
         const coordList = []; 
 
         // radius = 10;         
-        coords.forEach((c, i) => {
+        areaInfo.coordinates.forEach((c, i) => {
             const coord = Object.assign({}, initFlightBas['coord']);
 
-            coord.lat = c._lat;
-            coord.lon = c._lng;
+            coord.lat = c.lat;
+            coord.lon = c.lon;
 
             coordList.push(coord);
         });
 
+        initAreaList[0].bufferZone = areaInfo.bufferZone;        
+        initAreaList[0].areaType = areaInfo.areaType;
+        
         const areaList = initAreaList.map((area, i) => {
             return {
                 ...area,
@@ -92,7 +99,7 @@ const FlightPlanAreaMap = (props) => {
         })        
 
         // dispatch(AREA_COORDINATE_LIST_SAVE(areaList))
-        setAreaCoordList(areaList);
+        setMapAreaCoordList(areaList);
     }
 
     return (
@@ -108,17 +115,19 @@ const FlightPlanAreaMap = (props) => {
 
                 <div style={{ position: 'relative' }}>
                     <div id="map" style={{ width: '100%', height: '60vh' }}>
-                        <FlightPlanDrawTest
+                        {isMapLoad ? <FlightPlanDrawTest
                             map={map} 
                             naver={naver}
                             mode={mode}                  
+                            areaCoordList={areaCoordList}                                        
                             handleCoordinates={handleCoordinates}       
-                        />
+                            handleInitCoordinates={handleInitCoordinates}                                                    
+                        /> : null}
 
                         <Button.Ripple
                             color='primary'
                             className='area-button'
-                            onClick = {e => props.handleConfirm(areaCoordList)}
+                            onClick = {e => props.handleConfirm(mapAreaCoordList)}
                         >
                             확인
                         </Button.Ripple>

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

@@ -61,13 +61,9 @@ export const FlightPlanDrawTest = props => {
     drawInit();
   }, [mapControl.drawType])
 
-  const handlerDrawType = val => {
-    dispatch(drawTypeChangeAction(val));
-  };
-
-  // useEffect(() => {
-  //   onClickCheck();
-  // }, [mapControl.drawCheck])
+  useEffect(() => {
+    // handleDetailDrwa();
+  }, [])
 
   const zoomChange = () => {
     let change;
@@ -91,13 +87,12 @@ export const FlightPlanDrawTest = props => {
     } else if(mapControl.drawType==='POLYGON') {
       onClickButton('POLYGON');
     } else if(mapControl.drawType==='RESET') {
-      onClickButton('RESET')
+      // onClickReset('RESET')
     }
   }
 
   const onClickButton = (newMode) => {
     console.log('onClickButton');        
-    if(newMode === 'RESET') return false; 
 
     zoomChange();    
 
@@ -121,9 +116,6 @@ export const FlightPlanDrawTest = props => {
     if (mode === 'LINE') {
       if(pastPolyline) {                
         pastPolyline.setMap(null);
-        setPolyline();
-        pastBuffer.setMap(null);
-        setBuffer();
         pastDragCircle.forEach(prev => prev.setMap(null));
         setDragCircle([]);        
       }
@@ -142,7 +134,9 @@ export const FlightPlanDrawTest = props => {
         naver.maps.Event.removeListener(pastEve);        
       }
     }
+
     finishDraw();   
+    props.handleInitCoordinates(); 
   }
 
   const startMode = (mode) => {
@@ -203,22 +197,10 @@ export const FlightPlanDrawTest = props => {
           dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) }))
         }
         setDragCircle(dragCircle);
+        setPolyline(polyline);
         
-        //파싱
-        // let polypathJSON = new Array();
-        // for(let i = 0; i< polypaths.length; i++) {
-        //   let obj = new Object();
-
-        //   obj.x = '' + polypaths[i]._lng + '';
-        //   obj.y = '' + polypaths[i]._lat + '';
+        setAreaInfo(polypaths);
 
-        //   obj = JSON.stringify(obj);
-        //   polypathJSON.push(JSON.parse(obj));  
-        // }
-        // console.log(polypathJSON, 'json polyline path');
-        // bufferMove();
-        // bufferTest();
-        props.handleCoordinates(polypaths);
       } else {
         polyline.setMap(null);
         polyline = '';
@@ -481,7 +463,7 @@ export const FlightPlanDrawTest = props => {
     if(polygon) {
       var path = polygon.getPath()._array;
       setPolygon(polygon);
-      setAreaInfo(path, '');
+      // setAreaInfo(path, '');
     }
 
     $(document).off('mousemove.measure');
@@ -498,35 +480,46 @@ export const FlightPlanDrawTest = props => {
   }
 
   const setAreaInfo = (path, bufferpath) => {    
-    areaInfo = '';
+    areaInfo = {
+      coordinates : [],
+      bufferZone: 0,
+    };
 
-    if(path) {
     let prePath = [];
-      path.forEach(prev=> prePath.push([prev.x, prev.y]))
+    if(path) {      
+      path.forEach((item) => {
+        const p = {
+          lat: item.y,
+          lon: item.x
         }
 
-    if(polyline) {
-      areaInfo = {
-        linepath: prePath,
-        linebuffer: 50,
-        bufferpath: bufferpath
+        prePath.push(p);
+      })
+      // path.forEach(prev=> prePath.push([prev.x, prev.y]))
     }    
+
+    if(polyline) {
+      areaInfo.coordinates = prePath;               
+      areaInfo.areaType = 'LINE';      
     } else if(polygon) {
-      areaInfo = {
-        polygonpath: prePath
-      }
+      areaInfo.coordinates = prePath;
+      areaInfo.areaType = 'POLYGON';      
     } else if(circle) {      
-      areaInfo = {
-        center: circle.getCenter(),
-        radius: circle.getRadius()
+      const point = {
+        lat: circle.getCenter().y,
+        lon: circle.getCenter().x
       }
+      
+      areaInfo.coordinates.push(point);
+      areaInfo.bufferZone = circle.getRadius();
+      areaInfo.areaType = 'CIRCLE';      
     }
-    console.log(areaInfo, 'areaInfo')
+    props.handleCoordinates(areaInfo);
+    // console.log(areaInfo, 'areaInfo')
   }
 
   const bufferTest = () => {
     let pol = polyline.getPath()._array;  //latlng point 다 준건가?    
-    // console.log(pol)
 
     let lineStringPaths = [];
     for(let i = 0; i< pol.length; i++) {
@@ -564,7 +557,6 @@ export const FlightPlanDrawTest = props => {
     )
 
     const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)    
-    // console.log(bufferResultGeoJSON)
 
     // bufferPolyline = new naver.maps.Polyline({
     //   strokeColor: '#ff0000',
@@ -637,7 +629,6 @@ export const FlightPlanDrawTest = props => {
 
       const distance = (100 * 0.001) / 111.12;  //100미터
       const line = reader.read(coords);      
-      // const buffer = BufferOp.bufferOp(line, distance);
       const buffer = BufferOp.bufferOp(line, distance, 0, 3);
 
       let bufferpath = buffer._shell._points._coordinates;
@@ -655,48 +646,54 @@ export const FlightPlanDrawTest = props => {
         strokeStyle: [4, 4],
         strokeOpacity: 1,
         path : bufferPaths,        
-        // path: [
-          
-        // ],
         map: map
       });      
-
-      
       // setAreaInfo(polyline.getPath()._array, bufferPath);
       setAreaInfo(polyline.getPath()._array, bufferPaths);
       setPolyline(polyline);
       setBuffer(bufferPolyline)
   }
 
-  const onClickCheck = () => {
-    console.log('onClickReset')
-    // if(!mapControl.drawType) return;
-    
-    if(mapControl.drawCheck === 'RESET') {
+  const onClickReset = () => {    
+    if(mapControl.drawType === 'RESET') {
       clearMode(mode);
-      mode = newMode;
+    }    
+  }
 
-      startMode(newMode);
-      // removeListener();
-      // if(polyline) {
-      //   polyline.setMap(null);
-      //   polyline = '';
-      //   guideline.setMap(null);
-      //   guideline = '';
-      //   bufferPolyline.setMap(null);
-      //   bufferPolyline = '';
-      // }
-      // if(polygon) {
-      //   console.log(polygon)
-      //   polygon.setMap(null);
-      //   polygon = '';
-      // }
-      // if(circle) {
-      //   circle.setMap(null);
-      //   circle = '';
-      //   radiusline.setMap(null);
-      //   radiusline = '';
-      // }
+  const handleDetailDrwa = () => {
+
+    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);
+          })          
+          
+          polyline = new naver.maps.Polyline({
+            strokeLineCap: 'round',
+            strokeLineJoin: 'round',
+            strokeColor: '#283046',
+            strokeWeight: 3,
+            strokeOpacity: 1,
+            path: paths,
+            map: map
+          });
+          
+          setPolyline(polyline)
+          // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
+        }
+
+        if(areas.areaType && areas.areaType === 'PLOYGON') {
+
+        }
+
+        if(areas.areaType && areas.areaType === 'CIRCLE') {
+
+        }
 
     }
 
@@ -704,21 +701,6 @@ export const FlightPlanDrawTest = props => {
 
   return (
     <>      
-      {/* <Button.Ripple
-        color='primary'
-        className='area-button'
-        onClick = {props.openModal}
-      >
-        확인
-      </Button.Ripple>
-      <Button.Ripple
-        color='primary'
-        className='area-button'
-        // onClick = {e => handlerDrawCheck('RESET')}
-        onClick={e => handlerDrawType('RESET')}
-      >
-        초기화
-      </Button.Ripple> */}
     </>
   );
 };

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

@@ -17,12 +17,6 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => {
   }
 
   const handleSave = () => {
-
-    if(areaDetail[0].coordList.length <= 1) {
-      alert('영역을 생성해주세요.');
-      return false;
-    }
-    
     const resultAreaDetail = areaDetail.map((area, i) =>  {
       return {
         ...area,