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,7 +132,9 @@ export const LaancDrawControl = props => {
   };
 
   // 도형 그리기 완료 시
+  // drawType을 바꾸면 종료처리가 돼서 이게 실행되는 듯
   const handlerDblClickFinish = state => {
+    if (state.currentVertexPosition !== 0) {
       console.log('dblclick');
       const mode = handlerReturnMode(drawObj.getMode());
 
@@ -145,8 +151,9 @@ export const LaancDrawControl = props => {
       } else {
         const obj = state[mode.toLowerCase()];
         const length = state.currentVertexPosition;
-      drawObj.setFeatureProperty(obj.id, 'id', mode);
+        if (obj.coordinates.length > 0) {
-      drawObj.setFeatureProperty(obj.id, 'inAirArea', inAirArea);
+          drawObj?.setFeatureProperty(obj.id, 'id', mode);
+          drawObj?.setFeatureProperty(obj.id, 'inAirArea', inAirArea);
 
           // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함
           if (mode === 'LINE') {
@@ -178,6 +185,8 @@ export const LaancDrawControl = props => {
           };
           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' }}>
+                {drawObj.getAll().features.length > 1
-                  {/* <div>좌표위치</div> */}
+                  ? drawObj
-                  {coordArr.length > 0
+                      .getAll()
-                    ? coordArr.map(coord => (
+                      .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>
-                          {coord[0]} | {coord[1]}
+                                    {fCoord[0]}, {fCoord[1]}
                                   </div>
-                      ))
+                                );
-                    : null}
+                              }
+                            })}
+                            {/* {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>