laanc 비행구역 에러 수정

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

@@ -47,6 +47,10 @@ export const LaancDrawControl = props => {
     // if (areaType !== drawType) drawInit();
   }, [mapControl.drawType]);
 
+  // useEffect(() => {
+  //   console.log(props.areaCoordList[0], '-----------');
+  // }, [props.areaCoordList]);
+
   useEffect(() => {
     if (mapObject) {
       mapObject.on('draw.update', handlerUpdateSetting);
@@ -128,55 +132,60 @@ export const LaancDrawControl = props => {
   };
 
   // 도형 그리기 완료 시
+  // drawType을 바꾸면 종료처리가 돼서 이게 실행되는 듯
   const handlerDblClickFinish = state => {
-    console.log('dblclick');
-    const mode = handlerReturnMode(drawObj.getMode());
+    if (state.currentVertexPosition !== 0) {
+      console.log('dblclick');
+      const mode = handlerReturnMode(drawObj.getMode());
 
-    if (mode === 'CIRCLE') {
-      const obj = state.polygon;
-      const data = {
-        coord: obj.properties.center,
-        radius: obj.properties.radiusInKm * 1000,
-        id: obj.id
-      };
-      drawObj.setFeatureProperty(data.id, 'id', mode);
-      handlerCreateOneMarker([0, -10], data.coord, data.radius, data.id);
-      handlerAbnormalityCheck(data, mode);
-    } else {
-      const obj = state[mode.toLowerCase()];
-      const length = state.currentVertexPosition;
-      drawObj.setFeatureProperty(obj.id, 'id', mode);
-      drawObj.setFeatureProperty(obj.id, 'inAirArea', inAirArea);
-
-      // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함
-      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);
+      if (mode === 'CIRCLE') {
+        const obj = state.polygon;
+        const data = {
+          coord: obj.properties.center,
+          radius: obj.properties.radiusInKm * 1000,
+          id: obj.id
+        };
+        drawObj.setFeatureProperty(data.id, 'id', mode);
+        handlerCreateOneMarker([0, -10], data.coord, data.radius, data.id);
+        handlerAbnormalityCheck(data, mode);
+      } else {
+        const obj = state[mode.toLowerCase()];
+        const length = state.currentVertexPosition;
+        if (obj.coordinates.length > 0) {
+          drawObj?.setFeatureProperty(obj.id, 'id', mode);
+          drawObj?.setFeatureProperty(obj.id, 'inAirArea', inAirArea);
+
+          // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함
+          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);
+            }
+          }
+          const data = {
+            coord: obj.coordinates,
+            id: obj.id,
+            inAirArea: inAirArea
+          };
+          handlerAbnormalityCheck(data, mode);
         }
       }
-      const data = {
-        coord: obj.coordinates,
-        id: obj.id,
-        inAirArea: inAirArea
-      };
-      handlerAbnormalityCheck(data, mode);
     }
   };
 
@@ -448,7 +457,7 @@ export const LaancDrawControl = props => {
   const drawInit = () => {
     const mode = mapControl.drawType;
     if (mode !== 'DONE') {
-      console.log(props.addData.isAddable, '-----');
+      // console.log(props.addData.isAddable, '-----');
       if (!props.addData.isAddable) {
         drawObj.deleteAll();
         handlerRemoveAllMarker();

src/utility/DrawUtil.js

@@ -17,7 +17,10 @@ export const InitFeature = (type, id) => {
 export const FormattingCoord = coord => {
   const resultArr = [];
 
-  coord.forEach(co => {
+  // console.log(coord, '>>>>>>>>coord');
+  if (!Array.isArray(coord)) return;
+
+  coord?.forEach(co => {
     const split = String(co).split('.');
     const result = split[0] + '.' + split[1].substring(0, 7);
 

src/views/laanc/FlightArea.js

@@ -507,6 +507,10 @@ export default function FlightArea({
       //   isOpen: true
       // }));
       handlerAddChange('isAddable', true);
+      const obj = drawObj
+        .getAll()
+        .features.filter(obj => obj.properties.id !== 'BUFFER');
+      handlerDrawType(obj[0].properties.id);
     } else {
       // alert('구역은 최대 2개까지 설정 가능합니다.');
     }
@@ -637,6 +641,9 @@ export default function FlightArea({
                 ) : null}
               </div>
               <div>
+                <span style={{ marginRight: '10px' }}>
+                  ※ 비행구역설정 완료를 원하시면 더블클릭해주시기 바랍니다.
+                </span>
                 <Button
                   color='primary'
                   disabled={!isSaveable}

src/views/laanc/LaancAreaMap.js

@@ -75,6 +75,7 @@ export default function LaancAreaMap({
   }, [mapControl.drawType]);
 
   useEffect(() => {
+    // console.log(areaCoordList, '---->>>>');
     if (areaCoordList && mapObject) {
       if (
         areaCoordList[0].coordList[0]?.lat !== 0 &&
@@ -325,16 +326,56 @@ export default function LaancAreaMap({
           >
             {mapObject ? (
               <div style={{ width: '400px' }}>
-                <div style={{ backgroundColor: '#fff' }}>
-                  {/* <div>좌표위치</div> */}
-                  {coordArr.length > 0
-                    ? coordArr.map(coord => (
-                        <div>
-                          {coord[0]} | {coord[1]}
-                        </div>
-                      ))
-                    : null}
-                </div>
+                {drawObj.getAll().features.length > 1
+                  ? drawObj
+                      .getAll()
+                      .features.filter(obj => obj.properties.id !== 'BUFFER')
+                      .map((obj, i) => {
+                        // console.log(obj, '>>>>>>obj');
+                        const coord =
+                          obj.properties.id === 'LINE'
+                            ? obj.geometry.coordinates
+                            : obj.geometry.coordinates[0];
+
+                        return (
+                          <div
+                            style={{
+                              backgroundColor: '#fff',
+                              marginBottom: '10px'
+                            }}
+                          >
+                            <div>비행구역 {i + 1}</div>
+                            {coord?.map(co => {
+                              const fCoord = FormattingCoord(co);
+                              if (fCoord) {
+                                return (
+                                  <div>
+                                    {fCoord[0]}, {fCoord[1]}
+                                  </div>
+                                );
+                              }
+                            })}
+                            {/* {obj.geometry.coordinates.map(coord => {
+                            if (obj.properties.id === 'LINE') {
+                              const fCoord = FormattingCoord(coord);
+                              return (
+                                <div>
+                                  {fCoord[0]} , {fCoord[1]}
+                                </div>
+                              );
+                            } else if(obj.properties.id === 'POLYGON') {
+                              const fCoord = FormattingCoord(coord);
+                              return (
+                                <div>
+                                  {fCoord[0]} , {fCoord[1]}
+                                </div>
+                              );
+                            }
+                          })} */}
+                          </div>
+                        );
+                      })
+                  : null}
               </div>
             ) : null}
           </div>