laanc 비행구역 circle에러 수정 중

src/components/map/mapbox/draw/LaancDrawControl.js

@@ -9,6 +9,12 @@ import {
 } from '../../../../utility/DrawUtil';
 import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import {
+  CircleMode,
+  DragCircleMode,
+  DirectMode,
+  SimpleSelectMode
+} from 'mapbox-gl-draw-circle';
 
 export const LaancDrawControl = props => {
   const dispatch = useDispatch();
@@ -19,7 +25,6 @@ export const LaancDrawControl = props => {
 
   const [drawObjId, setDrawObjId] = useState();
   const [bufferId, setBufferId] = useState();
-  const [geojson, setGeoJson] = useState();
 
   const [isDrawDone, setIsDrawDone] = useState(false);
 
@@ -42,7 +47,9 @@ export const LaancDrawControl = props => {
 
       const DrawLineStringMode = MapboxDraw.modes.draw_line_string;
       const DrawPolygonMode = MapboxDraw.modes.draw_polygon;
-      const modeArr = [DrawLineStringMode, DrawPolygonMode];
+      const DrawCircleMode = CircleMode;
+      console.log(DrawCircleMode, '>>>>>>');
+      const modeArr = [DrawLineStringMode, DrawPolygonMode, DrawCircleMode];
 
       modeArr.forEach(m => {
         m.onStop = state => handlerDblClickFinish(state);
@@ -71,6 +78,15 @@ export const LaancDrawControl = props => {
   // 클릭할 때마다 마커 찍어줌
   const handlerCustomOnClick = (state, e) => {
     console.log('click');
+
+    const features = mapObject.queryRenderedFeatures(e.point, {
+      layers: ['maine']
+    });
+    if (features.length > 0) {
+      // console.log(features, '>>>>>관제권?');
+      // areaCoordList 컬럼 새로 만든거에 TRUE 머시기... 가 아니라 여기가 아님 일단은!! 노트 참고해!!!
+    }
+
     const type = handlerReturnMode(drawObj.getMode());
     const obj = state[type?.toLowerCase()];
 
@@ -104,69 +120,116 @@ export const LaancDrawControl = props => {
     }
   };
 
+  // 도형 그리기 완료 시
   const handlerDblClickFinish = state => {
     console.log('dblclick');
     const mode = handlerReturnMode(drawObj.getMode());
+    console.log(state, '>>>>>state');
 
-    const obj = state[mode.toLowerCase()];
+    if (mode === 'CIRCLE') {
-    console.log(obj, '>>>>>>obj');
+      const data = {
-    const length = state.currentVertexPosition;
+        coord: state.polygon.properties.center,
-    drawObj.setFeatureProperty(obj.id, 'id', mode);
+        radius: state.polygon.properties.radiusInKm * 1000,
-
+        id: state.polygon.id
-    // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함
+      };
-    if (mode === 'LINE') {
+      handlerAbnormalityCheck(data, mode);
-      obj.coordinates.splice(-1);
+    } else {
-      if (length < 1) {
+      const obj = state[mode.toLowerCase()];
-        setAlertModal({
+      console.log(obj, '>>>>>>obj');
-          isOpen: true,
+      const length = state.currentVertexPosition;
-          title: '좌표 최소 개수',
+      drawObj.setFeatureProperty(obj.id, 'id', mode);
-          desc: '좌표를 두 개 점으로 이어주세요.'
+
-        });
+      // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함
-        handlerRemoveError(obj.id);
+      if (mode === 'LINE') {
+        obj.coordinates.splice(-1);
+        if (length < 1) {
+          setAlertModal({
+            isOpen: true,
+            title: '좌표 최소 개수',
+            desc: '좌표를 두 개 점으로 이어주세요.'
+          });
+          handlerRemoveError(obj.id);
+        }
+      } else if (mode === 'POLYGON') {
+        obj.coordinates[0].splice(-1);
+        if (length < 2) {
+          setAlertModal({
+            isOpen: true,
+            title: '좌표 최소 개수',
+            desc: '좌표를 세 개 점으로 이어주세요.'
+          });
+          handlerRemoveError(obj.id);
+        }
       }
-    } else if (mode === 'POLYGON') {
+      const data = {
-      obj.coordinates[0].splice(-1);
+        coord: obj.coordinates,
-      if (length < 2) {
+        id: obj.id
-        setAlertModal({
+      };
-          isOpen: true,
+      handlerAbnormalityCheck(data, mode);
-          title: '좌표 최소 개수',
+    }
-          desc: '좌표를 세 개 점으로 이어주세요.'
+  };
-        });
+
-        handlerRemoveError(obj.id);
+  // 도형 수정 시
+  const handlerUpdateSetting = e => {
+    console.log('update');
+
+    if (e.features[0]) {
+      const obj = e.features[0];
+      const mode = obj.properties.id;
+      const initCoord = obj.geometry.coordinates;
+
+      // 폴리곤은 중첩좌표 제거해서 서버에 넘겨야함
+      if (mode === 'POLYGON') {
+        initCoord[0].splice(-1);
       }
+      const data = {
+        coord: initCoord,
+        id: obj.id
+      };
+      handlerAbnormalityCheck(data, mode);
     }
-    handlerAbnormalityCheck(obj.coordinates, obj.id, mode);
   };
 
-  // 변수들 이름 겹쳐서 헷갈리니까 정리하기
+  // 모든 비정상상황 체크
-  const handlerAbnormalityCheck = (coord, id, mode) => {
+  const handlerAbnormalityCheck = (data, mode) => {
-    console.log('check', coord, id, mode);
+    const isBreak = handlerIsSpecialFlight(data, mode);
-    const isBreak = handlerIsSpecialFlight(coord, id, mode);
     if (isBreak) return;
 
-    const initCoord = coord;
+    const initCoord =
-    const coords =
+      mode === 'LINE'
-      mode === 'LINE' ? initCoord : mode === 'POLYGON' ? initCoord[0] : null;
+        ? data.coord
-    handlerSaveAreaInfo(coords, mode);
+        : mode === 'POLYGON'
+        ? data.coord[0]
+        : mode === 'CIRCLE'
+        ? data.coord
+        : null;
+    console.log(data, '>>>>>');
+    console.log(initCoord, mode, '>>>>check');
+    handlerSaveAreaInfo(initCoord, mode);
   };
 
   // 현재 그려진 모든 도형에 대한 비가시권 검사
-  const handlerIsSpecialFlight = (coord, id, mode) => {
+  const handlerIsSpecialFlight = (data, mode) => {
-    // console.log(obj, 'specialFlight');
     console.log('specialFlight');
     let isBreak = false;
-    const coords = mode === 'LINE' ? coord : coord[0];
+    if (mode === 'CIRCLE') {
-
+      if (data.radius > 1000) {
-    for (let point = 0; point < coords.length - 1; point++) {
-      const distance = CalculateDistance(coords[point], coords[point + 1]);
-      if (distance > 1000) {
         isBreak = true;
-        break;
+      }
+    } else {
+      const coords = mode === 'LINE' ? data.coord : data.coord[0];
+
+      for (let point = 0; point < coords.length - 1; point++) {
+        const distance = CalculateDistance(coords[point], coords[point + 1]);
+        if (distance > 1000) {
+          isBreak = true;
+          break;
+        }
       }
     }
     if (isBreak) {
       props.setModal(true);
-      handlerRemoveError(id);
+      handlerRemoveError(data.id);
       return true;
     } else {
       props.handlerSaveCheck(true);
@@ -181,19 +244,6 @@ export const LaancDrawControl = props => {
     props.handlerSaveCheck(false);
   };
 
-  // 도형 수정 시
-  const handlerUpdateSetting = e => {
-    console.log('update');
-
-    if (e.features[0]) {
-      const obj = e.features[0];
-      const mode = obj.properties.id;
-      const initCoord = obj.geometry.coordinates;
-      const coords = mode === 'LINE' ? initCoord : initCoord[0];
-      handlerAbnormalityCheck(coords, obj.id, mode);
-    }
-  };
-
   // areaInfo 셋팅
   const handlerSaveAreaInfo = (coord, mode) => {
     if (!coord || !mode) {
@@ -240,73 +290,53 @@ export const LaancDrawControl = props => {
   };
 
   // 버퍼 및 기존 도형 재생성
-  // 해당되는 도형 및 마커만 다시 그려지게 해야함(버퍼 포함)
-  // 해당 Id 마커 지우고 path만 받아서 다시 그려지도록...
   // 근데 areaCoordList[0]이.. 도형을 하나만 받아오는걸로 알고 있어서 그거 확인해야함
+  // 그리고 circle관련해서 create랑 update다시 작업해야함....
   const handlerPastDraw = () => {
     if (props.areaCoordList) {
-      const areas = props.areaCoordList[0];
+      const obj = drawObj.getAll().features;
-      const paths = [];
+      const areas = props.areaCoordList;
-      areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
+      if (areas.length > 0 && obj.length > 0) {
-
+        // console.log(obj, '>>>');
-      if (areas.areaType) {
+        // console.log(areas, '>>>>areas');
-        console.log('pastDraw');
+
-        const drawGeoJson = drawObj.getAll();
+        // areas -> 지도에 그려진 모든 구역 정보여야함
-        if (areas.areaType === 'CIRCLE') {
+        areas.forEach((area, idx) => {
-          const coord = handlerGetCircleCoord(paths[0], areas.bufferZone);
+          const paths = [];
-          handlerCreateDrawObj(
+          area.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
-            drawObjId,
+          if (area.areaType) {
-            setDrawObjId,
+            console.log('pastDraw', area);
-            'Polygon',
+            if (area.areaType === 'LINE') {
-            {
+              // 버퍼 생성
-              path: coord,
+              if (area.bufferCoordList) {
-              center: paths[0],
+                const bufferPaths = [];
-              radius: areas.bufferZone
+
-            },
+                area.bufferCoordList.forEach(bfCoord =>
-            'CIRCLE'
+                  bufferPaths.push([bfCoord.lon, bfCoord.lat])
-          );
+                );
-        } else {
+
-          if (areas.areaType === 'LINE') {
+                handlerCreateDrawObj(
-            // handlerCreateDrawObj(
+                  bufferId,
-            //   drawObjId,
+                  setBufferId,
-            //   setDrawObjId,
+                  'LineString',
-            //   'LineString',
+                  { path: bufferPaths },
-            //   { path: paths },
+                  'BUFFER'
-            //   'LINE'
+                );
-            // );
+              }
-
+            } else if (area.areaType === 'POLYGON') {
-            // 버퍼 생성
+              paths.push(paths[0]);
-            if (areas.bufferCoordList) {
-              const bufferPaths = [];
-
-              areas.bufferCoordList.forEach(bfCoord =>
-                bufferPaths.push([bfCoord.lon, bfCoord.lat])
-              );
-
-              handlerCreateDrawObj(
-                bufferId,
-                setBufferId,
-                'LineString',
-                { path: bufferPaths },
-                'BUFFER'
-              );
             }
-          } else if (areas.areaType === 'POLYGON') {
+            const currentObj = obj.filter(o => o.properties.id !== 'BUFFER');
-            // handlerCreateDrawObj(
+            currentObj.forEach(obj => {
-            //   drawObjId,
+              handlerRemoveGroupMarker(obj.id);
-            //   setDrawObjId,
+
-            //   'Polygon',
+              const initCoord = obj.geometry.coordinates;
-            //   { path: [paths] },
+              const coord =
-            //   'POLYGON'
+                obj.properties.id === 'LINE' ? initCoord : initCoord[0];
-            // );
+              handlerCreateGroupMarker(coord, obj.id);
+            });
           }
-        }
+        });
-        // 현재 그려진 도형 저장
-        setGeoJson(drawGeoJson);
-
-        // 마커 재 생성
-        // handlerRemoveMarker();
-        // handlerCreateAllMarker(paths);
       }
     }
   };
@@ -338,7 +368,7 @@ export const LaancDrawControl = props => {
   };
 
   // 지도에 있는 모든 마커 삭제
-  const handlerRemoveMarker = () => {
+  const handlerRemoveAllMarker = () => {
     const ele = document.getElementsByClassName('mapboxgl-popup');
     const eleArr = Array.from(ele);
     eleArr?.forEach(marker => marker.remove());
@@ -365,28 +395,28 @@ export const LaancDrawControl = props => {
       .addTo(mapObject);
   };
 
-  // 모든 마커 생성
+  // 해당되는 id의 마커 생성
-  const handlerCreateAllMarker = coords => {
+  const handlerCreateGroupMarker = (coords, id) => {
     const areas = props.areaCoordList[0];
 
     if (areas.areaType !== 'CIRCLE') {
       for (let i = 0; i < coords.length; i++) {
         if (i === 0) {
-          handlerCreateOneMarker([0, -10], coords[i], 'Start');
+          handlerCreateOneMarker([0, -10], coords[i], 'Start', id);
         } else {
           const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]);
           const text = CalculateDistance(coords[i - 1], coords[i]);
-          handlerCreateOneMarker([0, 0], lngLat, text);
+          handlerCreateOneMarker([0, 0], lngLat, text, id);
         }
       }
     } else {
-      handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone);
+      handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone, id);
     }
   };
 
   const drawInit = () => {
     // drawObj.deleteAll();
-    // handlerRemoveMarker();
+    // handlerRemoveAllMarker();
     props.handlerSaveCheck(false);
     setDrawObjId();
 
@@ -395,7 +425,7 @@ export const LaancDrawControl = props => {
     const mode = mapControl.drawType;
     if (!mode || mode === 'RESET') {
       drawObj.deleteAll();
-      handlerRemoveMarker();
+      handlerRemoveAllMarker();
       return;
     }
     handlerStartMode(mode);