From 9533d1ca99f08d99a8855de990b53380b1143ac1 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Fri, 19 Jul 2024 11:17:45 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B1=B0=EB=A6=AC=EC=B8=A1=EC=A0=95=20?= =?UTF-8?q?=EC=A7=81=EC=84=A0=20=EC=B4=9D=EA=B1=B0=EB=A6=AC=20=EB=85=B8?= =?UTF-8?q?=EC=B6=9C=20=EC=8B=9C=EC=A0=90=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/OperationApprovalsContainer.js | 5 +- src/utility/MapUtils.js | 105 +++++++++++------- 2 files changed, 68 insertions(+), 42 deletions(-) diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index 3a5c9801..224e4b7d 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/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); }; diff --git a/src/utility/MapUtils.js b/src/utility/MapUtils.js index 6566052a..77be57a4 100644 --- a/src/utility/MapUtils.js +++ b/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 = ( - mapInstance, - callback, - refObj, - 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; 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'; - const distance = getDrawDistance(drawObj); - totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`; + // totalDistanceRef.current.style.display = 'block'; + // const distance = getDrawDistance(drawObj); + // 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,34 +769,54 @@ 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) => { - if ( - i[0] !== - drawGeometry.geometry.coordinates[ - drawGeometry.geometry.coordinates.length - 1 - ][0] - ) { - const obj = { - geometry: { - coordinates: [i, drawGeometry.geometry.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: [drawGeometry.geometry.coordinates[idx + 1]] - }); + const coordinates = drawGeometry.geometry.coordinates; + if (drawGeometry.geometry.type === 'LineString') { + coordinates.map((i, idx) => { + if (i[0] !== coordinates[coordinates.length - 1][0]) { + const obj = { + 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, polygonCoords[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: [polygonCoords[idx + 1]] + }); + } + } + }); + } } return markerList;