diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js index 95a996d2..b235472b 100644 --- a/src/components/map/mapbox/draw/LaancDrawControl.js +++ b/src/components/map/mapbox/draw/LaancDrawControl.js @@ -76,10 +76,6 @@ export const LaancDrawControl = props => { } }, [isDrawDone]); - // useEffect(() => { - // console.log(inAirArea, '--1122'); - // }, [inAirArea]); - // 클릭할 때마다 마커 찍어줌 const handlerCustomOnClick = (state, e) => { console.log('click'); @@ -91,7 +87,6 @@ export const LaancDrawControl = props => { inAirArea = 'Y'; // setInAirArea(true); // console.log(features, '>>>>>관제권?'); - // areaCoordList 컬럼 새로 만든거에 TRUE 머시기... 가 아니라 여기가 아님 일단은!! 노트 참고해!!! } const type = handlerReturnMode(drawObj.getMode()); @@ -147,7 +142,6 @@ export const LaancDrawControl = props => { const length = state.currentVertexPosition; drawObj.setFeatureProperty(obj.id, 'id', mode); drawObj.setFeatureProperty(obj.id, 'inAirArea', inAirArea); - // console.log(inAirArea, '--------------------'); // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함 if (mode === 'LINE') { @@ -162,6 +156,7 @@ export const LaancDrawControl = props => { } } else if (mode === 'POLYGON') { obj.coordinates[0].splice(-1); + if (length < 2) { setAlertModal({ isOpen: true, @@ -206,7 +201,7 @@ export const LaancDrawControl = props => { id: obj.id }; handlerRemoveGroupMarker(obj.id); - handlerCreateGroupMarker(data.coord, obj.id); + handlerCreateGroupMarker(data, mode); handlerAbnormalityCheck(data, mode); } } @@ -227,7 +222,6 @@ export const LaancDrawControl = props => { : null; const datas = { coord: initCoord, mode: mode, inAirArea: inAirArea }; - // handlerSaveAreaInfo(initCoord, mode); handlerSaveAreaInfo(datas); }; @@ -314,6 +308,15 @@ export const LaancDrawControl = props => { } props.handlerCoordinates(areaInfo); setIsDrawDone(true); + + const obj = drawObj + .getAll() + .features.filter(obj => obj.properties.id !== 'BUFFER'); + if (obj.length > 1) { + props.handlerAddChange('overAdd', true); + } else { + props.handlerAddChange('isViewAdd', true); + } }; const handlerPastDraw = () => { @@ -411,40 +414,52 @@ export const LaancDrawControl = props => { }; // 해당되는 id의 마커 생성 - const handlerCreateGroupMarker = (coords, id) => { + const handlerCreateGroupMarker = (data, mode) => { const areas = props.areaCoordList[0]; - if (areas.areaType !== 'CIRCLE') { - for (let i = 0; i < coords.length; i++) { + if (mode !== 'CIRCLE') { + const coord = mode === 'LINE' ? data.coord : data.coord[0]; + for (let i = 0; i < coord.length; i++) { + const coords = coord; if (i === 0) { - handlerCreateOneMarker([0, -10], coords[i], 'Start', id); + handlerCreateOneMarker([0, -10], coords[i], 'Start', data.id); } else { const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]); const text = CalculateDistance(coords[i - 1], coords[i]); - handlerCreateOneMarker([0, 0], lngLat, text, id); + handlerCreateOneMarker([0, 0], lngLat, text, data.id); } } } else { - handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone, id); + handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone, data.id); } }; const drawInit = () => { - // drawObj.deleteAll(); - // handlerRemoveAllMarker(); - // setInAirArea(false); + if (!props.addData.isAddable) { + drawObj.deleteAll(); + handlerRemoveAllMarker(); - props.handlerSaveCheck(false); - setDrawObjId(); + props.handlerSaveCheck(false); + setDrawObjId(); - props.handlerInitCoordinates(); + props.handlerInitCoordinates(); + } const mode = mapControl.drawType; 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); }; diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 65600450..7c0a233a 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -128,7 +128,6 @@ export const flightReducer = createReducer( if (draft.areaCoordList.length > 0) { // const inAirArea = draft.areaCoordList[0].inAirArea; const inAirArea = sessionStorage.getItem('inAirArea') as string; - console.log(inAirArea, '>>>'); if (inAirArea.includes('N')) { draft.areaCoordList[0] = { ...data[0], inAirArea: false }; } else { diff --git a/src/views/laanc/FlightArea.js b/src/views/laanc/FlightArea.js index 98d087b0..2336e690 100644 --- a/src/views/laanc/FlightArea.js +++ b/src/views/laanc/FlightArea.js @@ -37,6 +37,13 @@ import axios from '../../modules/utils/customAxiosUtil'; 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'; + +const initialAddData = { + isAddable: false, + isViewAdd: false, + overAdd: false +}; export default function FlightArea({ centeredModal, @@ -63,11 +70,17 @@ export default function FlightArea({ const [formModal, setFormModal] = useState(false); const [alertModal, setAlertModal] = useState({ isOpen: false, - title: '', - desc: '' + title: '비행구역 설정', + desc: '구역은 최대 2개까지 설정 가능합니다.' + }); + const [addModal, setAddModal] = useState({ + isOpen: false, + title: '비행구역 설정', + desc: '모드를 변경하고 추가구역을 설정해주세요. 구역은 최대 2개까지 설정 가능합니다.' }); const [isSaveable, setIsSaveable] = useState(false); + const [addData, setAddData] = useState(initialAddData); //날씨 임시 데이터 const [wheather, setWheather] = useState([]); @@ -482,6 +495,31 @@ export default function FlightArea({ } }; + const handlerAddClick = () => { + if (!addData.isAddable) { + setAddModal(prev => ({ + ...prev, + isOpen: true + })); + handlerAddChange('isAddable', true); + } else { + alert('구역은 최대 2개까지 설정 가능합니다.'); + } + }; + + const handlerAddChange = (key, val) => { + // const [addData, setAddData] = useState({ + // isAddalbe: false, + // isViewAdd: false, + // overAdd: false + // }) + + setAddData(prev => ({ + ...prev, + [key]: val + })); + }; + return (
@@ -509,6 +547,8 @@ export default function FlightArea({ mapContainer={mapContainer} drawObj={drawObj} setIsSaveable={setIsSaveable} + handlerAddChange={handlerAddChange} + addData={addData} /> @@ -550,26 +590,28 @@ export default function FlightArea({ > 초기화 - + {addData.isViewAdd ? ( + + ) : null} {wheather[0]?.coordList[0].lat != 0 ? (