From 4e7fbc042e3e7423fed46e42bc42f5266f09dca4 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Mon, 22 Jul 2024 11:50:50 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B1=B0=EB=A6=AC=EC=B8=A1=EC=A0=95=20?= =?UTF-8?q?=EA=B8=B0=ED=83=80=20=EA=B8=B0=EB=8A=A5=20=EC=9C=A0=ED=9A=A8?= =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/OperationApprovalsContainer.js | 37 +++++++++---- src/utility/MapUtils.js | 55 +++++++++++++------ 2 files changed, 64 insertions(+), 28 deletions(-) diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index 7e41af1b..fb4cec85 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/src/containers/flight/OperationApprovalsContainer.js @@ -82,8 +82,8 @@ export default function OperationApprovalsContainer({ mode }) { const [dataBlocks, setDataBlocks] = useState([]); // 거리측정 - const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(true); - const [isResetDisabled, isSetResetDisabled] = useState(true); + const [isDistanceRevert, setIsDistanceRevert] = useState(true); + const [isResetDisabled, setIsResetDisabled] = useState(true); const totalDistanceRef = useRef(null); const totalAreaRef = useRef(null); const mouseCursorRef = useRef(null); @@ -453,7 +453,7 @@ export default function OperationApprovalsContainer({ mode }) { const handlerDrawTypeChange = (e, val) => { drawObj.deleteAll(); distanceMarkers.map(i => i.remove()); - isSetResetDisabled(true); + setIsResetDisabled(true); distanceBoxRef.current.style.display = 'block'; totalDistanceRef.current.innerText = ''; totalAreaRef.current.innerText = ''; @@ -467,6 +467,7 @@ export default function OperationApprovalsContainer({ mode }) { handlerDrawEvents( mapInstance, handlerDrawPopup, + handlerDrawEnd, { totalDistanceRef, mouseCursorRef, @@ -477,7 +478,6 @@ export default function OperationApprovalsContainer({ mode }) { }; const handlerMapTypeChange = val => { - // dispatch(clientChangeDrawType('')); handlerDistanceClose(); setMapType(val); }; @@ -495,10 +495,26 @@ export default function OperationApprovalsContainer({ mode }) { const handlerDrawReset = () => { drawObj.deleteAll(); distanceMarkers.map(i => i.remove()); - dispatch(clientChangeDrawType('LINE')); - drawObj.changeMode('draw_line_string'); + if (drawType === 'LINE') { + drawObj.changeMode('draw_line_string'); + } else { + drawObj.changeMode('draw_polygon'); + totalAreaRef.current.style.display = 'none'; + } + totalDistanceRef.current.style.display = 'none'; - isSetResetDisabled(true); + setIsResetDisabled(true); + }; + + const handlerDrawEnd = featuresLength => { + if (!featuresLength) { + dispatch(clientChangeDrawType('simple_select')); + totalDistanceRef.current.innerText = ''; + mouseCursorRef.current.style.display = 'none'; + distanceBoxRef.current.style.display = 'none'; + } else { + setIsResetDisabled(false); + } }; const handlerDistanceRevert = () => { @@ -575,11 +591,10 @@ export default function OperationApprovalsContainer({ mode }) { } if (draw.getMode() === 'simple_select') { - setIsDistanceStartPoint(true); - isSetResetDisabled(false); + setIsDistanceRevert(true); } else { if (draw.getMode() === 'draw_line_string') { - setIsDistanceStartPoint(false); + setIsDistanceRevert(false); } } }; @@ -685,7 +700,7 @@ export default function OperationApprovalsContainer({ mode }) { className='btn-icon rounded-circle' color='primary' size='sm' - disabled={isDistanceStartPoint} + disabled={isDistanceRevert} > diff --git a/src/utility/MapUtils.js b/src/utility/MapUtils.js index f9d2e186..97a851e8 100644 --- a/src/utility/MapUtils.js +++ b/src/utility/MapUtils.js @@ -670,7 +670,13 @@ export const handlerStartMode = (mode, drawObj) => { } }; -export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { +export const handlerDrawEvents = ( + mapInstance, + popupCallback, + drawEndCallback, + refObj, + drawObj +) => { const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick; const originPolygonClickHandler = MapboxDraw.modes.draw_polygon.onClick; const { totalDistanceRef, mouseCursorRef, totalAreaRef } = refObj; @@ -688,7 +694,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { } const markerList = getDintancePointPopupList(drawObj); - callback(mapInstance, markerList, drawObj); + popupCallback(mapInstance, markerList, drawObj); }; MapboxDraw.modes.draw_polygon.onClick = function (state, e) { @@ -703,9 +709,6 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { totalAreaRef.current.style.display = 'block'; totalAreaRef.current.innerText = `면적 : ${area}m²`; } - - // const markerList = getDintancePointPopupList(drawObj); - // callback(mapInstance, markerList, drawObj); }; mapInstance.on('mousemove', e => { @@ -717,7 +720,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { // distanceMarkers.map(i => i.remove()); if (type.features[0].geometry.type === 'LineString') { const markerList = getDintancePointPopupList(drawObj); - callback(mapInstance, markerList, drawObj); + popupCallback(mapInstance, markerList, drawObj); const distance = getDrawDistance(drawObj, 'draw_line_string'); totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`; } else { @@ -728,12 +731,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { } } } - // if (drawMode === 'direct_select') { - // if (drawMode === 'draw_line_string') { - // const markerList = getDintancePointPopupList(drawObj); - // callback(mapInstance, markerList, drawObj); - // } - // } + if (drawMode === 'draw_line_string') { if (drawObj.getAll().features[0].geometry.coordinates.length === 1) { mouseCursorRef.current.style.display = 'block'; @@ -742,25 +740,43 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { mouseCursorRef.current.innerText = '시작점 선택'; } } + + if (drawMode === 'draw_polygon') { + if (drawObj.getAll().features[0].geometry.coordinates[0].length === 2) { + 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 = '시작점 선택'; + } + } }); mapInstance.on('mouseout', e => { mouseCursorRef.current.style.display = 'none'; }); - mapInstance.on('draw.create', () => { - // totalDistanceRef.current.style.display = 'block'; - // const distance = getDrawDistance(drawObj); - // totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`; + mapInstance.on('draw.create', e => { + console.log(e); + drawEndCallback(e.features.length); mouseCursorRef.current.style.display = 'none'; mouseCursorRef.current.style.innerText = ''; startPoint = null; }); + + mapInstance.on('draw.modechange', (obj, e) => { + if (obj.mode === 'simple_select') { + const featuresLength = drawObj.getAll().features.length; + if (!featuresLength) { + console.log('!?!?'); + drawEndCallback(drawObj.getAll().features.length); + } + } + }); }; /** * * @param {MapboxDraw} drawObj - * @returns 총 거리 : number + * @returns 총 거리 : string */ export const getDrawDistance = (drawObj, drawMode) => { const drawGeometry = drawObj.getAll().features[0]; @@ -788,6 +804,11 @@ export const getDrawDistance = (drawObj, drawMode) => { return distance; }; +/** + * + * @param {MapboxDraw} drawObj + * @returns 면적 : string + */ export const getArea = drawObj => { const drawGeometry = drawObj.getAll().features[0]; let area = 0;