비행 구역 buffer 작업

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

@@ -39,7 +39,11 @@ const FlightPlanAreaMap = (props) => {
 
     useEffect(() => {             
         ModeInit();
-    }, [mapControl.drawType])
+    }, [mapControl.drawType]);
+
+    useEffect(() => {        
+        setMapAreaCoordList(areaCoordList)
+    }, [areaCoordList]);
 
     const ModeInit = () => {
         setMode(mapControl.drawType)
@@ -122,7 +126,7 @@ const FlightPlanAreaMap = (props) => {
                             map={map} 
                             naver={naver}
                             mode={mode}                  
-                            areaCoordList={areaCoordList}                                        
+                            areaCoordList={mapAreaCoordList}                                        
                             handleCoordinates={handleCoordinates}       
                             handleInitCoordinates={handleInitCoordinates}                                                    
                         /> : null}

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

@@ -6,8 +6,8 @@ import { drawTypeChangeAction } from '../../../../modules/control/map/actions/co
 
 import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader';
 import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory';
-import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer';
+import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer';
-import {DistanceOp} from 'jsts/org/locationtech/jts/operation/distance/DistanceOp';
+import { DistanceOp } from 'jsts/org/locationtech/jts/operation/distance/DistanceOp';
 
 import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader';
 import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter';
@@ -63,15 +63,15 @@ export const FlightPlanDrawTest = props => {
 
   useEffect(() => {
     handleDetailDrwa();
-  }, [])
+  }, [props.areaCoordList])
 
   const zoomChange = () => {
     let change;
-    if(change) {
+    if (change) {
       naver.maps.Event.removeListener(change);
     } else {
-      change = naver.maps.Event.addListener(map, 'zoom_changed', function() {
+      change = naver.maps.Event.addListener(map, 'zoom_changed', function () {
-        if(dragCircle) {
+        if (dragCircle) {
           // dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5));
           // dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25));
         }
@@ -81,13 +81,13 @@ export const FlightPlanDrawTest = props => {
 
   const drawInit = () => {
     console.log(mapControl.drawType);
-    if(mapControl.drawType==='LINE') {
+    if (mapControl.drawType === 'LINE') {
       onClickButton('LINE');
-    } else if(mapControl.drawType==='CIRCLE') {
+    } else if (mapControl.drawType === 'CIRCLE') {
       onClickButton('CIRCLE');
-    } else if(mapControl.drawType==='POLYGON') {
+    } else if (mapControl.drawType === 'POLYGON') {
       onClickButton('POLYGON');
-    } else if(mapControl.drawType==='RESET') {
+    } else if (mapControl.drawType === 'RESET') {
       onClickReset('RESET')
     }
   }
@@ -99,7 +99,7 @@ export const FlightPlanDrawTest = props => {
 
     clearMode(mode);
 
-    if(mode === newMode) {
+    if (mode === newMode) {
       mode = null;
       return;
     }
@@ -178,11 +178,11 @@ export const FlightPlanDrawTest = props => {
     if (!mode) return;
 
     if (mode === 'LINE') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolyline(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) });
     } else if (mode === 'POLYGON') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolygon(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) });
     } else if (mode === 'CIRCLE') {
-      setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) }))
+      setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
     }
   }
 
@@ -192,7 +192,7 @@ export const FlightPlanDrawTest = props => {
     naver.maps.Event.removeListener(Eve.clickEve);
     naver.maps.Event.removeListener(Eve.mousedownEve);
     naver.maps.Event.removeListener(Eve.rightclickEve);
-    if(!circle) $(document).off('mousemove.measure');
+    if (!circle) $(document).off('mousemove.measure');
     // if(pastCircle) naver.maps.Event.removeListener(pastEve);
     naver.maps.Event.removeListener(pastEve);
   }
@@ -200,17 +200,17 @@ export const FlightPlanDrawTest = props => {
   const finishDraw = () => {
     console.log('finishDraw')
     removeListener();
-    if(polyline) {
+    if (polyline) {
       let polypaths = polyline.getPath()._array;
 
-      if(guideline) {
+      if (guideline) {
         guideline.setMap(null);
         guideline = '';
       }
 
-      if(polypaths.length >= 2) {
+      if (polypaths.length >= 2) {
         //꼭짓점 circle 생성
-        for(let index = 0; index < polypaths.length; index++) {
+        for (let index = 0; index < polypaths.length; index++) {
           dragCircle.push(
             new naver.maps.Circle({
               strokeOpacity: 1,
@@ -224,7 +224,7 @@ export const FlightPlanDrawTest = props => {
             })
           )
 
-          dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) }))
+          dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
         }
         setDragCircle(dragCircle);
         setPolyline(polyline);
@@ -236,13 +236,13 @@ export const FlightPlanDrawTest = props => {
         polyline = '';
       }
 
-    } else if(polygon) {
+    } else if (polygon) {
       let path = polygon.getPath();
       path.pop();
 
       let polygonpaths = polygon.getPath()._array;
       //꼭짓점 circle 생성
-      for(let index = 0; index < polygonpaths.length; index++) {
+      for (let index = 0; index < polygonpaths.length; index++) {
         dragCircle.push(
           new naver.maps.Circle({
             strokeOpacity: 1,
@@ -255,7 +255,7 @@ export const FlightPlanDrawTest = props => {
             clickable: true
           })
         )
-        dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) }))
+        dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
       }
       setDragCircle(dragCircle);
       setPolygon(polygon);
@@ -267,8 +267,8 @@ export const FlightPlanDrawTest = props => {
     console.log('onClickPolyline')
     var coord = e.coord;
 
-    if(!check) {
+    if (!check) {
-      if(!polyline) {
+      if (!polyline) {
         //가이드라인
         guideline = new naver.maps.Polyline({
           strokeColor: '#283046',
@@ -290,8 +290,8 @@ export const FlightPlanDrawTest = props => {
           map: map
         });
 
-        Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() })
+        Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
-        $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
+        $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
 
         lastDistance = polyline.getDistance();
         // this._addMileStone(coord, 'Start');
@@ -312,7 +312,7 @@ export const FlightPlanDrawTest = props => {
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
       path = guideline.getPath();
 
-    if(path.getLength() === 2) {
+    if (path.getLength() === 2) {
       path.pop();
     }
 
@@ -323,7 +323,7 @@ export const FlightPlanDrawTest = props => {
     console.log('onClickPolygon')
     var coord = e.coord;
 
-    if(!polygon) {
+    if (!polygon) {
       polygon = new naver.maps.Polygon({
         strokeColor: '#283046',
         strokeOpacity: 1,
@@ -333,8 +333,8 @@ export const FlightPlanDrawTest = props => {
         map: map
       });
 
-      Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() })
+      Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
-      $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) });      
+      $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) });
     } else {
       polygon.getPath().push(coord);
     }
@@ -342,13 +342,13 @@ export const FlightPlanDrawTest = props => {
 
   const onMouseMovePolygon = (e) => {
     console.log('onMouseMovePolygon')
-    if(!polygon) return;
+    if (!polygon) return;
 
     var proj = map.getProjection(),
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
       path = polygon.getPath();
 
-    if(path.getLength() >= 2) {
+    if (path.getLength() >= 2) {
       path.pop();
     }
 
@@ -359,8 +359,8 @@ export const FlightPlanDrawTest = props => {
     console.log('onClickCircle')
     var coord = e.coord;
 
-    if(!check) {
+    if (!check) {
-      if(!circle) {
+      if (!circle) {
         //가이드라인
         radiusline = new naver.maps.Polyline({
           // strokeStyle: [4, 4],
@@ -382,7 +382,7 @@ export const FlightPlanDrawTest = props => {
           clickable: true
         });
 
-        Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); })        
+        Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
       } else {
         circle.setRadius(100);
         circle.setCenter(coord);
@@ -398,7 +398,7 @@ export const FlightPlanDrawTest = props => {
   const onMouseDownDrag = (index) => {
     console.log('onMouseDownDrag')
 
-    if(circle) {
+    if (circle) {
       naver.maps.Event.removeListener(Eve.clickEve);
     }
 
@@ -412,8 +412,8 @@ export const FlightPlanDrawTest = props => {
       disableTwoFingerTapZoom: true
     })
 
-    $(document).on('mousemove.measure', function(e) { onMouseMoveDrag(e, index) });
+    $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) });
-    $(document).on('mouseup.measure', function() { onMouseUpDrag() });
+    $(document).on('mouseup.measure', function () { onMouseUpDrag() });
   }
 
   const onMouseMoveDrag = (e, index) => {
@@ -424,13 +424,13 @@ export const FlightPlanDrawTest = props => {
     var proj = map.getProjection(),
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY));
 
-    if(polyline) {
+    if (polyline) {
       var polypaths = polyline.getPath()._array;
 
       let movepath = [];
-      for(let i = 0; i < polypaths.length; i++) {
+      for (let i = 0; i < polypaths.length; i++) {
         let path;
-        if(i === index) {
+        if (i === index) {
           path = coord;
         } else {
           path = polypaths[i]
@@ -440,13 +440,13 @@ export const FlightPlanDrawTest = props => {
 
       polyline.setPath(movepath);
 
-    } else if(polygon) {
+    } else if (polygon) {
       var polygonpaths = polygon.getPath()._array;
 
       let movepath = [];
-      for(let i = 0; i < polygonpaths.length; i++) {
+      for (let i = 0; i < polygonpaths.length; i++) {
         let path;
-        if(i === index) {
+        if (i === index) {
           path = coord;
         } else {
           path = polygonpaths[i]
@@ -455,19 +455,19 @@ export const FlightPlanDrawTest = props => {
       }
       polygon.setPaths(movepath)
 
-    } else if(circle) {
+    } else if (circle) {
       var circlepath = radiusline.getPath(),
         center = circle.getCenter(),
         r = proj.getDistance(coord, center);
 
-      if(circlepath.getLength() === 2) {
+      if (circlepath.getLength() === 2) {
         circlepath.pop();
       }
       circlepath.push(coord);
       circle.setRadius(r);
     }
 
-    if(!circle) {
+    if (!circle) {
       dragCircle[index].setCenter(coord);
     }
   }
@@ -485,12 +485,12 @@ export const FlightPlanDrawTest = props => {
       disableTwoFingerTapZoom: false
     })
 
-    if(polyline) {
+    if (polyline) {
       bufferPolyline.setMap(null);
       // bufferMove();
     }
 
-    if(polygon) {
+    if (polygon) {
       var path = polygon.getPath()._array;
       setPolygon(polygon);
       // setAreaInfo(path, '');
@@ -499,9 +499,9 @@ export const FlightPlanDrawTest = props => {
     $(document).off('mousemove.measure');
     $(document).off('mouseup.measure');
 
-    if(circle) {
+    if (circle) {
       // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); })
-      setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) }))
+      setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
       setCircle(circle);
       setAreaInfo('', '');
     }
@@ -511,12 +511,12 @@ export const FlightPlanDrawTest = props => {
 
   const setAreaInfo = (path, bufferpath) => {
     areaInfo = {
-      coordinates : [],
+      coordinates: [],
       bufferZone: 0,
     };
 
     let prePath = [];
-    if(path) {      
+    if (path) {
       path.forEach((item) => {
         const p = {
           lat: item.y,
@@ -528,13 +528,13 @@ export const FlightPlanDrawTest = props => {
       // path.forEach(prev=> prePath.push([prev.x, prev.y]))
     }
 
-    if(polyline) {
+    if (polyline) {
       areaInfo.coordinates = prePath;
       areaInfo.areaType = 'LINE';
-    } else if(polygon) {
+    } else if (polygon) {
       areaInfo.coordinates = prePath;
       areaInfo.areaType = 'POLYGON';
-    } else if(circle) {      
+    } else if (circle) {
       const point = {
         lat: circle.getCenter().y,
         lon: circle.getCenter().x
@@ -552,7 +552,7 @@ export const FlightPlanDrawTest = props => {
     let pol = polyline.getPath()._array;  //latlng point 다 준건가?    
 
     let lineStringPaths = [];
-    for(let i = 0; i< pol.length; i++) {
+    for (let i = 0; i < pol.length; i++) {
       // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i]))
       // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i]))
       // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i]))
@@ -578,7 +578,7 @@ export const FlightPlanDrawTest = props => {
     const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)'
     let coords = {
       "type": "LineString",
-      "coordinates" : lineStringPaths
+      "coordinates": lineStringPaths
     };
     const bufferCenter = new JSTSWKTReader().read(wkt)
     const bufferResult = JSTSBufferOp.bufferOp(
@@ -609,7 +609,7 @@ export const FlightPlanDrawTest = props => {
     let pol = polyline.getPath()._array;
 
     let lineStringPaths = [];
-    for(let i = 0; i< polyline.getPath().length; i++) {
+    for (let i = 0; i < polyline.getPath().length; i++) {
       lineStringPaths.push([pol[i].x, pol[i].y]);
     }
     console.log(lineStringPaths, 'polyline path')
@@ -651,7 +651,7 @@ export const FlightPlanDrawTest = props => {
 
     let coords = {
       "type": "LineString",
-        "coordinates" : lineStringPaths
+      "coordinates": lineStringPaths
     };
 
     const reader = new GeoJSONReader();
@@ -664,7 +664,7 @@ export const FlightPlanDrawTest = props => {
     let bufferpath = buffer._shell._points._coordinates;
 
     let bufferPaths = [];
-      for(let i = 0; i< bufferpath.length; i++) {
+    for (let i = 0; i < bufferpath.length; i++) {
       bufferPaths.push([bufferpath[i].x, bufferpath[i].y]);
     }
     console.log(bufferPaths, 'bufferPaths')
@@ -675,7 +675,7 @@ export const FlightPlanDrawTest = props => {
       strokeWeight: 2,
       strokeStyle: [4, 4],
       strokeOpacity: 1,
-        path : bufferPaths,        
+      path: bufferPaths,
       map: map
     });
     // setAreaInfo(polyline.getPath()._array, bufferPath);
@@ -686,7 +686,7 @@ export const FlightPlanDrawTest = props => {
 
   const onClickReset = () => {
     console.log('onClickRest - ', mapControl.drawType);
-    if(mapControl.drawType === 'RESET') {      
+    if (mapControl.drawType === 'RESET') {
       clearMode('RESET');
     }
   }
@@ -704,7 +704,7 @@ export const FlightPlanDrawTest = props => {
         paths.push(path);
       });
 
-      if(areas.areaType && areas.areaType === 'LINE') {
+      if (areas.areaType && areas.areaType === 'LINE') {
         polyline = new naver.maps.Polyline({
           strokeLineCap: 'round',
           strokeLineJoin: 'round',
@@ -716,10 +716,36 @@ export const FlightPlanDrawTest = props => {
         });
 
         setPolyline(polyline)
-        // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
+
+        if (areas.bufferCoordList) {          
+          const bufferPaths = [];
+
+          areas.bufferCoordList.forEach((bfCoord) => {
+            const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon);
+
+            bufferPaths.push(path);
+          });
+          console.log('buffer test : ',areas.bufferCoordList);
+          
+          if(pastPolygon) {
+            pastPolygon.setMap(null);
           }
 
-      if(areas.areaType && areas.areaType === 'POLYGON') {
+          polygon = new naver.maps.Polygon({
+            strokeColor: '#283046',
+            strokeOpacity: 1,
+            fillColor: '#7367F0',
+            fillOpacity: 0.1,
+            paths: bufferPaths,
+            map: map
+          });
+          console.log(polygon);
+  
+          setPolygon(polygon);
+        }
+      }
+
+      if (areas.areaType && areas.areaType === 'POLYGON') {
         polygon = new naver.maps.Polygon({
           strokeColor: '#283046',
           strokeOpacity: 1,
@@ -732,7 +758,7 @@ export const FlightPlanDrawTest = props => {
         setPolygon(polygon);
       }
 
-      if(areas.areaType && areas.areaType === 'CIRCLE') {
+      if (areas.areaType && areas.areaType === 'CIRCLE') {
         circle = new naver.maps.Circle({
           strokeColor: '#283046',
           strokeOpacity: 1,
@@ -747,7 +773,7 @@ export const FlightPlanDrawTest = props => {
         setCircle(circle);
       }
     }
-}
+  }
 
   return (
     <>

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

@@ -142,7 +142,7 @@ const FlightPlanDetailContainer = () => {
 
     useEffect(() => {
         // 조종사, 기체 정보 Redux 초기화
-        // dispatch(Actions.PILOT_ARCRFT_SELECT_INIT());
+        dispatch(Actions.PILOT_ARCRFT_SELECT_INIT());
     })
 
     const handleModal = (modal) => {