직선 거리측정 기능 거리계산 로직 작업

src/components/laanc/map/LaancMap.js

@@ -90,7 +90,7 @@ export default function LaancMap({ page, handleChange, data }) {
       attributionControl: false
     });
 
-    setDrawObj(getDraw());
+    setDrawObj(getDraw('laanc'));
     map.dragRotate.disable();
 
     const language = new MapboxLanguage();

src/components/map/mapbox/MapBoxMap.js

@@ -7,6 +7,7 @@ import {
   Suspense
 } from 'react';
 import { useSelector, useDispatch } from '@src/redux/store';
+import * as turf from '@turf/turf';
 import {
   Button,
   Modal,
@@ -95,6 +96,8 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
   // 노탐 정보 모달
   const [centeredModal, setCenteredModal] = useState(false);
 
+  const mouseCursorRef = useRef(null);
+
   // 비행예상경로 geoJson 정보
   const [planGeo, setPlanGeo] = useState({
     type: 'FeatureCollection',
@@ -328,7 +331,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
     map.addControl(language);
     // 거리 축적
     map.addControl(new mapboxgl.ScaleControl());
-    const drawObj = getDraw();
+    const drawObj = getDraw('map');
     map.addControl(drawObj);
     // 드래그 제한 2d
     // map.dragRotate.disable();
@@ -346,6 +349,8 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
       }
     ));
 
+    let startPoint = null;
+
     map.on('style.load', () => {
       const layers = map.getStyle().layers;
       const labelLayerId = layers.find(
@@ -566,11 +571,52 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
 
       setMapLoaded(true);
     });
+
+    map.on('click', e => {
+      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 => {
+      if (startPoint) {
+        // console.log(drawObj.getAll());
+        const feature = [];
+        drawObj
+          .getAll()
+          .features[0].geometry.coordinates.map(i => feature.push(i));
+        const obj = {
+          geometry: {
+            coordinates: [...feature],
+            type: 'LineString'
+          },
+          type: 'Feature'
+        };
+        const distance = turf.length(obj);
+        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`;
+      }
+    });
+
     handlerDrawObjInit(drawObj);
     setMapObject(map);
     dispatch(clientMapInit(map));
   };
 
+  function calculateDistance(point1, point2) {
+    return mapboxgl.MercatorCoordinate.fromLngLat(point1).distanceTo(
+      mapboxgl.MercatorCoordinate.fromLngLat(point2)
+    );
+  }
+
   return (
     <>
       <div
@@ -578,6 +624,18 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
         ref={mapContainer}
         style={{ width: '100%', height: '100vh' }}
       ></div>
+      <div
+        ref={mouseCursorRef}
+        style={{
+          position: 'absolute',
+          display: 'none',
+          background: '#8a1c05',
+          color: '#fff',
+          padding: '5px',
+          borderRadius: '5px',
+          fontWeight: 500
+        }}
+      ></div>
       {isMapLoaded && mapObject ? (
         <>
           <DronToast />

src/utility/MapUtils.js

@@ -476,8 +476,9 @@ export const flightlayerBuffer = source => {
 };
 
 // 비행구역 상세맵 draw 정보 셋팅
-export const getDraw = () =>
-  new MapboxDraw({
+export const getDraw = mode => {
+  if (mode === 'laanc') {
+    return new MapboxDraw({
       displayControlsDefault: false,
       userProperties: true,
       boxSelect: false,
@@ -566,6 +567,91 @@ export const getDraw = () =>
         }
       ]
     });
+  } else {
+    return new MapboxDraw({
+      displayControlsDefault: false,
+      userProperties: true,
+      boxSelect: false,
+      modes: {
+        ...MapboxDraw.modes,
+        draw_circle: CircleMode,
+        drag_circle: DragCircleMode,
+        direct_select: DirectMode,
+        simple_select: SimpleSelectMode
+      },
+      styles: [
+        {
+          // polyline
+          id: 'gl-draw-line',
+          type: 'line',
+          filter: [
+            'all',
+            ['==', '$type', 'LineString'],
+            ['!=', 'mode', 'static']
+          ],
+          layout: {
+            'line-cap': 'round',
+            'line-join': 'round'
+          },
+          paint: {
+            'line-color': '#8a1c05',
+            'line-width': 2
+          }
+        },
+        {
+          // polygon fill
+          id: 'gl-draw-polygon-fill',
+          type: 'fill',
+          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          paint: {
+            'fill-color': '#8a1c05',
+            'fill-outline-color': '#8a1c05',
+            'fill-opacity': 0.1
+          }
+        },
+        // polygon outline
+        {
+          id: 'gl-draw-polygon-stroke-active',
+          type: 'line',
+          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          layout: {
+            'line-cap': 'round',
+            'line-join': 'round'
+          },
+          paint: {
+            'line-color': '#8a1c05',
+            'line-dasharray': [0.2, 2],
+            'line-width': 2
+          }
+        },
+        {
+          // vertex point halos
+          id: 'gl-draw-polygon-and-line-vertex-halo-active',
+          type: 'circle',
+          filter: [
+            'all',
+            ['==', 'meta', 'vertex'],
+            ['==', '$type', 'Point'],
+            ['!=', 'mode', 'static']
+          ],
+          paint: {
+            'circle-radius': 8,
+            'circle-color': '#ffffff'
+          }
+        },
+        {
+          // vertex points
+          id: 'gl-draw-polygon-and-line-vertex-active',
+          type: 'circle',
+          paint: {
+            'circle-radius': 6,
+            'circle-color': '#8a1c05'
+          }
+        }
+      ]
+    });
+  }
+};
 
 /**
  * 그리기모드 셋팅