laanc 비행구역 비정상상황일 때 버퍼 삭제되지 않는 현상 수정

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

@@ -154,6 +154,19 @@ export const LaancDrawControl = props => {
           // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함
           if (mode === 'LINE') {
             obj.coordinates.splice(-1);
+            // 여기서 버퍼 빈양식 만들어주자!
+            const buffer = drawObj.get(bufferId);
+            if (buffer) drawObj.delete(bufferId);
+
+            const newBuffer = {
+              type: 'LineString',
+              coordinates: []
+            };
+            const newBufferId = drawObj.add(newBuffer);
+            drawObj.setFeatureProperty(newBufferId[0], 'id', 'BUFFER');
+            drawObj.setFeatureProperty(newBufferId[0], 'lineId', obj.id);
+            setBufferId(newBufferId[0]);
+
             if (length < 1) {
               setAlertModal({
                 isOpen: true,
@@ -256,6 +269,7 @@ export const LaancDrawControl = props => {
         }
       }
     }
+
     if (isBreak) {
       props.setModal(true);
       handlerRemoveError(data.id);
@@ -271,9 +285,23 @@ export const LaancDrawControl = props => {
     dispatch(drawTypeChangeAction('DONE'));
     // props.handlerAddChange('isAddable', false);
     props.handlerAddChange('overAdd', false);
-    drawObj.delete(id);
     handlerRemoveGroupMarker(id);
     props.handlerSaveCheck(false);
+
+    drawObj.delete(id);
+
+    // 라인일 경우 버퍼도 삭제
+    const buffer = drawObj
+      .getAll()
+      .features.find(obj => obj.properties?.lineId === id);
+    if (buffer) drawObj.delete(buffer.id);
+
+    const viewCoordObj = drawObj
+      .getAll()
+      .features.filter(
+        o => o.geometry.coordinates.length > 0 && o.properties.id !== 'BUFFER'
+      );
+    props.setViewCoordObj(viewCoordObj);
   };
 
   // areaInfo 셋팅
@@ -338,11 +366,27 @@ export const LaancDrawControl = props => {
     }
   };
 
+  const handlerArraysAreEqual = (arr1, arr2) => {
+    if (arr1 === arr2) return true;
+    if (arr1.length !== arr2.length) return false;
+
+    for (let i = 0; i < arr1.length; i++) {
+      if (Array.isArray(arr1[i]) && Array.isArray(arr2[i])) {
+        if (!handlerArraysAreEqual(arr1[i], arr2[i])) {
+          return false;
+        }
+      } else if (arr1[i] !== arr2[i]) {
+        return false;
+      }
+    }
+    return true;
+  };
+
   const handlerPastDraw = () => {
     if (props.areaCoordList) {
-      const obj = drawObj?.getAll().features;
+      const objs = drawObj?.getAll().features;
       const areas = props.areaCoordList;
-      if (areas.length > 0 && obj.length > 0) {
+      if (areas.length > 0 && objs.length > 0) {
         // areas -> 지도에 그려진 모든 구역 정보여야함
         areas.forEach((area, idx) => {
           const paths = [];
@@ -360,13 +404,35 @@ export const LaancDrawControl = props => {
                     bufferPaths.push([bfCoord.lon, bfCoord.lat])
                   );
 
-                  handlerCreateDrawObj(
-                    bufferId,
-                    setBufferId,
-                    'LineString',
-                    { path: bufferPaths },
-                    'BUFFER'
+                  let lineId = '';
+                  const lines = objs.filter(o => o.properties.id === 'LINE');
+
+                  // area.coordList와 일치하는 line의 id값을 찾음
+                  for (let i = 0; i < lines.length; i++) {
+                    const result = handlerArraysAreEqual(
+                      lines[i].geometry.coordinates,
+                      paths
+                    );
+                    if (result) {
+                      lineId = lines[i].id;
+                      break;
+                    }
+                  }
+
+                  // features중에 위에서 찾은 lineId값을 properties로 갖고 있는 버퍼를 찾아서 지워줌
+                  const oldBuffer = objs.find(
+                    obj => obj.properties?.lineId === lineId
                   );
+                  drawObj.delete(oldBuffer.id);
+
+                  // 새 버퍼 생성
+                  const newBuffer = {
+                    type: 'LineString',
+                    coordinates: bufferPaths
+                  };
+                  const newBufferId = drawObj.add(newBuffer);
+                  drawObj.setFeatureProperty(newBufferId[0], 'id', 'BUFFER');
+                  drawObj.setFeatureProperty(newBufferId[0], 'lineId', lineId);
                 }
               } else if (area.areaType === 'POLYGON') {
                 paths.push(paths[0]);
@@ -466,6 +532,8 @@ export const LaancDrawControl = props => {
         setDrawObjId();
 
         props.handlerInitCoordinates();
+
+        props.setViewCoordObj([]);
       }
 
       props.setCoordArr([]);

src/views/laanc/LaancAreaMap.js

@@ -328,6 +328,8 @@ export default function LaancAreaMap({
                       : obj.geometry.coordinates[0];
                   if (obj.properties.id === 'POLYGON') {
                     coord = coord.slice(0, coord.length - 1);
+                  } else if (obj.properties.id === 'CIRCLE') {
+                    coord = [obj.properties.center];
                   }
 
                   return (
@@ -504,6 +506,7 @@ export default function LaancAreaMap({
                 handlerCoordinates={handlerCoordinates}
                 handlerInitCoordinates={handlerInitCoordinates}
                 setCoordArr={setCoordArr}
+                viewCoordObj={viewCoordObj}
                 setViewCoordObj={setViewCoordObj}
               />
               <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />