비행구역 - 중간좌표 지도 비율에 맞춤

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

@@ -44,6 +44,8 @@ const FlightPlanAreaMap = props => {
   const [searchRes, setSearchRes] = useState([]);
   const [isSearch, setIsSearch] = useState(false);
 
+  const [dragSize, setDragSize] = useState(0);
+
   useEffect(() => {
     NaverMapInit();
     return () => {
@@ -115,7 +117,33 @@ const FlightPlanAreaMap = props => {
         style: naver.maps.ZoomControlStyle.SMALL
       }
     };
-    setMap(new naver.maps.Map('map', mapOptions));
+    const mapp = new naver.maps.Map('map', mapOptions);
+    naver.maps.Event.addListener(mapp, 'idle', function () {
+      // 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;
+      }
+    });
+    setMap(mapp);
   };
 
   const handlerDrawType = val => {
@@ -216,6 +244,7 @@ const FlightPlanAreaMap = props => {
                 handleConfirm={props.handleConfirm}
                 isDone={props.isDone}
                 isDisabled={props.isDisabled}
+                dragSize={dragSize}
               />
             ) : null}
 
@@ -273,26 +302,6 @@ const FlightPlanAreaMap = props => {
                 </div>
               </div>
             </div>
-
-            {/* <div className='map-comp'>
-              <Input
-                type='text'
-                id='searchInput'
-                name='searchInput'
-                className='area-input'
-                placeholder='검색명을 입력하세요.'
-                onChange={handleChange}
-                bsSize='sm'
-              />
-              <Button.Ripple
-                className='area-button'
-                color='primary'
-                onClick={handleSearch}
-                size='sm'
-              >
-                검색
-              </Button.Ripple>
-            </div> */}
           </div>
         </div>
 

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

@@ -33,7 +33,8 @@ export const FlightPlanDraw = props => {
   const naver = props.naver;
   const map = props.map;
   let mode = props.mode;
-  let dragCircleSize = props.dragCircleSize;
+  // let dragCircleSize = props.dragCircleSize;
+  // let dragSize = props.dragSize;
 
   let areaInfo;
   let lastDistance;
@@ -62,6 +63,13 @@ export const FlightPlanDraw = props => {
     dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
   };
 
+  const [radiusCircle, setRadiusCircle] = useState();
+
+  // useEffect(() => {
+  //   console.log(props.dragSize);
+  //   setRadiusCircle(props.dragSize);
+  // }, [props.dragSize]);
+
   useEffect(() => {
     drawInit();
   }, [mapControl.drawType]);
@@ -119,12 +127,6 @@ export const FlightPlanDraw = props => {
       setDragCircle([]);
       setBuffer();
     }
-    if (pastCircle.length != 0) {
-      pastCircle.forEach(prev => prev.setMap(null));
-      naver.maps.Event.removeListener(pastClickEve);
-
-      setCircle([]);
-    }
     if (pastPolygon) {
       pastPolygon.setMap(null);
       pastDragCircle.forEach(c => c.setMap(null));
@@ -132,6 +134,12 @@ export const FlightPlanDraw = props => {
       setPolygon();
       setDragCircle([]);
     }
+    if (pastCircle.length != 0) {
+      pastCircle.forEach(prev => prev.setMap(null));
+      naver.maps.Event.removeListener(pastClickEve);
+
+      setCircle([]);
+    }
     if (pastMarker.length != 0) {
       pastMarker.forEach(m => m.setMap(null));
       setMarker([]);
@@ -198,11 +206,9 @@ export const FlightPlanDraw = props => {
           title: '좌표 최소 개수',
           desc: '좌표를 두 개 점으로 이어주세요.'
         });
-
         polyline.setMap(null);
         polyline = '';
       }
-
       setFigure(polyline);
     } else if (polygon) {
       let path = polygon.getPath();
@@ -549,7 +555,7 @@ export const FlightPlanDraw = props => {
       };
 
       areaInfo.coordinates.push(point);
-      areaInfo.bufferZone = circle.getRadius();
+      areaInfo.bufferZone = Math.round(circle.getRadius());
       areaInfo.areaType = 'CIRCLE';
     }
     props.handleCoordinates(areaInfo);
@@ -592,8 +598,6 @@ export const FlightPlanDraw = props => {
 
       let clickSet;
       {
-        // isDisabled === true ? (clickSet = false) : (clickSet = true);
-        // (isYour || isDone) === true ? (clickSet = false) : (clickSet = true);
         (isDisabled || isDone) === true
           ? (clickSet = false)
           : (clickSet = true);
@@ -626,17 +630,15 @@ export const FlightPlanDraw = props => {
               fillColor: '#ffffff',
               fillOpacity: 1,
               center: paths[i],
-              radius: 17,
-              // radius: dragCircleSize,
+              // radius: 17,
+              // radius: dragSize,
               map: map,
               // clickable: true
-              clickable: clickSet
+              clickable: clickSet,
+              ...(props.dragSize ? { radius: radiusCircle } : { radius: 100 })
             })
           );
-          // dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
           {
-            // isDisabled
-            // isYour || isDone
             isDisabled || isDone
               ? {}
               : dragCircleEve.push(
@@ -740,17 +742,15 @@ export const FlightPlanDraw = props => {
               fillColor: '#ffffff',
               fillOpacity: 1,
               center: paths[i],
-              radius: 15,
+              // radius: dragSize,
+              // radius: 17,
               // radius: dragCircleSize,
               map: map,
               // clickable: true
               clickable: clickSet
             })
           );
-          // dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
           {
-            // isDisabled
-            // isYour || isDone
             isDisabled || isDone
               ? {}
               : dragCircleEve.push(