관제 공역 그리기 진행 중

src/components/map/naver/NaverMap.js

@@ -11,6 +11,7 @@ import NewDronPlan from './dron/NewDronPlan';
 import { NewDronHistory } from './dron/NewDronHistroy';
 import DronToast from './dron/DronToast';
 import SensorZone from './sensor/SensorZone';
+import ControlDraw from './draw/ControlDraw';
 
 export const NaverCustomMap = () => {
   const dispatch = useDispatch();
@@ -126,7 +127,8 @@ export const NaverCustomMap = () => {
 
   useEffect(() => {
     NaverMapInit();
-    airPort?.map(air => polyArea(air));
+    // airPort?.map(air => polyArea(air));
+    airPort?.map((air, idx) => polyArea(air, idx));
   }, []);
 
   useEffect(() => {
@@ -198,11 +200,11 @@ export const NaverCustomMap = () => {
     setArrPolyline([...arrPolyline, line]);
   };
 
-  const polyArea = air => {
+  const polyArea = (air, idx) => {
     //격자 공역
     const polyArr = [];
     const radius = air.buffer;
-    const position = air.center;
+    const position = air.center; //공역 센터
     const color = '#000';
     const opacity = 0.7;
 
@@ -215,6 +217,8 @@ export const NaverCustomMap = () => {
         // buffer += 2000;
         buffer += 1000;
 
+        //EPSG3857.getDestinationCoord
+        //지정한 좌표에서 북쪽을 기준으로 각도와 거리만큼 떨어진 위치의 좌표 반환
         const coord = new naver.maps.EPSG3857.getDestinationCoord(
           position,
           angle,
@@ -308,6 +312,8 @@ export const NaverCustomMap = () => {
 
           <NaverMapControl map={mapObject} />
 
+          <ControlDraw map={mapObject} naver={naver} />
+
           {/* <DronHistory
             map={mapObject}
             naver={naver}

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

@@ -0,0 +1,151 @@
+import $ from 'jquery';
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+export default function ControlDraw(props) {
+  const mapControl = useSelector(state => state.controlMapReducer);
+
+  const naver = props.naver;
+  const map = props.map;
+  let mode;
+
+  const [mapClickEvent, setMapClickEvent] = useState();
+  const [circleArr, setCircleArr] = useState([]);
+
+  const [up, setUp] = useState(false);
+
+  useEffect(() => {
+    if (up) {
+      const delay = 100;
+      const timer = setTimeout(() => {
+        createMapClick();
+        setUp(false);
+      }, delay);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [up]);
+
+  useEffect(() => {
+    drawInit();
+  }, [mapControl.ctrlDrawType]);
+
+  const drawInit = () => {
+    removeMapClick();
+    if (mapControl.ctrlDrawType === 'CIRCLE') {
+      onClickButton('CIRCLE');
+    } else if (mapControl.ctrlDrawType === 'RESET') {
+      onClickReset();
+    }
+  };
+
+  const onClickButton = newMode => {
+    removeMapClick();
+    if (mode === newMode) {
+      mode = null;
+      return;
+    }
+
+    // startMode(newMode);
+    if (!newMode) return;
+
+    createMapClick();
+  };
+
+  const onClickReset = () => {
+    console.log('초기화 진행');
+    circleArr.map(circle => circle.setMap(null));
+    setCircleArr([]);
+
+    removeMapClick();
+  };
+
+  const removeMapClick = () => {
+    $(document).off('mousemove.measure');
+    $(document).off('mouseup.measure');
+
+    // naver.maps.Event.clearInstanceListeners(map);
+    naver.maps.Event.removeListener(mapClickEvent);
+    setMapClickEvent();
+  };
+
+  const createMapClick = () => {
+    setMapClickEvent(
+      naver.maps.Event.addListener(map, 'click', function (e) {
+        onClickCircle(e);
+      })
+    );
+  };
+
+  const onClickCircle = e => {
+    const coord = e.coord;
+
+    const circle = new naver.maps.Circle({
+      strokeColor: '#283046',
+      strokeOpacity: 1,
+      fillColor: '#7367F0',
+      fillOpacity: 0.1,
+      center: coord,
+      radius: 100,
+      map: map,
+      clickable: true
+    });
+    setCircleArr(prev => [...prev, circle]);
+
+    naver.maps.Event.addListener(circle, 'mousedown', function () {
+      onMouseDown(circle);
+    });
+    setUp(false);
+  };
+
+  const onMouseDown = circle => {
+    map.setOptions({
+      draggable: false,
+      pinchZoom: false,
+      scrollWheel: false,
+      keyboardShortcuts: false,
+      disableDoubleTapZoom: true,
+      disableDoubleClickZoom: true,
+      disableTwoFingerTapZoom: true
+    });
+
+    $(document).on('mousemove.measure', function (e) {
+      onMouseMove(e, circle);
+    });
+
+    $(document).on('mouseup.measure', function (e) {
+      onMouseUp();
+    });
+  };
+
+  const onMouseMove = (e, circle) => {
+    const proj = map.getProjection();
+    const coord = proj.fromPageXYToCoord(
+      new naver.maps.Point(e.pageX, e.pageY)
+    );
+
+    const center = circle.getCenter();
+    const r = proj.getDistance(coord, center);
+
+    circle.setRadius(r);
+  };
+
+  const onMouseUp = () => {
+    map.setOptions({
+      draggable: true,
+      pinchZoom: true,
+      scrollWheel: true,
+      keyboardShortcuts: true,
+      disableDoubleTapZoom: false,
+      disableDoubleClickZoom: false,
+      disableTwoFingerTapZoom: false
+    });
+
+    removeMapClick();
+    setUp(true);
+  };
+
+  return null;
+}

src/modules/control/map/actions/controlMapActions.ts

@@ -20,4 +20,7 @@ export const areaClickAction = (value: any) => dispatch =>
   dispatch({ type: 'AREA_CLICK', value });
 
 export const sensorClickAction = (value: any) => dispatch =>
-  dispatch({type: 'SENSOR_CLICK', value})
+  dispatch({ type: 'SENSOR_CLICK', value });
+
+export const ctrlDrawTypeChangeAction = (value: any) => dispatch =>
+  dispatch({ type: 'CTRL_DRAW_TYPE_CHANGE', value });

src/modules/control/map/reducers/controlMapReducer.ts

@@ -13,6 +13,8 @@ const initialState = {
 
   drawType: null,
 
+  ctrlDrawType: null,
+
   drawCheck: ''
 };
 
@@ -67,7 +69,7 @@ const controlReducerReducer = (state = initialState, action) => {
       return {
         ...state,
         sensor: action.value
-      }
+      };
       break;
     default:
       return state;
@@ -78,6 +80,12 @@ const controlReducerReducer = (state = initialState, action) => {
         drawType: action.value
       };
 
+    case 'CTRL_DRAW_TYPE_CHANGE':
+      return {
+        ...state,
+        ctrlDrawType: action.value
+      };
+
     case 'DRAW_CHECK':
       return {
         ...state,

src/views/control/main/ControlMain.js

@@ -19,7 +19,7 @@ import {
 import { AiOutlinePoweroff, AiOutlineExclamation } from 'react-icons/ai';
 import { IoAlertOutline } from 'react-icons/io5';
 import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
-import { Card } from 'reactstrap';
+import { Card, Button } from 'reactstrap';
 import ControlAlarmNotice from '../alarm/ControlAlarmNotice';
 import ControlReportList from '../report/ControlReportList';
 import ControlReportDetail from '../report/ControlReportDetail';
@@ -30,7 +30,10 @@ import WebsocketClient from '../../../components/websocket/WebsocketClient';
 import { useDispatch, useSelector } from 'react-redux';
 import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction';
 import * as Actions from '../../../modules/account/login/actions/authAction';
-import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions';
+import {
+  ctrlDrawTypeChangeAction,
+  objectUnClickAction
+} from '../../../modules/control/map/actions/controlMapActions';
 
 const ControlMain = () => {
   const dispatch = useDispatch();
@@ -149,6 +152,11 @@ const ControlMain = () => {
       } else return <Cloud size={20} />;
     }
   }
+
+  const handlerDrawType = val => {
+    dispatch(ctrlDrawTypeChangeAction(val));
+  };
+
   return (
     <>
       <ControlAlarmNotice />
@@ -295,6 +303,22 @@ const ControlMain = () => {
             </div>
           </Card>
         </div>
+        <div>
+          <Button.Ripple
+            className='mr-1'
+            color='primary'
+            onClick={() => handlerDrawType('CIRCLE')}
+          >
+            Circle
+          </Button.Ripple>
+          <Button.Ripple
+            className='mr-1'
+            color='primary'
+            onClick={() => handlerDrawType('RESET')}
+          >
+            초기화
+          </Button.Ripple>
+        </div>
       </div>
       {oepnReportList ? (
         <ControlReportList