거리측정 거리 팝업 위치조정

src/containers/flight/OperationApprovalsContainer.js

@@ -570,7 +570,9 @@ export default function OperationApprovalsContainer({ mode }) {
         let distanceMarker = new mapboxgl.Popup({
           closeButton: false,
           closeOnClick: false,
-          anchor: 'bottom',
+          offset: {
+            bottom: [0, -10]
+          },
           focusAfterOpen: false
         })
           .setLngLat([i.coord[0][0].toFixed(6), i.coord[0][1].toFixed(6)])
@@ -587,7 +589,9 @@ export default function OperationApprovalsContainer({ mode }) {
       setIsDistanceStartPoint(true);
       isSetResetDisabled(false);
     } else {
-      setIsDistanceStartPoint(false);
+      if (draw.getMode() === 'draw_line_string') {
+        setIsDistanceStartPoint(false);
+      }
     }
   };
 

src/utility/MapUtils.js

@@ -700,6 +700,10 @@ export const handlerOnClickDrawLineString = (
         totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
       }
     }
+    if (drawObj.getMode() === 'direct_select') {
+      const markerList = getDintancePointPopupList(drawObj);
+      callback(mapInstance, markerList, drawObj);
+    }
     if (drawObj.getMode() === 'draw_line_string') {
       if (drawObj.getAll().features[0].geometry.coordinates.length === 1) {
         mouseCursorRef.current.style.display = 'block';
@@ -709,19 +713,22 @@ export const handlerOnClickDrawLineString = (
       }
     }
   });
+  mapInstance.on('mouseout', e => {
+    mouseCursorRef.current.style.display = 'none';
+  });
 
-  mapInstance.on('draw.modechange', obj => {
+  // mapInstance.on('draw.modechange', obj => {
-    if (obj.mode === 'simple_select') {
+  //   if (obj.mode === 'simple_select') {
-      totalDistanceRef.current.style.display = 'block';
+  //   }
-      const distance = getDrawDistance(drawObj);
+  // });
-      totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
+
-      mouseCursorRef.current.style.display = 'none';
+  mapInstance.on('draw.create', () => {
-      mouseCursorRef.current.style.innerText = '';
+    totalDistanceRef.current.style.display = 'block';
-      const markerList = getDintancePointPopupList(drawObj);
+    const distance = getDrawDistance(drawObj);
-      startPoint = null;
+    totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
-      callback(mapInstance, markerList, drawObj);
+    mouseCursorRef.current.style.display = 'none';
-    } else if (obj.mode === 'direct_select') {
+    mouseCursorRef.current.style.innerText = '';
-    }
+    startPoint = null;
   });
 };