laanc 상세맵 도형 추가 제외 완료

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

@@ -3,6 +3,7 @@ import { InfoModal } from '../../../modal/InfoModal';
 import { useSelector } from 'react-redux';
 import {
   CalculateDistance,
+  handlerGetCircleCoord,
   handlerGetHtmlContent,
   handlerGetMidPoint
 } from '../../../../utility/DrawUtil';
@@ -16,6 +17,8 @@ export const LaancDrawControl = props => {
   const [bufferId, setBufferId] = useState();
   const [geojson, setGeoJson] = useState();
 
+  const [isDrawDone, setIsDrawDone] = useState(false);
+
   const [alertModal, setAlertModal] = useState({
     isOpen: false,
     title: '',
@@ -23,7 +26,10 @@ export const LaancDrawControl = props => {
   });
 
   useEffect(() => {
-    drawInit();
+    const areaType = props.areaCoordList[0].areaType;
+    const drawType = mapControl.drawType;
+
+    if (areaType !== drawType) drawInit();
   }, [mapControl.drawType]);
 
   useEffect(() => {
@@ -39,37 +45,55 @@ export const LaancDrawControl = props => {
     handlerPastDraw();
   }, [props.areaCoordList]);
 
+  useEffect(() => {
+    if (isDrawDone) {
+      props.handlerConfirm(props.areaCoordList);
+      setIsDrawDone(false);
+    }
+  }, [isDrawDone]);
+
+  // 클릭할 때마다 마커 찍어줌
   const handlerOnClick = e => {
+    console.log('click');
+
     const featureIds = drawObj.getFeatureIdsAt(e.point);
     const feature = drawObj.get(featureIds[0]);
     const type = handlerReturnMode(drawObj.getMode());
 
     if (type) {
-      if (feature) {
+      if (type !== 'CIRCLE') {
-        // 뒷 부분
+        if (feature) {
-        const coordinates = feature.geometry.coordinates;
+          // 뒷 부분
-        const coords = [
+          const coordinates = feature.geometry.coordinates;
-          ...new Set(
+          const coords = [
-            type === 'LINE'
+            ...new Set(
-              ? coordinates.map(JSON.stringify)
+              type === 'LINE'
-              : coordinates[0].map(JSON.stringify)
+                ? coordinates.map(JSON.stringify)
-          )
+                : coordinates[0].map(JSON.stringify)
-        ].map(JSON.parse);
+            )
-
+          ].map(JSON.parse);
-        const len = coords.length;
+
-        const lngLat = handlerGetMidPoint(coords[len - 2], coords[len - 1]);
+          const len = coords.length;
-        const text = CalculateDistance(coords[len - 2], coords[len - 1]);
+          const lngLat = handlerGetMidPoint(coords[len - 2], coords[len - 1]);
-
+          const text = CalculateDistance(coords[len - 2], coords[len - 1]);
-        handlerCreateOneMarker([0, 0], lngLat, text);
+
-      } else {
+          handlerCreateOneMarker([0, 0], lngLat, text);
-        // Start
+        } else {
-        handlerCreateOneMarker([0, -10], [e.lngLat.lng, e.lngLat.lat], 'Start');
+          // Start
+          if (type !== 'CIRCLE')
+            handlerCreateOneMarker(
+              [0, -10],
+              [e.lngLat.lng, e.lngLat.lat],
+              'Start'
+            );
+        }
       }
     }
   };
 
   // 도형 첫 생성하면 properties.id에 현재 drawType 넣어줌
   const handlerSetId = e => {
+    console.log('create');
     const id = e.features[0].id;
     const mode = handlerReturnMode(drawObj.getMode());
     if (mode) {
@@ -100,6 +124,7 @@ export const LaancDrawControl = props => {
       alert('에러 발생. 다시 시도해 주세요.');
       return;
     }
+    console.log('saveAreaInfo');
 
     const areaInfo = {
       coordinates: [],
@@ -135,6 +160,7 @@ export const LaancDrawControl = props => {
       areaInfo.bufferZone = feature.properties.radiusInKm * 1000;
     }
     props.handlerCoordinates(areaInfo);
+    setIsDrawDone(true);
   };
 
   const handlerPastDraw = () => {
@@ -147,21 +173,25 @@ export const LaancDrawControl = props => {
         console.log('pastDraw');
         const drawGeoJson = drawObj.getAll();
         if (areas.areaType === 'CIRCLE') {
-          console.log(paths, '>>>');
+          const coord = handlerGetCircleCoord(paths[0], areas.bufferZone);
-          //   handlerCreateDrawObj(
+          handlerCreateDrawObj(
-          //     drawObjId,
+            drawObjId,
-          //     setDrawObjId,
+            setDrawObjId,
-          //     'Polygon',
+            'Polygon',
-          //     [paths],
+            {
-          //     'CIRCLE'
+              path: coord,
-          //   );
+              center: paths[0],
+              radius: areas.bufferZone
+            },
+            'CIRCLE'
+          );
         } else {
           if (areas.areaType === 'LINE') {
             handlerCreateDrawObj(
               drawObjId,
               setDrawObjId,
               'LineString',
-              paths,
+              { path: paths },
               'LINE'
             );
 
@@ -177,7 +207,7 @@ export const LaancDrawControl = props => {
                 bufferId,
                 setBufferId,
                 'LineString',
-                bufferPaths,
+                { path: bufferPaths },
                 'BUFFER'
               );
             }
@@ -186,7 +216,7 @@ export const LaancDrawControl = props => {
               drawObjId,
               setDrawObjId,
               'Polygon',
-              [paths],
+              { path: [paths] },
               'POLYGON'
             );
           }
@@ -202,15 +232,21 @@ export const LaancDrawControl = props => {
   };
 
   // 기존에 그려진 도형 지우고 새 도형 생성
-  const handlerCreateDrawObj = (id, setter, type, coord, propertyId) => {
+  const handlerCreateDrawObj = (id, setter, type, data, propertyId) => {
     const obj = drawObj.get(id);
     if (obj) drawObj.delete(id);
 
     const newObj = {
       type: type,
-      coordinates: coord
+      coordinates: data.path
     };
+
     const newObjId = drawObj.add(newObj);
+    if (propertyId === 'CIRCLE') {
+      drawObj.setFeatureProperty(newObjId[0], 'isCircle', true);
+      drawObj.setFeatureProperty(newObjId[0], 'center', data.center);
+      drawObj.setFeatureProperty(newObjId[0], 'radiusInKm', data.radius / 1000);
+    }
     drawObj.setFeatureProperty(newObjId[0], 'id', propertyId);
     setter(newObjId[0]);
 
@@ -257,6 +293,7 @@ export const LaancDrawControl = props => {
   };
 
   const drawInit = () => {
+    // console.log('drawInit');
     drawObj.deleteAll();
     handlerRemoveMarker();
     setDrawObjId();

src/views/laanc/FlightArea.js

@@ -85,6 +85,7 @@ export default function FlightArea({
       const area = areaCoordList[0];
       if (area.areaType && area.areaType !== '') {
         if (!centeredModal && previewLayer) handlerPreviewDraw();
+        // if (!centeredModal && previewLayer) handlerPrivewDrawObj();
       }
       setWheather(areaCoordList);
     }
@@ -164,6 +165,7 @@ export default function FlightArea({
 
   const handlerSave = async () => {
     if (areaCoordList) {
+      console.log('save');
       const areaDetail = areaCoordList;
       const resultAreaDetail = areaDetail.map(area => {
         return {
@@ -172,24 +174,8 @@ export default function FlightArea({
         };
       });
 
-      // const { data } = await axios.post(
-      //   `api/bas/flight/airspace/contains`,
-      //   resultAreaDetail
-      // );
-
-      // if (data.result) {
-      //   setAlertModal({
-      //     isOpen: true,
-      //     title: '우회 여부 확인',
-      //     desc: '경로상에 비행 금지된 구역이 있습니다.\n우회하여 경로 설정해주시기 바랍니다.'
-      //   });
-
-      //   return false;
-      // }
-
       setCenteredModal(false);
       dispatch(AREA_DETAIL_LIST_SAVE(resultAreaDetail));
-      // handleModal({ type: 'area', isOpne: false });
     } else {
       alert('아무것도 작성 안함');
     }
@@ -319,6 +305,7 @@ export default function FlightArea({
 
     const language = new MapboxLanguage();
     map.addControl(language);
+    // map.addControl(draw);
 
     const tb = (window.tb = new threebox.Threebox(
       map,
@@ -384,6 +371,7 @@ export default function FlightArea({
 
       let fitZoomPaths = [];
 
+      // 기존
       if (areas.areaType) {
         if (areas.areaType === 'CIRCLE') {
           const radius = areas.bufferZone;
@@ -569,9 +557,13 @@ export default function FlightArea({
                         obj => obj.properties.id !== 'BUFFER'
                       ).length;
 
-                    if (drawObjCnt > 2) {
+                    console.log(
-                      alert('구역은 2개까지만 설정 가능합니다.');
+                      drawObj.getAll().features,
-                    }
+                      '>>>>현재 그려진 도형들'
+                    );
+                    // if (drawObjCnt > 2) {
+                    //   alert('구역은 2개까지만 설정 가능합니다.');
+                    // }
                   }}
                 >
                   추가

src/views/laanc/LaancAreaMap.js

@@ -184,7 +184,6 @@ export default function LaancAreaMap({ centeredModal, mapContainer, drawObj }) {
     });
 
     map.dragRotate.disable();
-    // map.doubleClickZoom.disable();
 
     const language = new MapboxLanguage();
     map.addControl(language);
@@ -335,6 +334,7 @@ export default function LaancAreaMap({ centeredModal, mapContainer, drawObj }) {
                 mapboxgl={mapboxgl}
                 mapObject={mapObject}
                 areaCoordList={mapAreaCoordList}
+                handlerConfirm={handlerConfirm}
                 handlerCoordinates={handlerCoordinates}
                 handlerInitCoordinates={handlerInitCoordinates}
               />