From 9353f6b5772cd7fd4298b4c16d2ad851adcacbd6 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: Wed, 18 Oct 2023 18:50:31 +0900 Subject: [PATCH] =?UTF-8?q?laanc=20=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?= =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EA=B8=B0=20=EC=99=84=EB=A3=8C=20=EC=8B=9C=20?= =?UTF-8?q?=EA=B4=80=EC=A0=9C=EA=B6=8C=20=ED=8F=AC=ED=95=A8=20=EC=9C=A0?= =?UTF-8?q?=EB=AC=B4=20=EC=B2=B4=ED=81=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/mapbox/draw/LaancDrawControl.js | 141 ++++++++++-------- .../basis/flight/models/basisFlightModel.ts | 10 +- .../flight/reducers/basisFlightReducer.ts | 15 +- src/views/laanc/LaancAreaMap.js | 9 +- 4 files changed, 104 insertions(+), 71 deletions(-) diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js index 7ae40f3..95a996d 100644 --- a/src/components/map/mapbox/draw/LaancDrawControl.js +++ b/src/components/map/mapbox/draw/LaancDrawControl.js @@ -27,6 +27,8 @@ export const LaancDrawControl = props => { const [bufferId, setBufferId] = useState(); const [isDrawDone, setIsDrawDone] = useState(false); + // const [inAirArea, setInAirArea] = useState(false); + let inAirArea = 'N'; const [alertModal, setAlertModal] = useState({ isOpen: false, @@ -48,7 +50,6 @@ export const LaancDrawControl = props => { const DrawLineStringMode = MapboxDraw.modes.draw_line_string; const DrawPolygonMode = MapboxDraw.modes.draw_polygon; const DrawCircleMode = CircleMode; - console.log(DrawCircleMode, '>>>>>>'); const modeArr = [DrawLineStringMode, DrawPolygonMode, DrawCircleMode]; modeArr.forEach(m => { @@ -75,6 +76,10 @@ export const LaancDrawControl = props => { } }, [isDrawDone]); + // useEffect(() => { + // console.log(inAirArea, '--1122'); + // }, [inAirArea]); + // 클릭할 때마다 마커 찍어줌 const handlerCustomOnClick = (state, e) => { console.log('click'); @@ -83,6 +88,8 @@ export const LaancDrawControl = props => { layers: ['maine'] }); if (features.length > 0) { + inAirArea = 'Y'; + // setInAirArea(true); // console.log(features, '>>>>>관제권?'); // areaCoordList 컬럼 새로 만든거에 TRUE 머시기... 가 아니라 여기가 아님 일단은!! 노트 참고해!!! } @@ -124,20 +131,23 @@ export const LaancDrawControl = props => { const handlerDblClickFinish = state => { console.log('dblclick'); const mode = handlerReturnMode(drawObj.getMode()); - console.log(state, '>>>>>state'); if (mode === 'CIRCLE') { + const obj = state.polygon; const data = { - coord: state.polygon.properties.center, - radius: state.polygon.properties.radiusInKm * 1000, - id: state.polygon.id + coord: obj.properties.center, + radius: obj.properties.radiusInKm * 1000, + id: obj.id }; + drawObj.setFeatureProperty(data.id, 'id', mode); + handlerCreateOneMarker([0, -10], data.coord, data.radius, data.id); handlerAbnormalityCheck(data, mode); } else { const obj = state[mode.toLowerCase()]; - console.log(obj, '>>>>>>obj'); const length = state.currentVertexPosition; drawObj.setFeatureProperty(obj.id, 'id', mode); + drawObj.setFeatureProperty(obj.id, 'inAirArea', inAirArea); + // console.log(inAirArea, '--------------------'); // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함 if (mode === 'LINE') { @@ -163,7 +173,8 @@ export const LaancDrawControl = props => { } const data = { coord: obj.coordinates, - id: obj.id + id: obj.id, + inAirArea: inAirArea }; handlerAbnormalityCheck(data, mode); } @@ -178,15 +189,26 @@ export const LaancDrawControl = props => { const mode = obj.properties.id; const initCoord = obj.geometry.coordinates; - // 폴리곤은 중첩좌표 제거해서 서버에 넘겨야함 - if (mode === 'POLYGON') { - initCoord[0].splice(-1); + if (mode === 'CIRCLE') { + const data = { + coord: obj.properties.center, + radius: obj.properties.radiusInKm * 1000, + id: obj.id + }; + handlerRemoveGroupMarker(obj.id); + handlerCreateOneMarker([0, -10], data.coord, data.radius, data.id); + handlerAbnormalityCheck(data, mode); + } else { + // 폴리곤은 중첩좌표 제거해서 서버에 넘겨야함 + if (mode === 'POLYGON') initCoord[0].splice(-1); + const data = { + coord: initCoord, + id: obj.id + }; + handlerRemoveGroupMarker(obj.id); + handlerCreateGroupMarker(data.coord, obj.id); + handlerAbnormalityCheck(data, mode); } - const data = { - coord: initCoord, - id: obj.id - }; - handlerAbnormalityCheck(data, mode); } }; @@ -203,9 +225,10 @@ export const LaancDrawControl = props => { : mode === 'CIRCLE' ? data.coord : null; - console.log(data, '>>>>>'); - console.log(initCoord, mode, '>>>>check'); - handlerSaveAreaInfo(initCoord, mode); + + const datas = { coord: initCoord, mode: mode, inAirArea: inAirArea }; + // handlerSaveAreaInfo(initCoord, mode); + handlerSaveAreaInfo(datas); }; // 현재 그려진 모든 도형에 대한 비가시권 검사 @@ -245,8 +268,9 @@ export const LaancDrawControl = props => { }; // areaInfo 셋팅 - const handlerSaveAreaInfo = (coord, mode) => { - if (!coord || !mode) { + // const handlerSaveAreaInfo = (coord, mode) => { + const handlerSaveAreaInfo = data => { + if (!data.coord || !data.mode) { alert('에러 발생. 다시 시도해 주세요.'); return; } @@ -255,16 +279,17 @@ export const LaancDrawControl = props => { const areaInfo = { coordinates: [], bufferZone: 0, - areaType: '' + areaType: '', + inAirArea: 'N' }; - const bufferZone = mode === 'POLYGON' ? 0 : 100; + const bufferZone = data.mode === 'POLYGON' ? 0 : 100; const prePath = []; - areaInfo.areaType = mode; + areaInfo.areaType = data.mode; if (areaInfo.areaType !== 'CIRCLE') { - coord.forEach(item => { + data.coord.forEach(item => { const p = { lat: item[1], lon: item[0] @@ -275,66 +300,56 @@ export const LaancDrawControl = props => { areaInfo.coordinates = prePath; areaInfo.bufferZone = bufferZone; + areaInfo.inAirArea = inAirArea; if (areaInfo.areaType === 'CIRCLE') { - const obj = drawObj.getAll(); - const feature = obj.features[0]; + const obj = drawObj.getAll().features; + const feature = obj.filter(o => o.properties.id === 'CIRCLE'); + const point = { - lat: coord[1], - lon: coord[0] + lat: data.coord[1], + lon: data.coord[0] }; areaInfo.coordinates = [point]; - areaInfo.bufferZone = feature.properties.radiusInKm * 1000; + areaInfo.bufferZone = feature[0].properties.radiusInKm * 1000; } props.handlerCoordinates(areaInfo); setIsDrawDone(true); }; - // 버퍼 및 기존 도형 재생성 - // 근데 areaCoordList[0]이.. 도형을 하나만 받아오는걸로 알고 있어서 그거 확인해야함 - // 그리고 circle관련해서 create랑 update다시 작업해야함.... const handlerPastDraw = () => { if (props.areaCoordList) { const obj = drawObj.getAll().features; const areas = props.areaCoordList; if (areas.length > 0 && obj.length > 0) { - // console.log(obj, '>>>'); - // console.log(areas, '>>>>areas'); - // areas -> 지도에 그려진 모든 구역 정보여야함 areas.forEach((area, idx) => { const paths = []; area.coordList.forEach(coord => paths.push([coord.lon, coord.lat])); if (area.areaType) { console.log('pastDraw', area); - if (area.areaType === 'LINE') { - // 버퍼 생성 - if (area.bufferCoordList) { - const bufferPaths = []; - - area.bufferCoordList.forEach(bfCoord => - bufferPaths.push([bfCoord.lon, bfCoord.lat]) - ); - - handlerCreateDrawObj( - bufferId, - setBufferId, - 'LineString', - { path: bufferPaths }, - 'BUFFER' - ); + if (area.areaType === 'CIRCLE') { + } else { + if (area.areaType === 'LINE') { + // 버퍼 생성 + if (area.bufferCoordList) { + const bufferPaths = []; + + area.bufferCoordList.forEach(bfCoord => + bufferPaths.push([bfCoord.lon, bfCoord.lat]) + ); + + handlerCreateDrawObj( + bufferId, + setBufferId, + 'LineString', + { path: bufferPaths }, + 'BUFFER' + ); + } + } else if (area.areaType === 'POLYGON') { + paths.push(paths[0]); } - } else if (area.areaType === 'POLYGON') { - paths.push(paths[0]); } - const currentObj = obj.filter(o => o.properties.id !== 'BUFFER'); - currentObj.forEach(obj => { - handlerRemoveGroupMarker(obj.id); - - const initCoord = obj.geometry.coordinates; - const coord = - obj.properties.id === 'LINE' ? initCoord : initCoord[0]; - handlerCreateGroupMarker(coord, obj.id); - }); } }); } @@ -417,6 +432,8 @@ export const LaancDrawControl = props => { const drawInit = () => { // drawObj.deleteAll(); // handlerRemoveAllMarker(); + // setInAirArea(false); + props.handlerSaveCheck(false); setDrawObjId(); diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index d420d00..93cbaa0 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -124,6 +124,7 @@ export interface FlightPlanAreaData { updateDt?: string; coordList?: FlightPlanAreaCoordDataList | undefined; bufferCoordList?: FlightPlanAreaCoordDataList | undefined; + inAirArea: boolean; // docState: string, } @@ -324,7 +325,8 @@ export const initFlight = { createUserId: '', createDt: '' } - ] + ], + inAirArea: false } ], @@ -474,7 +476,8 @@ export const initFlightBas = { createDt: '', updateUserId: '', updateDt: '', - coordList: undefined + coordList: undefined, + inAirArea: false }, coord: { planAreaCoordSno: 0, @@ -536,7 +539,8 @@ export const initFlightBas = { createUserId: '', createDt: '' } - ] + ], + inAirArea: false } ], pilotList: [ diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 3f5a3a0..6560045 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -124,7 +124,20 @@ export const flightReducer = createReducer( .handleAction(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.success, (state, action) => produce(state, draft => { const data = action.payload; - draft.areaCoordList = data; + if (draft.areaCoordList) { + 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 { + draft.areaCoordList[0] = { ...data[0], inAirArea: true }; + } + // draft.areaCoordList[0] = { ...data[0], inAirArea }; + // draft.areaCoordList[0] = { ...data[0] }; + } + } }) ) //비행구역설정 날씨 API diff --git a/src/views/laanc/LaancAreaMap.js b/src/views/laanc/LaancAreaMap.js index 8ca31e4..18161d6 100644 --- a/src/views/laanc/LaancAreaMap.js +++ b/src/views/laanc/LaancAreaMap.js @@ -253,10 +253,6 @@ export default function LaancAreaMap({ dispatch(mapInitAction(map)); }; - const handlerDrawType = val => { - dispatch(drawTypeChangeAction(val)); - }; - const handlerInitCoordinates = () => { const init = initFlightBas.initDetail.areaList.concat(); dispatch(AREA_COORDINATE_LIST_SAVE(init)); @@ -279,10 +275,13 @@ export default function LaancAreaMap({ ...area, bufferZone: areaInfo.bufferZone, areaType: areaInfo.areaType, - coordList: coordList + coordList: coordList, + inAirArea: areaInfo.inAirArea }; }); + sessionStorage.setItem('inAirArea', JSON.stringify(areaList[0].inAirArea)); + if (areaInfo.areaType === 'LINE' || areaInfo.areaType === 'POLYGON') { dispatch(FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaList)); } else {