비행계획서 buffer 작업

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

@@ -9,11 +9,6 @@ import {
   Row,
   Button
 } from 'reactstrap';
-import { useDispatch, useSelector } from 'react-redux';
-import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
-import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw';
-import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions';
-import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest';
 
 const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handleBufferList, data }) => {
 

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

@@ -10,6 +10,7 @@ import {
     FormGroup
 } from 'reactstrap';
 import { useDispatch, useSelector } from 'react-redux';
+import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
 import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
 import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions';
 import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest';
@@ -20,7 +21,6 @@ const FlightPlanAreaMap = (props) => {
     const dispatch = useDispatch();
     const naver = window.naver;
     const airArea = props.airArea;    
-
     const mapControl = useSelector(state => state.controlMapReducer);
     const { areaCoordList } = useSelector(state => state.flightState);
 
@@ -45,6 +45,9 @@ const FlightPlanAreaMap = (props) => {
         setMapAreaCoordList(areaCoordList)
     }, [areaCoordList]);
 
+    const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList);
+    
+
     const ModeInit = () => {
         setMode(mapControl.drawType)
     }
@@ -68,11 +71,11 @@ const FlightPlanAreaMap = (props) => {
 
     const handlerDrawType = val => {
         dispatch(drawTypeChangeAction(val));
-    };
+    }; 
-
+    
-    const handlerDrawCheck = val => {
+    const handleBufferList = () => {
-        dispatch(drawCheckAction(val));
+      dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
-    };    
+    }
 
     const handleInitCoordinates = () => {
         const init = initFlightBas.initDetail.areaList.concat();
@@ -128,7 +131,8 @@ const FlightPlanAreaMap = (props) => {
                             mode={mode}                  
                             areaCoordList={mapAreaCoordList}                                        
                             handleCoordinates={handleCoordinates}       
-                            handleInitCoordinates={handleInitCoordinates}                                                    
+                            handleInitCoordinates={handleInitCoordinates}
+                            handleBufferList={handleBufferList}                                                 
                         /> : null}
 
                         <Button.Ripple
@@ -145,13 +149,6 @@ const FlightPlanAreaMap = (props) => {
                         >
                             초기화
                         </Button.Ripple>
-                        {/* <Button.Ripple
-                            color='primary'
-                            className='area-button'
-                        >
-                            적용
-                        </Button.Ripple> */}
-
                     </div>
                 </div>
 

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

@@ -1,37 +1,25 @@
 import $ from 'jquery';
-import buffer from '@turf/buffer'
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
-
-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 { 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';
-import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp'
-import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters';
 
 export const FlightPlanDrawTest = props => {
-  const dispatch = useDispatch();
   const mapControl = useSelector(state => state.controlMapReducer);
-  const draw = useSelector(state => state.basisFlightDrawReducer);
 
   const [pastPolyline, setPolyline] = useState();
   const [pastBuffer, setBuffer] = useState();
 
   const [pastPolygon, setPolygon] = useState();
 
-  const [pastCircle, setCircle] = useState();
+  // const [pastCircle, setCircle] = useState();
+  const [pastCircle, setCircle] = useState([]);
   const [pastEve, setEve] = useState();
 
   const [pastDragCircle, setDragCircle] = useState([]);
 
+  const [pastMarker, setMarker] = useState([]);
+
   const naver = props.naver;
   const map = props.map;
-  const openModal = props.openModal;
   let mode = props.mode;
 
   let areaInfo;
@@ -39,7 +27,7 @@ export const FlightPlanDrawTest = props => {
 
   let polyline;
   let guideline;
-  let bufferPolyline;
+  let bufferPolygon;
 
   let polygon;
 
@@ -57,6 +45,8 @@ export const FlightPlanDrawTest = props => {
 
   let check;
 
+  let distanceMarker = [];
+
   useEffect(() => {
     drawInit();
   }, [mapControl.drawType])
@@ -65,20 +55,6 @@ export const FlightPlanDrawTest = props => {
     handleDetailDrwa();
   }, [props.areaCoordList])
 
-  const zoomChange = () => {
-    let change;
-    if (change) {
-      naver.maps.Event.removeListener(change);
-    } else {
-      change = naver.maps.Event.addListener(map, 'zoom_changed', function () {
-        if (dragCircle) {
-          // dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5));
-          // dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25));
-        }
-      })
-    }
-  }
-
   const drawInit = () => {
     console.log(mapControl.drawType);
     if (mapControl.drawType === 'LINE') {
@@ -95,8 +71,6 @@ export const FlightPlanDrawTest = props => {
   const onClickButton = (newMode) => {
     console.log('onClickButton');
 
-    zoomChange();
-
     clearMode(mode);
 
     if (mode === newMode) {
@@ -114,62 +88,38 @@ export const FlightPlanDrawTest = props => {
 
     // if(!mode) return;
 
-    // clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로..
     if (pastPolyline) {
-      console.log('clrea polyline ', pastPolyline)
+      console.log('clear polyline ', pastPolyline)
       pastPolyline.setMap(null);
       pastDragCircle.forEach(c => c.setMap(null));
-
+      pastBuffer.setMap(null);
       setPolyline();
       setDragCircle([]);
+      setBuffer();
     }
     if (pastCircle) {
-      console.log('clrea circle ', pastCircle)
+      console.log('clear circle ', pastCircle)
-      pastCircle.setMap(null);
+      pastCircle.forEach(prev => prev.setMap(null))
       naver.maps.Event.removeListener(pastEve);
 
-      setCircle();
+      // setCircle();
+      setCircle([]);
     }
     if (pastPolygon) {
-      console.log('clrea polygon ', pastPolygon)
+      console.log('clear polygon ', pastPolygon)
       pastPolygon.setMap(null);
       pastDragCircle.forEach(c => c.setMap(null));
 
       setPolygon();
       setDragCircle([]);
     }
+    if (pastMarker) {
+      console.log('clear marker ', pastMarker)
+      pastMarker.forEach(m => m.setMap(null));
+    }
 
     finishDraw();
-    props.handleInitCoordinates();
+    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) => {
@@ -200,66 +150,34 @@ export const FlightPlanDrawTest = props => {
   const finishDraw = () => {
     console.log('finishDraw')
     removeListener();
-    if (polyline) {
-      let polypaths = polyline.getPath()._array;
 
+    if (polyline) {
       if (guideline) {
         guideline.setMap(null);
         guideline = '';
       }
 
-      if (polypaths.length >= 2) {
+      let polypaths = polyline.getPath()._array;
-        //꼭짓점 circle 생성
-        for (let index = 0; index < polypaths.length; index++) {
-          dragCircle.push(
-            new naver.maps.Circle({
-              strokeOpacity: 1,
-              strokeColor: '#000000',
-              fillColor: '#ffffff',
-              fillOpacity: 1,
-              center: polypaths[index],
-              radius: 10,
-              map: map,
-              clickable: true
-            })
-          )
 
-          dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
+      if (polypaths.length >= 2) {
-        }
-        setDragCircle(dragCircle);
         setPolyline(polyline);
-
         setAreaInfo(polypaths);
-
       } else {
         polyline.setMap(null);
         polyline = '';
       }
 
+      polyline.setMap(null)
     } else if (polygon) {
       let path = polygon.getPath();
       path.pop();
 
       let polygonpaths = polygon.getPath()._array;
-      //꼭짓점 circle 생성
+
-      for (let index = 0; index < polygonpaths.length; index++) {
-        dragCircle.push(
-          new naver.maps.Circle({
-            strokeOpacity: 1,
-            strokeColor: '#000000',
-            fillColor: '#ffffff',
-            fillOpacity: 1,
-            center: polygonpaths[index],
-            radius: 10,
-            map: map,
-            clickable: true
-          })
-        )
-        dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
-      }
-      setDragCircle(dragCircle);
       setPolygon(polygon);
-      setAreaInfo(polygonpaths, '');
+      setAreaInfo(polygonpaths);
+
+      polygon.setMap(null)
     }
   }
 
@@ -267,7 +185,7 @@ export const FlightPlanDrawTest = props => {
     console.log('onClickPolyline')
     var coord = e.coord;
 
-    if (!check) {
+    // if (!check) {
       if (!polyline) {
         //가이드라인
         guideline = new naver.maps.Polyline({
@@ -277,13 +195,14 @@ export const FlightPlanDrawTest = props => {
           path: [coord],
           map: map
         });
-        // lastDistance = guideline.getDistance();
+        lastDistance = guideline.getDistance();
 
         //실제 사용되는 라인
         polyline = new naver.maps.Polyline({
           strokeLineCap: 'round',
           strokeLineJoin: 'round',
-          strokeColor: '#283046',
+          // strokeColor: '#283046',
+          strokeColor: '#ff0000',
           strokeWeight: 3,
           strokeOpacity: 1,
           path: [coord],
@@ -294,16 +213,16 @@ export const FlightPlanDrawTest = props => {
         $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
 
         lastDistance = polyline.getDistance();
-        // this._addMileStone(coord, 'Start');
+        addMileStone(coord, 'Start')
       } else {
         guideline.setPath([e.coord]);
         polyline.getPath().push(coord);
 
         var distance = polyline.getDistance();
-        // addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
+        addMileStone(coord, fromMetersToText(distance - lastDistance));
         lastDistance = distance;
       }
-    }
+    // }
   }
 
   const onMouseMovePolyline = (e) => {
@@ -359,40 +278,34 @@ export const FlightPlanDrawTest = props => {
     console.log('onClickCircle')
     var coord = e.coord;
 
-    if (!check) {
+    if(!circle) {
-      if (!circle) {
+      radiusline = new naver.maps.Polyline({
-        //가이드라인
+        strokeStyle: [4, 4],
-        radiusline = new naver.maps.Polyline({
+        strokeOpacity: 0.6,
-          // strokeStyle: [4, 4],
+        path: [coord],
-          // strokeOpacity: 0.6,
+        map: map
-          path: [coord],
+      })
-          // map: map
+      lastDistance = radiusline.getDistance();
-        });
-        lastDistance = radiusline.getDistance();
-
-        //실제 사용되는 원형
-        circle = new naver.maps.Circle({
-          strokeColor: '#283046',
-          strokeOpacity: 1,
-          fillColor: '#7367F0',
-          fillOpacity: 0.1,
-          center: coord,
-          radius: 100,
-          map: map,
-          clickable: true
-        });
 
-        Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
+      circle = new naver.maps.Circle({
-      } else {
+        strokeColor: '#283046',
-        circle.setRadius(100);
+        strokeOpacity: 1,
-        circle.setCenter(coord);
+        fillColor: '#7367F0',
+        fillOpacity: 0.1,
+        center: coord,
+        radius: 100,
+        // map: map,
+        clickable: true
+      })
 
-        radiusline.setPath([coord])
+      Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
-      }
+    } else {
-      setCircle(circle);
+      circle.setCenter(coord);
-      setAreaInfo('', '');
+      circle.setRadius(100);
     }
-
+    // setCircle(circle);
+    setCircle(prev => ([...prev, circle]))
+    setAreaInfo('');
   }
 
   const onMouseDownDrag = (index) => {
@@ -456,14 +369,16 @@ export const FlightPlanDrawTest = props => {
       polygon.setPaths(movepath)
 
     } else if (circle) {
-      var circlepath = radiusline.getPath(),
+      // var circlepath = radiusline.getPath(),
-        center = circle.getCenter(),
+      //   center = circle.getCenter(),
+      //   r = proj.getDistance(coord, center);
+      var center = circle.getCenter(),
         r = proj.getDistance(coord, center);
 
-      if (circlepath.getLength() === 2) {
+      // if (circlepath.getLength() === 2) {
-        circlepath.pop();
+      //   circlepath.pop();
-      }
+      // }
-      circlepath.push(coord);
+      // circlepath.push(coord);
       circle.setRadius(r);
     }
 
@@ -486,14 +401,16 @@ export const FlightPlanDrawTest = props => {
     })
 
     if (polyline) {
-      bufferPolyline.setMap(null);
+      var path = polyline.getPath()._array;
-      // bufferMove();
+      setPolyline(polyline);
+      setAreaInfo(path);
+      props.handleBufferList();
     }
 
     if (polygon) {
       var path = polygon.getPath()._array;
       setPolygon(polygon);
-      // setAreaInfo(path, '');
+      setAreaInfo(path);
     }
 
     $(document).off('mousemove.measure');
@@ -502,14 +419,15 @@ export const FlightPlanDrawTest = props => {
     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) }))
-      setCircle(circle);
+      // setCircle(circle);
-      setAreaInfo('', '');
+      setCircle(prev => ([...prev, circle]))
+      setAreaInfo('');
     }
 
     check = false;
   }
 
-  const setAreaInfo = (path, bufferpath) => {
+  const setAreaInfo = (path) => {
     areaInfo = {
       coordinates: [],
       bufferZone: 0,
@@ -548,142 +466,6 @@ export const FlightPlanDrawTest = props => {
     // console.log(areaInfo, 'areaInfo')
   }
 
-  const bufferTest = () => {
-    let pol = polyline.getPath()._array;  //latlng point 다 준건가?    
-
-    let lineStringPaths = [];
-    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]))
-      // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToUTMK(pol[i]))
-
-      // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToLatLng(naver.maps.Point(pol[i].x, pol[i].y)))
-      // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToNaver(naver.maps.Point(pol[i].x, pol[i].y)))
-      // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToTM128(naver.maps.Point(pol[i].x, pol[i].y)))
-      // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y)))
-
-
-
-      lineStringPaths.push([pol[i].x, pol[i].y]);
-    }
-    // console.log(map.getProjection().getProjectionName());
-    // console.log(map.getProjection())
-    // console.log(map.getPrimitiveProjection())
-
-    // console.log(lineStringPaths)
-
-    //옆에 화면에 라이브러리 활용해서 제발 성공하자..
-    let bufferRadius = 100;
-    const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)'
-    let coords = {
-      "type": "LineString",
-      "coordinates": lineStringPaths
-    };
-    const bufferCenter = new JSTSWKTReader().read(wkt)
-    const bufferResult = JSTSBufferOp.bufferOp(
-      bufferCenter,
-      bufferRadius
-    )
-
-    const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)
-
-    // bufferPolyline = new naver.maps.Polyline({
-    //   strokeColor: '#ff0000',
-    //   strokeColor: '#283046',
-    //   strokeWeight: 2,
-    //   strokeStyle: [4, 4],
-    //   strokeOpacity: 1,
-    //   path : bufferPaths,
-    //   // path: [
-
-    //   // ],
-    //   map: map
-    // });
-  }
-
-  const bufferMove = () => {
-    console.log('bufferMove')
-
-    //버퍼 생성에 필요한 coordinates 배열 변환
-    let pol = polyline.getPath()._array;
-
-    let lineStringPaths = [];
-    for (let i = 0; i < polyline.getPath().length; i++) {
-      lineStringPaths.push([pol[i].x, pol[i].y]);
-    }
-    console.log(lineStringPaths, 'polyline path')
-
-    // //버퍼 생성을 위한 line 객체
-    // const originalGeojson = {
-    //   type: "FeatureCollection",
-    //   features: [
-    //     {
-    //       type: "Feature",
-    //       properties: {},
-    //       geometry: {
-    //         type: "LineString",
-    //         coordinates: lineStringPaths
-    //       }
-    //     }
-    //   ]
-    // };
-    // // console.log(originalGeojson, 'Feature type Object')
-
-    // //버퍼 객체
-    // const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
-
-    // //버퍼 라인 생성
-    // let bufferPath = bufferObj.features[0].geometry.coordinates[0];
-    // // console.log(bufferPath, 'buffer path')
-
-    // bufferPolyline = new naver.maps.Polyline({
-    //   // strokeColor: '#ff0000',
-    //   strokeColor: '#283046',
-    //   strokeWeight: 2,
-    //   strokeStyle: [4, 4],
-    //   strokeOpacity: 1,
-    //   path : bufferPath,
-    //   map: map
-    // });
-
-    //------------------------
-
-    let coords = {
-      "type": "LineString",
-      "coordinates": lineStringPaths
-    };
-
-    const reader = new GeoJSONReader();
-    const writer = new GeoJSONWriter();
-
-    const distance = (100 * 0.001) / 111.12;  //100미터
-    const line = reader.read(coords);
-    const buffer = BufferOp.bufferOp(line, distance, 0, 3);
-
-    let bufferpath = buffer._shell._points._coordinates;
-
-    let bufferPaths = [];
-    for (let i = 0; i < bufferpath.length; i++) {
-      bufferPaths.push([bufferpath[i].x, bufferpath[i].y]);
-    }
-    console.log(bufferPaths, 'bufferPaths')
-
-    bufferPolyline = new naver.maps.Polyline({
-      strokeColor: '#ff0000',
-      strokeColor: '#283046',
-      strokeWeight: 2,
-      strokeStyle: [4, 4],
-      strokeOpacity: 1,
-      path: bufferPaths,
-      map: map
-    });
-    // setAreaInfo(polyline.getPath()._array, bufferPath);
-    setAreaInfo(polyline.getPath()._array, bufferPaths);
-    setPolyline(polyline);
-    setBuffer(bufferPolyline)
-  }
-
   const onClickReset = () => {
     console.log('onClickRest - ', mapControl.drawType);
     if (mapControl.drawType === 'RESET') {
@@ -692,8 +474,10 @@ export const FlightPlanDrawTest = props => {
   }
 
   const handleDetailDrwa = () => {
+    if (props.areaCoordList) {     
+      console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
+      
 
-    if (props.areaCoordList) {      
       const areas = props.areaCoordList[0];
 
       const paths = [];
@@ -705,6 +489,11 @@ export const FlightPlanDrawTest = props => {
       });
 
       if (areas.areaType && areas.areaType === 'LINE') {
+        //polyline 생성
+        if(pastPolyline) {
+          pastPolyline.setMap(null);
+          pastDragCircle.forEach(c => c.setMap(null));
+        }
         polyline = new naver.maps.Polyline({
           strokeLineCap: 'round',
           strokeLineJoin: 'round',
@@ -717,6 +506,25 @@ export const FlightPlanDrawTest = props => {
 
         setPolyline(polyline)
 
+        //dragCircle 생성
+        for(let i = 0; i < paths.length; i++) {
+          dragCircle.push(
+            new naver.maps.Circle({
+              strokestrokeOpacity: 1,
+              strokeColor: '#000000',
+              fillColor: '#ffffff',
+              fillOpacity: 1,
+              center: paths[i],
+              radius: 15,
+              map: map,
+              clickable: true
+            })
+          )
+          dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+        }
+
+        setDragCircle(dragCircle);
+
         if (areas.bufferCoordList) {          
           const bufferPaths = [];
 
@@ -727,25 +535,31 @@ export const FlightPlanDrawTest = props => {
           });
           console.log('buffer test : ',areas.bufferCoordList);
           
-          if(pastPolygon) {
+          if(pastBuffer) {
-            pastPolygon.setMap(null);
+            pastBuffer.setMap(null);
           }
 
-          polygon = new naver.maps.Polygon({
+          // console.log(bufferPaths)
+          //bufferline 생성
+          bufferPolygon = new naver.maps.Polyline({
             strokeColor: '#283046',
             strokeOpacity: 1,
-            fillColor: '#7367F0',
+            // fillColor: '#7367F0',
-            fillOpacity: 0.1,
+            // fillOpacity: 0.1,
-            paths: bufferPaths,
+            path: bufferPaths,
             map: map
           });
-          console.log(polygon);
+          // console.log(bufferPolygon);
-  
+          setBuffer(bufferPolygon);
-          setPolygon(polygon);
         }
       }
 
       if (areas.areaType && areas.areaType === 'POLYGON') {
+        //polygon 생성
+        if(pastPolygon) {
+          pastPolygon.setMap(null);
+          pastDragCircle.forEach(c => c.setMap(null));
+        }
         polygon = new naver.maps.Polygon({
           strokeColor: '#283046',
           strokeOpacity: 1,
@@ -756,12 +570,47 @@ export const FlightPlanDrawTest = props => {
         });
 
         setPolygon(polygon);
+
+        //dragCircle 생성
+        for(let i = 0; i < paths.length; i++) {
+          dragCircle.push(
+            new naver.maps.Circle({
+              strokestrokeOpacity: 1,
+              strokeColor: '#000000',
+              fillColor: '#ffffff',
+              fillOpacity: 1,
+              center: paths[i],
+              radius: 15,
+              map: map,
+              clickable: true
+            })
+          )
+          dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+        }
+
+        setDragCircle(dragCircle);
       }
 
       if (areas.areaType && areas.areaType === 'CIRCLE') {
+        //circle 생성
+        if(pastCircle) {
+          // pastCircle.setMap(null);
+          console.log(pastCircle)
+          pastCircle.forEach(prev => prev.setMap(null));
+        }
+        if(circle) {
+          circle.setMap(null);
+        }
+        // radiusline = new naver.maps.Polyline({
+        //   strokeStyle: [4, 4],
+        //   strokeOpacity: 0.6,
+        //   path: [coord],
+        //   map: map
+        // })
         circle = new naver.maps.Circle({
           strokeColor: '#283046',
           strokeOpacity: 1,
+          // fillColor: '#ff0000',
           fillColor: '#7367F0',
           fillOpacity: 0.1,
           center: paths[0],
@@ -769,12 +618,58 @@ export const FlightPlanDrawTest = props => {
           map: map,
           clickable: true
         });
+        Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
 
-        setCircle(circle);
+        setCircle([circle]);
       }
     }
   }
 
+  const addMileStone = (coord, text, css) => {
+    if(distanceMarker) distanceMarker = [];
+  
+    let content;
+    if(text == 'Start') {
+      content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>'
+    } else {
+      content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>'+ text +'</span></div>'
+    }
+  
+    var _ms = new naver.maps.Marker({
+      position: coord,
+      icon: {
+        content: content,
+        anchor: new naver.maps.Point(-5, -5)
+      },
+      map: map
+    });
+  
+    var msElement = $(_ms.getElement());
+  
+    if(css) {
+      msElement.css(css);
+    } else {
+      msElement.css('font-size', '13px');
+    }
+  
+    distanceMarker.push(_ms);
+    setMarker(prev => ([...prev, _ms]))
+  }
+  
+  const fromMetersToText = (meters) => {
+    meters = meters || 0;
+  
+    var km = 1000,
+      text = meters;
+  
+    if(meters >= km) {
+      text = parseFloat((meters / km).toFixed(1)) + 'km';
+    } else {
+      text = parseFloat(meters.toFixed(1)) + 'm';
+    }
+    return text;
+  }
+
   return (
     <>
     </>