직선 거리측정 기능(초기화, 되돌리기, 종료) 작업

src/containers/flight/OperationApprovalsContainer.js

@@ -10,7 +10,8 @@ import {
   flightlayerPolygon,
   flightlayerBuffer,
   handlerStartMode,
-  handlerOnClickDrawLineString
+  handlerOnClickDrawLineString,
+  getDintancePointPopupList
 } from '../../utility/MapUtils';
 import { useHistory } from 'react-router-dom';
 import useMapType from '@hooks/useMapType';
@@ -50,6 +51,7 @@ import mapboxgl from 'mapbox-gl';
 import * as turf from '@turf/turf';
 
 let distanceMarkers = [];
+
 export default function OperationApprovalsContainer({ mode }) {
   const dispatch = useDispatch();
   const history = useHistory();
@@ -95,7 +97,8 @@ export default function OperationApprovalsContainer({ mode }) {
   const [dataBlocks, setDataBlocks] = useState([]);
 
   // 거리측정
-  const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(false);
+  const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(true);
+  const [isResetDisabled, isSetResetDisabled] = useState(true);
   const totalDistanceRef = useRef(null);
   const mouseCursorRef = useRef(null);
   const distanceBoxRef = useRef(null);
@@ -472,6 +475,7 @@ export default function OperationApprovalsContainer({ mode }) {
 
   const handlerDrawObjInit = (obj, mapInstance) => {
     setDrawObj(obj);
+
     handlerOnClickDrawLineString(
       mapInstance,
       handlerDrawPopup,
@@ -492,32 +496,72 @@ export default function OperationApprovalsContainer({ mode }) {
 
   const handlerDistanceClose = () => {
     drawObj.deleteAll();
+    distanceMarkers.map(i => i.remove());
     dispatch(clientChangeDrawType('simple_select'));
     drawObj.changeMode('simple_select');
+    totalDistanceRef.current.innerText = '';
     mouseCursorRef.current.style.display = 'none';
     distanceBoxRef.current.style.display = 'none';
   };
 
+  const handlerDrawReset = () => {
+    drawObj.deleteAll();
+    distanceMarkers.map(i => i.remove());
+    dispatch(clientChangeDrawType('LINE'));
+    drawObj.changeMode('draw_line_string');
+    isSetResetDisabled(true);
+  };
+
   const handlerDistanceRevert = () => {
     if (drawObj.getMode() === 'draw_line_string') {
       const allFeatures = drawObj.getAll();
-
       if (allFeatures.features.length > 0) {
-        allFeatures.features[0].geometry.coordinates.pop(); // 마지막 좌표 제거
+        drawObj.deleteAll();
-        allFeatures.features[0].geometry.coordinates.pop();
+        const coords = allFeatures.features[0].geometry.coordinates;
-        allFeatures.features[0].geometry.coordinates.push(
+
-          allFeatures.features[0].geometry.coordinates[
+        // 새로운 배열로 마지막 두 개의 값을 제거
-            allFeatures.features[0].geometry.coordinates.length - 1
+        if (coords.length > 1) {
-          ]
+          // 최소한 두 개의 좌표가 있어야 함
-        );
+          const newCoords = coords.slice(0, -2); // 마지막 두 개의 값을 제거
+
+          newCoords.push(newCoords[newCoords.length - 1]); // 마지막 값을 다시 추가
+
+          // 중복 배열 제거
+          const uniqueArray = Array.from(
+            new Set(newCoords.map(JSON.stringify))
+          ).map(JSON.parse);
 
-        drawObj.set(allFeatures);
+          if (uniqueArray.length === 1) {
+            uniqueArray.push(uniqueArray[uniqueArray.length - 1]);
+          }
+
+          drawObj.set({
+            type: 'FeatureCollection',
+            features: [
+              {
+                type: 'Feature',
+                properties: {},
+                id: 'pal_line_string',
+                geometry: { type: 'LineString', coordinates: [...uniqueArray] }
+              }
+            ]
+          });
+          const markerList = getDintancePointPopupList(drawObj);
+          handlerDrawPopup(mapObject, markerList, drawObj);
+          // 다시 이어그리기
+          let feature = drawObj.getAll().features[0];
+          drawObj.changeMode('draw_line_string', {
+            featureId: 'pal_line_string',
+            from: feature.geometry.coordinates[
+              feature.geometry.coordinates.length - 1
+            ]
+          });
+        }
       }
     }
   };
 
-  const handlerDrawPopup = (mapInstance, popupList) => {
+  const handlerDrawPopup = (mapInstance, popupList, draw = undefined) => {
-    // setIsDistanceStartPoint(true);
     if (distanceMarkers.length > 0) {
       distanceMarkers.map(i => i.remove());
     }
@@ -538,6 +582,13 @@ export default function OperationApprovalsContainer({ mode }) {
         distanceMarkers.push(distanceMarker);
       });
     }
+
+    if (draw.getMode() === 'simple_select') {
+      setIsDistanceStartPoint(true);
+      isSetResetDisabled(false);
+    } else {
+      setIsDistanceStartPoint(false);
+    }
   };
 
   const handlerLogout = async () => {
@@ -842,14 +893,18 @@ export default function OperationApprovalsContainer({ mode }) {
                       className='btn-icon rounded-circle'
                       color='primary'
                       size='sm'
+                      disabled={isResetDisabled}
+                      onClick={handlerDrawReset}
                     >
                       <FiRotateCw size={16} />
                     </Button>
                     <Button
+                      id='draw_revert'
                       onClick={handlerDistanceRevert}
                       className='btn-icon rounded-circle'
-                      color={isDistanceStartPoint ? 'primary' : ''}
+                      color='primary'
                       size='sm'
+                      disabled={isDistanceStartPoint}
                     >
                       <FiCornerUpLeft size={16} />
                     </Button>

src/utility/MapUtils.js

@@ -583,7 +583,7 @@ export const getDraw = mode => {
       styles: [
         {
           // polyline
-          id: 'gl-draw-line',
+          id: 'pal-gl-draw-line',
           type: 'line',
           filter: [
             'all',
@@ -601,7 +601,7 @@ export const getDraw = mode => {
         },
         {
           // polygon fill
-          id: 'gl-draw-polygon-fill',
+          id: 'pal-gl-draw-polygon-fill',
           type: 'fill',
           filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
           paint: {
@@ -612,7 +612,7 @@ export const getDraw = mode => {
         },
         // polygon outline
         {
-          id: 'gl-draw-polygon-stroke-active',
+          id: 'pal-gl-draw-polygon-stroke-active',
           type: 'line',
           filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
           layout: {
@@ -627,7 +627,7 @@ export const getDraw = mode => {
         },
         {
           // vertex point halos
-          id: 'gl-draw-polygon-and-line-vertex-halo-active',
+          id: 'pal-gl-draw-polygon-and-line-vertex-halo-active',
           type: 'circle',
           filter: [
             'all',
@@ -642,7 +642,7 @@ export const getDraw = mode => {
         },
         {
           // vertex points
-          id: 'gl-draw-polygon-and-line-vertex-active',
+          id: 'pal-gl-draw-polygon-and-line-vertex-active',
           type: 'circle',
           filter: ['all', ['==', '$type', 'Point']],
           paint: {
@@ -678,18 +678,16 @@ export const handlerOnClickDrawLineString = (
   drawObj
 ) => {
   const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick;
-  const { totalDistanceRef, mouseCursorRef, distanceBoxRef } = refObj;
+  const { totalDistanceRef, mouseCursorRef } = refObj;
 
   let startPoint;
-  let markerList = [];
-  let distance = 0;
 
   MapboxDraw.modes.draw_line_string.onClick = function (state, e) {
     originLineClickHandler.call(this, state, e);
     startPoint = e.lngLat;
 
     const markerList = getDintancePointPopupList(drawObj);
-    callback(mapInstance, markerList);
+    callback(mapInstance, markerList, drawObj);
   };
 
   mapInstance.on('mousemove', e => {
@@ -701,9 +699,9 @@ export const handlerOnClickDrawLineString = (
         const distance = getDrawDistance(drawObj);
         totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
       }
-    } else {
+    }
     if (drawObj.getMode() === 'draw_line_string') {
-        console.log('@@@@');
+      if (drawObj.getAll().features[0].geometry.coordinates.length === 1) {
         mouseCursorRef.current.style.display = 'block';
         mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
         mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
@@ -720,7 +718,8 @@ export const handlerOnClickDrawLineString = (
       mouseCursorRef.current.style.display = 'none';
       mouseCursorRef.current.style.innerText = '';
       const markerList = getDintancePointPopupList(drawObj);
-      callback(mapInstance, markerList);
+      startPoint = null;
+      callback(mapInstance, markerList, drawObj);
     } else if (obj.mode === 'direct_select') {
     }
   });
@@ -758,7 +757,7 @@ export const getDrawDistance = drawObj => {
  */
 export const getDintancePointPopupList = drawObj => {
   const drawGeometry = drawObj.getAll().features[0];
-  console.log(drawObj.getAll().features[0]);
+
   let markerList = [];
   if (drawGeometry?.geometry) {
     drawGeometry.geometry.coordinates.map((i, idx) => {
@@ -778,11 +777,13 @@ export const getDintancePointPopupList = drawObj => {
         let distance = turf.length(obj, { units: 'kilometers' });
         distance = distance * 1000;
         distance = distance.toFixed(2);
+        if (distance !== '0.00') {
           markerList.push({
             text: `${distance.toLocaleString()}m`,
             coord: [drawGeometry.geometry.coordinates[idx + 1]]
           });
         }
+      }
     });
   }