laanc 비행구역 폴리곤 마지막 마커 생성

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

@@ -12,12 +12,7 @@ import {
 } from '../../../../utility/DrawUtil';
 import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import {
+import { CircleMode } from 'mapbox-gl-draw-circle';
-  CircleMode,
-  DragCircleMode,
-  DirectMode,
-  SimpleSelectMode
-} from 'mapbox-gl-draw-circle';
 
 export const LaancDrawControl = props => {
   const dispatch = useDispatch();
@@ -223,8 +218,8 @@ export const LaancDrawControl = props => {
           id: obj.id
         };
 
-        handlerRemoveGroupMarker(obj.id);
+        // handlerRemoveGroupMarker(obj.id);
-        handlerCreateGroupMarker(data, mode);
+        // handlerCreateGroupMarker(data, mode);
         handlerAbnormalityCheck(data, mode);
       }
     }
@@ -385,7 +380,7 @@ export const LaancDrawControl = props => {
       const objs = drawObj?.getAll().features;
       const areas = props.areaCoordList;
       if (areas.length > 0 && objs.length > 0) {
-        // areas -> 지도에 그려진 모든 구역 정보여야함
+        // areas -> 현재는 1개이지만 추후에 데이터가 바뀌면 여러개의 도형도 처리 가능!
         areas.forEach((area, idx) => {
           const paths = [];
           area.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
@@ -393,6 +388,7 @@ export const LaancDrawControl = props => {
             console.log('pastDraw', area);
             if (area.areaType === 'CIRCLE') {
             } else {
+              let objId = '';
               if (area.areaType === 'LINE') {
                 // 버퍼 생성
                 if (area.bufferCoordList) {
@@ -431,10 +427,35 @@ export const LaancDrawControl = props => {
                   const newBufferId = drawObj.add(newBuffer);
                   drawObj.setFeatureProperty(newBufferId[0], 'id', 'BUFFER');
                   drawObj.setFeatureProperty(newBufferId[0], 'lineId', lineId);
+
+                  objId = lineId;
                 }
               } else if (area.areaType === 'POLYGON') {
                 paths.push(paths[0]);
+
+                let polygonId = '';
+                const polygons = objs.filter(
+                  o => o.properties.id === 'POLYGON'
+                );
+                for (let i = 0; i < polygons.length; i++) {
+                  const result = handlerArraysAreEqual(
+                    polygons[i].geometry.coordinates[0],
+                    paths
+                  );
+                  if (result) {
+                    polygonId = polygons[i].id;
+                    break;
+                  }
                 }
+                objId = polygonId;
+              }
+              // 마커를 삭제하고 다시 그려주기
+              const data = {
+                coord: area.areaType === 'LINE' ? paths : [paths],
+                id: objId
+              };
+              handlerRemoveGroupMarker(data.id);
+              handlerCreateGroupMarker(data, area.areaType);
             }
             dispatch(drawTypeChangeAction('DONE'));
           }

src/utility/DrawUtil.js

@@ -60,7 +60,7 @@ export const handlerGetHtmlContent = (distance, id) => {
 
   return (
     '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>' +
-    `<div style="display:hidden;" className=${id}></div>` +
+    `<div style="display:hidden;" id=${id}></div>` +
     text +
     '</span></div>'
   );