직선 거리측정 임시기능 작업

src/components/map/mapbox/MapBoxMap.js

@@ -573,16 +573,14 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
     });
 
     map.on('click', e => {
+      console.log(drawObj.getMode());
       if (drawObj.getMode() === 'draw_line_string') {
-        mouseCursorRef.current.style.display = 'block';
-        mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
-        mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
-        // mouseCursorRef.current.innerText = '시작점 선택';
         startPoint = e.lngLat;
       }
     });
 
     map.on('mousemove', e => {
+      let distance = 0;
       if (startPoint) {
         // console.log(drawObj.getAll());
         const feature = [];
@@ -596,13 +594,34 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
           },
           type: 'Feature'
         };
-        const distance = turf.length(obj);
+        distance = turf.length(obj);
+        mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
+        mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
         mouseCursorRef.current.innerText = `${distance.toLocaleString()}km`;
         // const endPoint = e.lngLat;
         // const distance = calculateDistance(startPoint, endPoint);
         // mouseCursorRef.current.innerText = `Distance from start point: ${distance.toFixed(
         //   2
         // )} meters`;
+        if (drawObj.getMode() === 'simple_select') {
+          // startPoint = null;
+          const box = document.getElementById('distance_box');
+          box.innerText = `${distance.toLocaleString()}km`;
+          box.style.display = 'block';
+          mouseCursorRef.current.style.display = 'none';
+          mouseCursorRef.current.style.innerText = '';
+        }
+        if (drawObj.getMode() === 'direct_select') {
+          const box = document.getElementById('distance_box');
+          box.innerText = `${distance.toLocaleString()}km`;
+        }
+      } else {
+        if (drawObj.getMode() === 'draw_line_string') {
+          mouseCursorRef.current.style.display = 'block';
+          mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
+          mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
+          mouseCursorRef.current.innerText = '시작점 선택';
+        }
       }
     });
 
@@ -636,6 +655,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
           fontWeight: 500
         }}
       ></div>
+
       {isMapLoaded && mapObject ? (
         <>
           <DronToast />

src/containers/flight/OperationApprovalsContainer.js

@@ -417,7 +417,12 @@ export default function OperationApprovalsContainer({ mode }) {
     });
   };
 
-  const handlerDrawTypeChange = val => {
+  const handlerDrawTypeChange = (e, val) => {
+    // const cursor = document.getElementById('distance_cursor');
+    // cursor.style.display = 'block';
+    // cursor.style.left = e.clientX + 'px';
+    // cursor.style.top = e.clientY + 45 + 'px';
+    // cursor.innerText = '시작점 선택';
     dispatch(clientChangeDrawType(val));
     handlerStartMode(val, drawObj);
   };
@@ -453,6 +458,21 @@ export default function OperationApprovalsContainer({ mode }) {
             test
           </Button>
         </div>
+        <div
+          id='distance_box'
+          style={{
+            position: 'absolute',
+            zIndex: '9999',
+            left: '500px',
+            top: '20px',
+            background: '#8a1c05',
+            color: '#fff',
+            padding: '5px',
+            borderRadius: '5px',
+            fontWeight: 500,
+            display: 'none'
+          }}
+        ></div>
         <div>
           <Modal
             isOpen={testModal}
@@ -689,16 +709,16 @@ export default function OperationApprovalsContainer({ mode }) {
                   <ButtonGroup>
                     <Button
                       color={drawType === 'LINE' ? 'primary' : ''}
-                      onClick={() => {
+                      onClick={e => {
-                        handlerDrawTypeChange('LINE');
+                        handlerDrawTypeChange(e, 'LINE');
                       }}
                     >
                       직선
                     </Button>
                     <Button
                       color={drawType === 'POLYGON' ? 'primary' : ''}
-                      onClick={() => {
+                      onClick={e => {
-                        handlerDrawTypeChange('POLYGON');
+                        handlerDrawTypeChange(e, 'POLYGON');
                       }}
                     >
                       다각형