비행계획서 공역 좌표 지정 가능

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

@@ -189,9 +189,9 @@ const FlightPlanAreaMap = props => {
       }
     };
     const mapp = new naver.maps.Map('map', mapOptions);
-    naver.maps.Event.addListener(mapp, 'idle', function () {
+    // naver.maps.Event.addListener(mapp, 'idle', function () {
-      // console.log(dragSize);
+    //   // console.log(dragSize);
-    });
+    // });
     naver.maps.Event.addListener(mapp, 'zoom_changed', function () {
       let radius = 17920;
       for (let i = 6; i < 22; i++) {
@@ -215,6 +215,7 @@ const FlightPlanAreaMap = props => {
 
   const handleCoordinates = areaInfo => {
     const initAreaList = initFlightBas.initDetail.areaList.concat();
+
     const coordList = [];
 
     // radius = 10;

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

@@ -19,6 +19,10 @@ export const FlightPlanDraw_init = props => {
   const setDragCircle = props.setDragCircle;
 
   const [pastClickEve, setClickEve] = useState();
+
+  //공역 클릭 가능하도록 하기 위해 만든 임시 이벤트 변수
+  const [pastGeoJsonClickEve, setGeoJsonClickEve] = useState();
+
   const [pastMarker, setMarker] = useState([]);
 
   const [figure, setFigure] = useState();
@@ -55,6 +59,13 @@ export const FlightPlanDraw_init = props => {
     rightclickEve: ''
   };
 
+  //공역 클릭 가능하도록 하기 위해 만든 임시 이벤트 변수
+  let geoJsonEve = {
+    clickEve: '',
+    mousedownEve: '',
+    rightclickEve: ''
+  };
+
   let dragCircle = [];
   let dragCircleEve = [];
 
@@ -135,6 +146,7 @@ export const FlightPlanDraw_init = props => {
     if (pastCircle.length != 0) {
       pastCircle.forEach(prev => prev.setMap(null));
       naver.maps.Event.removeListener(pastClickEve);
+      naver.maps.Event.removeListener(pastGeoJsonClickEve);
 
       setCircle([]);
     }
@@ -150,31 +162,48 @@ export const FlightPlanDraw_init = props => {
   const startMode = mode => {
     if (!mode) return;
 
-    if (pastClickEve) {
+    if (pastClickEve || pastGeoJsonClickEve) {
       naver.maps.Event.removeListener(pastClickEve);
+      naver.maps.Event.removeListener(pastGeoJsonClickEve);
     }
     if (mode === 'LINE') {
       Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
         onClickPolyline(e);
       });
+      geoJsonEve.clickEve = map.data.addListener('click', function (e) {
+        onClickPolyline(e);
+      });
       setClickEve(Eve.clickEve);
+      setGeoJsonClickEve(geoJsonEve.clickEve);
     } else if (mode === 'POLYGON') {
       Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
         onClickPolygon(e);
       });
+      geoJsonEve.clickEve = map.data.addListener('click', function (e) {
+        onClickPolygon(e);
+      });
       setClickEve(Eve.clickEve);
+      setGeoJsonClickEve(geoJsonEve.clickEve);
     } else if (mode === 'CIRCLE') {
       Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
         onClickCircle(e);
       });
+      geoJsonEve.clickEve = map.data.addListener('click', function (e) {
+        onClickCircle(e);
+      });
       setClickEve(Eve.clickEve);
+      setGeoJsonClickEve(geoJsonEve.clickEve);
     }
   };
 
   const removeListener = () => {
     naver.maps.Event.removeListener(Eve.clickEve);
+    naver.maps.Event.removeListener(geoJsonEve.clickEve);
+
     naver.maps.Event.removeListener(pastClickEve);
+    naver.maps.Event.removeListener(pastGeoJsonClickEve);
     setClickEve();
+    setGeoJsonClickEve();
 
     naver.maps.Event.removeListener(Eve.mousedownEve);
     naver.maps.Event.removeListener(Eve.rightclickEve);
@@ -273,6 +302,12 @@ export const FlightPlanDraw_init = props => {
           finishDraw();
         }
       );
+      geoJsonEve.rightclickEve = map.data.addListener(
+        'rightclick',
+        function () {
+          finishDraw();
+        }
+      );
       $(document).on('mousemove.measure', function (e) {
         onMouseMovePolyline(e);
       });
@@ -333,6 +368,12 @@ export const FlightPlanDraw_init = props => {
           finishDraw();
         }
       );
+      geoJsonEve.rightclickEve = map.data.addListener(
+        'rightclick',
+        function () {
+          finishDraw();
+        }
+      );
       $(document).on('mousemove.measure', function (e) {
         onMouseMovePolygon(e);
       });
@@ -510,7 +551,11 @@ export const FlightPlanDraw_init = props => {
       Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
         onClickCircle(e);
       });
+      geoJsonEve.clickEve = map.data.addListener('click', function (e) {
+        onClickCircle(e);
+      });
       setClickEve(Eve.clickEve);
+      setGeoJsonClickEve(geoJsonEve.clickEve);
 
       // setCircle(prev => [...prev, circle]);
       setAreaInfo('');