비행구역 - 중간좌표 비율 계산 수정

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

@@ -4,21 +4,15 @@ import {
   CardBody,
   Button,
   Input,
-  Row,
-  Col,
   InputGroup,
   InputGroupAddon,
-  InputGroupText,
-  FormGroup
+  InputGroupText
 } from 'reactstrap';
-import { Key, Search } from 'react-feather';
+import { Search } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
 import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
-import {
-  drawTypeChangeAction,
-  drawCheckAction
-} from '../../../../modules/control/map/actions/controlMapActions';
-import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw';
+import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
+import { FlightPlanDraw_init } from '../../../map/naver/draw/FlightPlanDraw';
 import { initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel';
 import {
   AREA_COORDINATE_LIST_SAVE,
@@ -44,7 +38,8 @@ const FlightPlanAreaMap = props => {
   const [searchRes, setSearchRes] = useState([]);
   const [isSearch, setIsSearch] = useState(false);
 
-  const [dragSize, setDragSize] = useState(0);
+  const [dragSize, setDragSize] = useState(140);
+  const [pastDragCircle, setDragCircle] = useState([]);
 
   useEffect(() => {
     NaverMapInit();
@@ -53,6 +48,10 @@ const FlightPlanAreaMap = props => {
     };
   }, []);
 
+  useEffect(() => {
+    pastDragCircle.forEach(c => c.setRadius(dragSize));
+  }, [dragSize]);
+
   useEffect(() => {
     setIsMapLoad(true);
   }, [airArea]);
@@ -122,25 +121,12 @@ const FlightPlanAreaMap = props => {
       // console.log(dragSize);
     });
     naver.maps.Event.addListener(mapp, 'zoom_changed', function () {
-      switch (mapp.zoom) {
-        case 13:
-          setDragSize(100);
-          break;
-        case 14:
-          setDragSize(40);
-          break;
-        case 15:
-          setDragSize(35);
-          break;
-        case 16:
-          setDragSize(20);
-          break;
-        case 17:
-          setDragSize(10);
-          break;
-        default:
-          setDragSize(100);
-          break;
+      let radius = 17920;
+      for (let i = 6; i < 22; i++) {
+        if (i == mapp.zoom) {
+          setDragSize(radius);
+        }
+        radius = radius / 2;
       }
     });
     setMap(mapp);
@@ -233,7 +219,7 @@ const FlightPlanAreaMap = props => {
         <div style={{ position: 'relative' }}>
           <div id='map' style={{ width: '100%', height: '60vh' }}>
             {map ? (
-              <FlightPlanDraw
+              <FlightPlanDraw_init
                 map={map}
                 naver={naver}
                 mode={mode}
@@ -245,6 +231,8 @@ const FlightPlanAreaMap = props => {
                 isDone={props.isDone}
                 isDisabled={props.isDisabled}
                 dragSize={dragSize}
+                pastDragCircle={pastDragCircle}
+                setDragCircle={setDragCircle}
               />
             ) : null}
 

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

@@ -4,10 +4,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
 import { InfoModal } from '../../../modal/InfoModal';
 
-export const FlightPlanDraw = props => {
+export const FlightPlanDraw_init = props => {
   const dispatch = useDispatch();
   const mapControl = useSelector(state => state.controlMapReducer);
-  // const isYour = props.isYour;
   const isDone = props.isDone;
   const isDisabled = props.isDisabled;
 
@@ -15,7 +14,9 @@ export const FlightPlanDraw = props => {
   const [pastBuffer, setBuffer] = useState();
   const [pastPolygon, setPolygon] = useState();
   const [pastCircle, setCircle] = useState([]);
-  const [pastDragCircle, setDragCircle] = useState([]);
+  // const [pastDragCircle, setDragCircle] = useState([]);
+  const pastDragCircle = props.pastDragCircle;
+  const setDragCircle = props.setDragCircle;
 
   const [pastClickEve, setClickEve] = useState();
   const [pastMarker, setMarker] = useState([]);
@@ -33,8 +34,6 @@ export const FlightPlanDraw = props => {
   const naver = props.naver;
   const map = props.map;
   let mode = props.mode;
-  // let dragCircleSize = props.dragCircleSize;
-  // let dragSize = props.dragSize;
 
   let areaInfo;
   let lastDistance;
@@ -65,10 +64,9 @@ export const FlightPlanDraw = props => {
 
   const [radiusCircle, setRadiusCircle] = useState();
 
-  // useEffect(() => {
-  //   console.log(props.dragSize);
-  //   setRadiusCircle(props.dragSize);
-  // }, [props.dragSize]);
+  useEffect(() => {
+    setRadiusCircle(props.dragSize);
+  }, [props.dragSize]);
 
   useEffect(() => {
     drawInit();
@@ -630,12 +628,11 @@ export const FlightPlanDraw = props => {
               fillColor: '#ffffff',
               fillOpacity: 1,
               center: paths[i],
-              // radius: 17,
-              // radius: dragSize,
               map: map,
-              // clickable: true
               clickable: clickSet,
-              ...(props.dragSize ? { radius: radiusCircle } : { radius: 100 })
+              ...(props.dragSize ? { radius: radiusCircle } : { radius: 140 })
+              // radius: 17,
+              // clickable: true
             })
           );
           {
@@ -742,12 +739,11 @@ export const FlightPlanDraw = props => {
               fillColor: '#ffffff',
               fillOpacity: 1,
               center: paths[i],
-              // radius: dragSize,
-              // radius: 17,
-              // radius: dragCircleSize,
               map: map,
+              clickable: clickSet,
+              ...(props.dragSize ? { radius: radiusCircle } : { radius: 140 })
+              // radius: 17,
               // clickable: true
-              clickable: clickSet
             })
           );
           {
@@ -837,19 +833,15 @@ export const FlightPlanDraw = props => {
         circle = new naver.maps.Circle({
           strokeColor: '#283046',
           strokeOpacity: 1,
-          // fillColor: '#ff0000',
           fillColor: '#7367F0',
           fillOpacity: 0.1,
           center: paths[0],
           radius: areas.bufferZone,
           map: map,
-          // clickable: true
           clickable: clickSet
+          // clickable: true
         });
-        // Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
         {
-          // isDisabled
-          // isYour || isDone
           isDisabled || isDone
             ? {}
             : (Eve.mousedownEve = naver.maps.Event.addListener(