From f0114847d7d0e74068610322637b0eca4bbf4023 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Thu, 19 Oct 2023 12:55:50 +0900 Subject: [PATCH] =?UTF-8?q?laanc=20=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=EC=96=BC=EB=9F=BF,=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=EB=B2=84=ED=8A=BC=20=EB=AA=A8=EB=8B=AC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EB=B0=8F=20=EB=8F=99=EC=9D=BC=ED=95=9C=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=EC=9C=BC=EB=A1=9C=20=EA=B7=B8=EB=A6=AC=EA=B8=B0=20?= =?UTF-8?q?=EA=B0=80=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/mapbox/draw/LaancDrawControl.js | 81 ++++++++++--------- src/utility/DrawUtil.js | 16 ++++ src/views/laanc/FlightArea.js | 38 ++++++--- src/views/laanc/LaancAreaMap.js | 21 ++--- 4 files changed, 98 insertions(+), 58 deletions(-) diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js index 2630a35..c1b3a6c 100644 --- a/src/components/map/mapbox/draw/LaancDrawControl.js +++ b/src/components/map/mapbox/draw/LaancDrawControl.js @@ -6,6 +6,8 @@ import { handlerGetCircleCoord, handlerGetHtmlContent, handlerGetMidPoint, + handlerRemoveAllMarker, + handlerRemoveGroupMarker, handlerReturnMode } from '../../../../utility/DrawUtil'; import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; @@ -41,7 +43,8 @@ export const LaancDrawControl = props => { const areaType = props.areaCoordList[0].areaType; const drawType = mapControl.drawType; - if (areaType !== drawType) drawInit(); + drawInit(); + // if (areaType !== drawType) drawInit(); }, [mapControl.drawType]); useEffect(() => { @@ -260,6 +263,9 @@ export const LaancDrawControl = props => { // 비정상 감지 시 해당 도형, 마커 삭제 const handlerRemoveError = id => { + dispatch(drawTypeChangeAction('DONE')); + // props.handlerAddChange('isAddable', false); + props.handlerAddChange('overAdd', false); drawObj.delete(id); handlerRemoveGroupMarker(id); props.handlerSaveCheck(false); @@ -357,6 +363,7 @@ export const LaancDrawControl = props => { paths.push(paths[0]); } } + dispatch(drawTypeChangeAction('DONE')); } }); } @@ -389,21 +396,21 @@ export const LaancDrawControl = props => { } }; - // 지도에 있는 모든 마커 삭제 - const handlerRemoveAllMarker = () => { - const ele = document.getElementsByClassName('mapboxgl-popup'); - const eleArr = Array.from(ele); - eleArr?.forEach(marker => marker.remove()); - }; - - // 해당되는 id의 마커 삭제 - const handlerRemoveGroupMarker = id => { - const ele = document.getElementsByClassName('mapboxgl-popup'); - const eleArr = Array.from(ele); - eleArr?.forEach(marker => { - if (marker.innerHTML.includes(id)) marker.remove(); - }); - }; + // // 지도에 있는 모든 마커 삭제 + // const handlerRemoveAllMarker = () => { + // const ele = document.getElementsByClassName('mapboxgl-popup'); + // const eleArr = Array.from(ele); + // eleArr?.forEach(marker => marker.remove()); + // }; + + // // 해당되는 id의 마커 삭제 + // const handlerRemoveGroupMarker = id => { + // const ele = document.getElementsByClassName('mapboxgl-popup'); + // const eleArr = Array.from(ele); + // eleArr?.forEach(marker => { + // if (marker.innerHTML.includes(id)) marker.remove(); + // }); + // }; // 개별 마커 생성 const handlerCreateOneMarker = (anchor, lngLat, text, id) => { @@ -439,33 +446,31 @@ export const LaancDrawControl = props => { }; const drawInit = () => { - if (!props.addData.isAddable) { - drawObj.deleteAll(); - handlerRemoveAllMarker(); + const mode = mapControl.drawType; + if (mode !== 'DONE') { + console.log(props.addData.isAddable, '-----'); + if (!props.addData.isAddable) { + drawObj.deleteAll(); + handlerRemoveAllMarker(); - props.handlerSaveCheck(false); - setDrawObjId(); + props.handlerSaveCheck(false); + setDrawObjId(); - props.handlerInitCoordinates(); - } + props.handlerInitCoordinates(); + } - props.setCoordArr([]); - const mode = mapControl.drawType; - if (!mode || mode === 'RESET') { - props.handlerAddChange('isAddable', false); - props.handlerAddChange('isViewAdd', false); - props.handlerAddChange('overAdd', false); - drawObj.deleteAll(); - handlerRemoveAllMarker(); - return; - } + props.setCoordArr([]); + if (!mode || mode === 'RESET') { + props.handlerAddChange('isAddable', false); + props.handlerAddChange('isViewAdd', false); + props.handlerAddChange('overAdd', false); + drawObj.deleteAll(); + handlerRemoveAllMarker(); + return; + } - const addData = props.addData; - if (addData.isAddable && addData.isViewAdd && addData.overAdd) { - alert('구역은 최대 2개까지 설정 가능합니다.'); - return; + handlerStartMode(mode); } - handlerStartMode(mode); }; const handlerStartMode = mode => { diff --git a/src/utility/DrawUtil.js b/src/utility/DrawUtil.js index 020474a..2153457 100644 --- a/src/utility/DrawUtil.js +++ b/src/utility/DrawUtil.js @@ -118,6 +118,22 @@ export const handlerReturnMode = mode => { if (mode.includes('circle') || mode.includes('Circle')) return 'CIRCLE'; }; +// 지도에 있는 모든 마커 삭제 +export const handlerRemoveAllMarker = () => { + const ele = document.getElementsByClassName('mapboxgl-popup'); + const eleArr = Array.from(ele); + eleArr?.forEach(marker => marker.remove()); +}; + +// 해당되는 id의 마커 삭제 +export const handlerRemoveGroupMarker = id => { + const ele = document.getElementsByClassName('mapboxgl-popup'); + const eleArr = Array.from(ele); + eleArr?.forEach(marker => { + if (marker.innerHTML.includes(id)) marker.remove(); + }); +}; + // draw 레이어 export const layerWayPoint = source => { return { diff --git a/src/views/laanc/FlightArea.js b/src/views/laanc/FlightArea.js index 2336e69..8f88274 100644 --- a/src/views/laanc/FlightArea.js +++ b/src/views/laanc/FlightArea.js @@ -14,7 +14,10 @@ import { MAPBOX_TOKEN } from '../../configs/constants'; import { useEffect, useRef, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; -import { AREA_DETAIL_LIST_SAVE } from '../../modules/basis/flight/actions/basisFlightAction'; +import { + AREA_COORDINATE_LIST_SAVE, + AREA_DETAIL_LIST_SAVE +} from '../../modules/basis/flight/actions/basisFlightAction'; import { drawTypeChangeAction, mapInitAction @@ -25,6 +28,7 @@ import { handlerCreatePoint, handlerFitBounds, handlerGetCircleCoord, + handlerRemoveAllMarker, layerBuffer, layerPolygon, layerPolyline, @@ -38,6 +42,7 @@ import { ErrorModal } from '../../components/modal/ErrorModal'; import { FeatureAirZone } from '../../components/map/mapbox/feature/FeatureAirZone'; import { WeatherContainer } from '../../containers/basis/flight/plan/WeatherContainer'; import { InfoModal } from '../../components/modal/InfoModal'; +import { initFlightBas } from '../../modules/laanc/models/laancModels'; const initialAddData = { isAddable: false, @@ -497,13 +502,13 @@ export default function FlightArea({ const handlerAddClick = () => { if (!addData.isAddable) { - setAddModal(prev => ({ - ...prev, - isOpen: true - })); + // setAddModal(prev => ({ + // ...prev, + // isOpen: true + // })); handlerAddChange('isAddable', true); } else { - alert('구역은 최대 2개까지 설정 가능합니다.'); + // alert('구역은 최대 2개까지 설정 가능합니다.'); } }; @@ -520,6 +525,15 @@ export default function FlightArea({ })); }; + const handlerSaveCheck = save => { + setIsSaveable(save); + }; + + const handlerInitCoordinates = () => { + const init = initFlightBas.initDetail.areaList.concat(); + dispatch(AREA_COORDINATE_LIST_SAVE(init)); + }; + return (
@@ -546,7 +560,8 @@ export default function FlightArea({ centeredModal={centeredModal} mapContainer={mapContainer} drawObj={drawObj} - setIsSaveable={setIsSaveable} + handlerInitCoordinates={handlerInitCoordinates} + handlerSaveCheck={handlerSaveCheck} handlerAddChange={handlerAddChange} addData={addData} /> @@ -556,27 +571,29 @@ export default function FlightArea({
{addData.isViewAdd ? (