거리측정 3자리 콤마추가(거리,둘레,면적) 및 다각형 기능 작업중

src/containers/flight/OperationApprovalsContainer.js

@@ -100,6 +100,7 @@ export default function OperationApprovalsContainer({ mode }) {
   const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(true);
   const [isResetDisabled, isSetResetDisabled] = useState(true);
   const totalDistanceRef = useRef(null);
+  const totalAreaRef = useRef(null);
   const mouseCursorRef = useRef(null);
   const distanceBoxRef = useRef(null);
 
@@ -468,7 +469,10 @@ export default function OperationApprovalsContainer({ mode }) {
   const handlerDrawTypeChange = (e, val) => {
     drawObj.deleteAll();
     distanceMarkers.map(i => i.remove());
+    isSetResetDisabled(true);
     distanceBoxRef.current.style.display = 'block';
+    totalDistanceRef.current.innerText = '';
+    totalAreaRef.current.innerText = '';
     dispatch(clientChangeDrawType(val));
     handlerStartMode(val, drawObj);
   };
@@ -482,7 +486,7 @@ export default function OperationApprovalsContainer({ mode }) {
       {
         totalDistanceRef,
         mouseCursorRef,
-        distanceBoxRef
+        totalAreaRef
       },
       obj
     );
@@ -722,6 +726,13 @@ export default function OperationApprovalsContainer({ mode }) {
                       >
                         총 거리 : 1050.24m
                       </span>
+                      <span
+                        ref={totalAreaRef}
+                        className='finish'
+                        style={{ display: 'none' }}
+                      >
+                        총 거리 : 1050.24m
+                      </span>
                     </p>
                   </div>
                 </div>

src/utility/MapUtils.js

@@ -167,7 +167,7 @@ export const handlerFitBounds = (map, paths, padding, type, page) => {
       bounds.extend(paths[i]);
     }
   }
-  console.log(bounds);
+
   if (page === 'flight') {
     const syncPadding = Math.min(
       padding,
@@ -673,7 +673,7 @@ export const handlerStartMode = (mode, drawObj) => {
 export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
   const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick;
   const originPolygonClickHandler = MapboxDraw.modes.draw_polygon.onClick;
-  const { totalDistanceRef, mouseCursorRef } = refObj;
+  const { totalDistanceRef, mouseCursorRef, totalAreaRef } = refObj;
 
   let startPoint;
 
@@ -681,7 +681,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
     originLineClickHandler.call(this, state, e);
     startPoint = e.lngLat;
 
-    const distance = getDrawDistance(drawObj);
+    const distance = getDrawDistance(drawObj, 'draw_line_string');
     if (typeof distance === 'string') {
       totalDistanceRef.current.style.display = 'block';
       totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
@@ -694,26 +694,36 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
   MapboxDraw.modes.draw_polygon.onClick = function (state, e) {
     originPolygonClickHandler.call(this, state, e);
     startPoint = e.lngLat;
+    if (state.currentVertexPosition > 2) {
+      const distance = getDrawDistance(drawObj, 'draw_polygon');
+      const area = getArea(drawObj);
 
-    const markerList = getDintancePointPopupList(drawObj);
+      totalDistanceRef.current.style.display = 'block';
-    callback(mapInstance, markerList, drawObj);
+      totalDistanceRef.current.innerText = `둘레 : ${distance.toLocaleString()}m`;
+      totalAreaRef.current.style.display = 'block';
+      totalAreaRef.current.innerText = `면적 : ${area}m²`;
+    }
+
+    // const markerList = getDintancePointPopupList(drawObj);
+    // callback(mapInstance, markerList, drawObj);
   };
 
   mapInstance.on('mousemove', e => {
+    const drawMode = drawObj.getMode();
     if (startPoint) {
       mouseCursorRef.current.style.display = 'none';
-      if (drawObj.getMode() === 'direct_select') {
+      if (drawMode === 'direct_select') {
         // distanceMarkers.map(i => i.remove());
 
-        const distance = getDrawDistance(drawObj);
+        const distance = getDrawDistance(drawObj, drawMode);
         totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
       }
     }
-    if (drawObj.getMode() === 'direct_select') {
+    if (drawMode === 'direct_select') {
       const markerList = getDintancePointPopupList(drawObj);
       callback(mapInstance, markerList, drawObj);
     }
-    if (drawObj.getMode() === 'draw_line_string') {
+    if (drawMode === 'draw_line_string') {
       if (drawObj.getAll().features[0].geometry.coordinates.length === 1) {
         mouseCursorRef.current.style.display = 'block';
         mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
@@ -741,27 +751,55 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
  * @param {MapboxDraw} drawObj
  * @returns 총 거리 : number
  */
-export const getDrawDistance = drawObj => {
+export const getDrawDistance = (drawObj, drawMode) => {
   const drawGeometry = drawObj.getAll().features[0];
   let distance = 0;
+
   if (drawGeometry) {
     const feature = [];
     drawGeometry.geometry.coordinates.map(i => feature.push(i));
     const obj = {
+      type: 'Feature',
       geometry: {
-        coordinates: [...feature],
+        type: drawMode === 'draw_line_string' ? 'LineString' : 'Polygon',
-        type: 'LineString'
+        coordinates: [...feature]
-      },
+      }
-      type: 'Feature'
     };
     distance = turf.length(obj, { units: 'kilometers' });
     distance = distance * 1000;
-    distance = distance.toFixed(2);
+    distance = distance
+      .toFixed(2)
+      .toString()
+      .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     if (distance === '0.00') return;
   }
   return distance;
 };
 
+export const getArea = drawObj => {
+  const drawGeometry = drawObj.getAll().features[0];
+  let area = 0;
+
+  if (drawGeometry) {
+    const feature = [];
+    drawGeometry.geometry.coordinates.map(i => feature.push(i));
+    const obj = {
+      type: 'Feature',
+      geometry: {
+        type: 'Polygon',
+        coordinates: [...feature]
+      }
+    };
+    area = turf.area(obj);
+    area = area
+      .toFixed(2)
+      .toString()
+      .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  }
+
+  return area;
+};
+
 /**
  *
  * @param {MapboxDraw} drawObj