From 13a22a855bfffe917aff6f389e45c7534b55e16f Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Fri, 19 Jul 2024 14:22:11 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B1=B0=EB=A6=AC=EC=B8=A1=EC=A0=95=203?= =?UTF-8?q?=EC=9E=90=EB=A6=AC=20=EC=BD=A4=EB=A7=88=EC=B6=94=EA=B0=80(?= =?UTF-8?q?=EA=B1=B0=EB=A6=AC,=EB=91=98=EB=A0=88,=EB=A9=B4=EC=A0=81)=20?= =?UTF-8?q?=EB=B0=8F=20=EB=8B=A4=EA=B0=81=ED=98=95=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/OperationApprovalsContainer.js | 13 +++- src/utility/MapUtils.js | 68 +++++++++++++++---- 2 files changed, 65 insertions(+), 16 deletions(-) diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index 224e4b7d..a133357c 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/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 + + 총 거리 : 1050.24m +

diff --git a/src/utility/MapUtils.js b/src/utility/MapUtils.js index 77be57a4..7ae40c4f 100644 --- a/src/utility/MapUtils.js +++ b/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); - callback(mapInstance, markerList, drawObj); + totalDistanceRef.current.style.display = 'block'; + 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: 'LineString' - }, - type: 'Feature' + type: drawMode === 'draw_line_string' ? 'LineString' : 'Polygon', + coordinates: [...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