거리측정 직선 총거리 노출 시점 변경

src/containers/flight/OperationApprovalsContainer.js

@@ -10,7 +10,7 @@ import {
   flightlayerPolygon,
   flightlayerBuffer,
   handlerStartMode,
-  handlerOnClickDrawLineString,
+  handlerDrawEvents,
   getDintancePointPopupList
 } from '../../utility/MapUtils';
 import { useHistory } from 'react-router-dom';
@@ -476,7 +476,7 @@ export default function OperationApprovalsContainer({ mode }) {
   const handlerDrawObjInit = (obj, mapInstance) => {
     setDrawObj(obj);
 
-    handlerOnClickDrawLineString(
+    handlerDrawEvents(
       mapInstance,
       handlerDrawPopup,
       {
@@ -509,6 +509,7 @@ export default function OperationApprovalsContainer({ mode }) {
     distanceMarkers.map(i => i.remove());
     dispatch(clientChangeDrawType('LINE'));
     drawObj.changeMode('draw_line_string');
+    totalDistanceRef.current.style.display = 'none';
     isSetResetDisabled(true);
   };
 

src/utility/MapUtils.js

@@ -621,7 +621,6 @@ export const getDraw = mode => {
           },
           paint: {
             'line-color': '#8a1c05',
-            'line-dasharray': [0.2, 2],
             'line-width': 2
           }
         },
@@ -671,13 +670,9 @@ export const handlerStartMode = (mode, drawObj) => {
   }
 };
 
-export const handlerOnClickDrawLineString = (
+export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
-  mapInstance,
-  callback,
-  refObj,
-  drawObj
-) => {
   const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick;
+  const originPolygonClickHandler = MapboxDraw.modes.draw_polygon.onClick;
   const { totalDistanceRef, mouseCursorRef } = refObj;
 
   let startPoint;
@@ -686,6 +681,20 @@ export const handlerOnClickDrawLineString = (
     originLineClickHandler.call(this, state, e);
     startPoint = e.lngLat;
 
+    const distance = getDrawDistance(drawObj);
+    if (typeof distance === 'string') {
+      totalDistanceRef.current.style.display = 'block';
+      totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
+    }
+
+    const markerList = getDintancePointPopupList(drawObj);
+    callback(mapInstance, markerList, drawObj);
+  };
+
+  MapboxDraw.modes.draw_polygon.onClick = function (state, e) {
+    originPolygonClickHandler.call(this, state, e);
+    startPoint = e.lngLat;
+
     const markerList = getDintancePointPopupList(drawObj);
     callback(mapInstance, markerList, drawObj);
   };
@@ -717,15 +726,10 @@ export const handlerOnClickDrawLineString = (
     mouseCursorRef.current.style.display = 'none';
   });
 
-  // mapInstance.on('draw.modechange', obj => {
-  //   if (obj.mode === 'simple_select') {
-  //   }
-  // });
-
   mapInstance.on('draw.create', () => {
-    totalDistanceRef.current.style.display = 'block';
+    // totalDistanceRef.current.style.display = 'block';
-    const distance = getDrawDistance(drawObj);
+    // const distance = getDrawDistance(drawObj);
-    totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
+    // totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
     mouseCursorRef.current.style.display = 'none';
     mouseCursorRef.current.style.innerText = '';
     startPoint = null;
@@ -753,6 +757,7 @@ export const getDrawDistance = drawObj => {
     distance = turf.length(obj, { units: 'kilometers' });
     distance = distance * 1000;
     distance = distance.toFixed(2);
+    if (distance === '0.00') return;
   }
   return distance;
 };
@@ -764,19 +769,38 @@ export const getDrawDistance = drawObj => {
  */
 export const getDintancePointPopupList = drawObj => {
   const drawGeometry = drawObj.getAll().features[0];
-
   let markerList = [];
+
   if (drawGeometry?.geometry) {
-    drawGeometry.geometry.coordinates.map((i, idx) => {
+    const coordinates = drawGeometry.geometry.coordinates;
-      if (
+    if (drawGeometry.geometry.type === 'LineString') {
-        i[0] !==
+      coordinates.map((i, idx) => {
-        drawGeometry.geometry.coordinates[
+        if (i[0] !== coordinates[coordinates.length - 1][0]) {
-          drawGeometry.geometry.coordinates.length - 1
+          const obj = {
-        ][0]
+            geometry: {
-      ) {
+              coordinates: [i, coordinates[idx + 1]],
+              type: 'LineString'
+            },
+            type: 'Feature'
+          };
+          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: [coordinates[idx + 1]]
+            });
+          }
+        }
+      });
+    } else if (drawGeometry.geometry.type === 'Polygon') {
+      const polygonCoords = coordinates[0]; // Assuming first ring is the outer boundary
+      polygonCoords.map((i, idx) => {
+        if (idx < polygonCoords.length - 1) {
           const obj = {
             geometry: {
-            coordinates: [i, drawGeometry.geometry.coordinates[idx + 1]],
+              coordinates: [i, polygonCoords[idx + 1]],
               type: 'LineString'
             },
             type: 'Feature'
@@ -787,12 +811,13 @@ export const getDintancePointPopupList = drawObj => {
           if (distance !== '0.00') {
             markerList.push({
               text: `${distance.toLocaleString()}m`,
-            coord: [drawGeometry.geometry.coordinates[idx + 1]]
+              coord: [polygonCoords[idx + 1]]
             });
           }
         }
       });
     }
+  }
 
   return markerList;
 };