From 906ad786275c42f180da78d7152cf3229f207c6a 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: Tue, 7 Nov 2023 13:48:51 +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=A2=8C=ED=91=9C=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/laanc/map/FlightArea.js | 30 +++- src/components/laanc/map/LaancAreaMap.js | 149 +++++++++--------- src/components/laanc/map/LaancDrawControl.js | 2 + .../map/LaancDrawModal.js} | 2 +- 4 files changed, 106 insertions(+), 77 deletions(-) rename src/components/{map/mapbox/draw/LaancModal.js => laanc/map/LaancDrawModal.js} (93%) diff --git a/src/components/laanc/map/FlightArea.js b/src/components/laanc/map/FlightArea.js index b42e6e5..972564d 100644 --- a/src/components/laanc/map/FlightArea.js +++ b/src/components/laanc/map/FlightArea.js @@ -41,6 +41,7 @@ import { FeatureAirZone } from '../../map/mapbox/feature/FeatureAirZone'; import { WeatherContainer } from '../../../containers/basis/flight/plan/WeatherContainer'; import { initFlightBas } from '../../../modules/laanc/models/laancModels'; import * as LaancAction from '../../../modules/laanc/actions/laancActions'; +import LaancDrawModal from './LaancDrawModal'; const initialAddData = { isAddable: false, @@ -72,6 +73,12 @@ export default function FlightArea({ const [previewLayer, setPreviewLayer] = useState(); const [formModal, setFormModal] = useState(false); + const [modal, setModal] = useState({ + title: '', + desc: '', + isOpen: false + }); + const [isSaveable, setIsSaveable] = useState(false); const [addData, setAddData] = useState(initialAddData); @@ -169,8 +176,27 @@ export default function FlightArea({ }); }; + const handlerModal = () => { + setModal(!modal); + }; + const handlerDrawType = val => { - dispatch(drawTypeChangeAction(val)); + if (drawObj.getMode().includes('draw')) { + // alert('비행구역설정 완료 후 타입을 변경해주세요.'); + setModal({ + title: '비행 구역 설정', + desc: ( + <> + 비행구역 설정이 완료되지 않았습니다. +
+ 비행구역 설정 완료 후 타입 변경 부탁드립니다. + + ), + isOpen: true + }); + } else { + dispatch(drawTypeChangeAction(val)); + } }; const handlerSave = async () => { @@ -564,6 +590,7 @@ export default function FlightArea({ addData={addData} setSaveData={setSaveData} handlerSaveElev={handlerSaveElev} + setModal={setModal} /> @@ -657,6 +684,7 @@ export default function FlightArea({ ) : null} + {modal ? : null} state.controlMapReducer); @@ -57,11 +57,11 @@ export default function LaancAreaMap({ ); const [number, setNumber] = useState(0); - const [modal, setModal] = useState({ - title: '', - desc: '', - isOpen: false - }); + // const [modal, setModal] = useState({ + // title: '', + // desc: '', + // isOpen: false + // }); const [detailLayer, setDetailLayer] = useState(); @@ -315,9 +315,9 @@ export default function LaancAreaMap({ dispatch(AREA_COORDINATE_LIST_SAVE(areaList)); }; - const handlerModal = () => { - setModal(!modal); - }; + // const handlerModal = () => { + // setModal(!modal); + // }; return ( @@ -325,73 +325,72 @@ export default function LaancAreaMap({
- {mapObject && viewCoordObj.length > 0 ? ( -
- {/* {console.log(viewCoordObj, '----')} */} - {viewCoordObj?.map((obj, i) => { - let coord = - obj.properties.id === 'LINE' - ? obj.geometry.coordinates - : obj.geometry.coordinates[0]; - if (obj.properties.id === 'POLYGON') { - coord = coord.slice(0, coord.length - 1); - } else if (obj.properties.id === 'CIRCLE') { - coord = [obj.properties.center]; - } - - return ( -
{ - const allObj = drawObj - .getAll() - .features.filter(o => o.properties.id !== 'BUFFER'); - - drawObj.changeMode('direct_select', { - featureId: allObj[i].id - }); - }} - > -
비행구역 {i + 1}
-
- {coord?.map((co, idx) => { - if (idx % 2 === 0) { - const fCoord = FormattingCoord(co); - const current = fCoord.join(', '); - if (idx !== coord.length - 1) { - const next = FormattingCoord(coord[idx + 1]).join( - ', ' - ); - - return ( -
- - {current} - / - {next} - -
- ); - } else { - return ( -
- - {current} - -
- ); - } + {viewCoordObj?.map((obj, i) => { + let coord = + obj.properties.id === 'LINE' + ? obj.geometry.coordinates + : obj.geometry.coordinates[0]; + if (obj.properties.id === 'POLYGON') { + coord = coord.slice(0, coord.length - 1); + } else if (obj.properties.id === 'CIRCLE') { + coord = [obj.properties.center]; + } + + return ( +
{ + const allObj = drawObj + .getAll() + .features.filter(o => o.properties.id !== 'BUFFER'); + + drawObj.changeMode('direct_select', { + featureId: allObj[i].id + }); + }} + > +
+
비행구역 {i + 1}
+
+ {coord?.map((co, idx) => { + if (idx % 2 === 0) { + const fCoord = FormattingCoord(co); + const current = fCoord.join(', '); + if (idx !== coord.length - 1) { + const next = FormattingCoord(coord[idx + 1]).join( + ', ' + ); + + return ( +
+ + {current} + / + {next} + +
+ ); } else { - return null; + return ( +
+ + {current} + +
+ ); } - })} -
+ } else { + return null; + } + })}
- ); - })} -
- ) : null} +
+
+ ); + })}
+
- {modal ? ( + {/* {modal ? ( - ) : null} + ) : null} */} ) : null}
diff --git a/src/components/laanc/map/LaancDrawControl.js b/src/components/laanc/map/LaancDrawControl.js index ea6dddc..abba619 100644 --- a/src/components/laanc/map/LaancDrawControl.js +++ b/src/components/laanc/map/LaancDrawControl.js @@ -357,8 +357,10 @@ export const LaancDrawControl = props => { const remainObj = drawObj .getAll() .features.filter(o => o.properties.id !== 'BUFFER' && o.id !== id); + if (remainObj.length === 0) { props.handlerSaveCheck(false); + dispatch(drawTypeChangeAction('RESET')); } else { props.handlerSaveCheck(true); } diff --git a/src/components/map/mapbox/draw/LaancModal.js b/src/components/laanc/map/LaancDrawModal.js similarity index 93% rename from src/components/map/mapbox/draw/LaancModal.js rename to src/components/laanc/map/LaancDrawModal.js index c3761dc..c97c27d 100644 --- a/src/components/map/mapbox/draw/LaancModal.js +++ b/src/components/laanc/map/LaancDrawModal.js @@ -1,6 +1,6 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; -export default function LaancModal({ modal, handler }) { +export default function LaancDrawModal({ modal, handler }) { const handlerDroneOneStop = () => { window.open('https://drone.onestop.go.kr/', '드론원스탑'); handler();