From f1203f217a6161504240047e08bff7cc84a7f84d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Fri, 29 Jul 2022 13:47:40 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD=20?= =?UTF-8?q?=EA=B8=B0=EC=B4=88=20=EC=A2=8C=ED=91=9C=20=EC=83=81=EC=84=B8=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanAreaMap.js | 13 +- .../map/naver/draw/FlightPlanDrawTest.js | 166 ++++++++++++------ .../flight/plan/FlightPlanAreaContainer.js | 2 +- .../plan/FlightPlanAreaDetailContainer.js | 8 +- .../flight/plan/FlightPlanDetailContainer.js | 34 ++-- .../flight/reducers/basisFlightReducer.ts | 3 +- 6 files changed, 145 insertions(+), 81 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 29a1188..6df20df 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -71,14 +71,15 @@ const FlightPlanAreaMap = (props) => { }; const handleInitCoordinates = () => { - dispatch(AREA_COORDINATE_LIST_SAVE(null)) + const init = initFlightBas.initDetail.areaList.concat(); + dispatch(AREA_COORDINATE_LIST_SAVE(init)) } const handleCoordinates = (areaInfo) => { - const initAreaList = Object.assign([], initFlightBas.initDetail.areaList); + const initAreaList = initFlightBas.initDetail.areaList.concat() const coordList = []; - // radius = 10; + // radius = 10; areaInfo.coordinates.forEach((c, i) => { const coord = Object.assign({}, initFlightBas['coord']); @@ -88,12 +89,14 @@ const FlightPlanAreaMap = (props) => { coordList.push(coord); }); - initAreaList[0].bufferZone = areaInfo.bufferZone; - initAreaList[0].areaType = areaInfo.areaType; + // initAreaList[0].bufferZone = areaInfo.bufferZone; + // initAreaList[0].areaType = areaInfo.areaType; const areaList = initAreaList.map((area, i) => { return { ...area, + bufferZone: areaInfo.bufferZone, + areaType: areaInfo.areaType, coordList : coordList } }) diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 20ff445..1027134 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -62,7 +62,7 @@ export const FlightPlanDrawTest = props => { }, [mapControl.drawType]) useEffect(() => { - // handleDetailDrwa(); + handleDetailDrwa(); }, []) const zoomChange = () => { @@ -79,7 +79,8 @@ export const FlightPlanDrawTest = props => { } } - const drawInit = () => { + const drawInit = () => { + console.log(mapControl.drawType); if(mapControl.drawType==='LINE') { onClickButton('LINE'); } else if(mapControl.drawType==='CIRCLE') { @@ -87,7 +88,7 @@ export const FlightPlanDrawTest = props => { } else if(mapControl.drawType==='POLYGON') { onClickButton('POLYGON'); } else if(mapControl.drawType==='RESET') { - // onClickReset('RESET') + onClickReset('RESET') } } @@ -103,7 +104,7 @@ export const FlightPlanDrawTest = props => { return; } - mode = newMode; + // mode = newMode; startMode(newMode); } @@ -111,40 +112,69 @@ export const FlightPlanDrawTest = props => { const clearMode = (mode) => { console.log('clearMode') - if(!mode) return; + // if(!mode) return; - if (mode === 'LINE') { - if(pastPolyline) { - pastPolyline.setMap(null); - pastDragCircle.forEach(prev => prev.setMap(null)); - setDragCircle([]); - } - - } else if(mode === 'POLYGON') { - if(pastPolygon) { - pastPolygon.setMap(null); - setPolygon(); - pastDragCircle.forEach(prev => prev.setMap(null)); - setDragCircle([]); - } - } else if(mode === 'CIRCLE') { - if(pastCircle) { - pastCircle.setMap(null); - setCircle(); - naver.maps.Event.removeListener(pastEve); - } + // clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로.. + if (pastPolyline) { + console.log('clrea polyline ', pastPolyline) + pastPolyline.setMap(null); + pastDragCircle.forEach(c => c.setMap(null)); + + setPolyline(); + setDragCircle([]); + } + if (pastCircle) { + console.log('clrea circle ', pastCircle) + pastCircle.setMap(null); + naver.maps.Event.removeListener(pastEve); + + setCircle(); + } + if (pastPolygon) { + console.log('clrea polygon ', pastPolygon) + pastPolygon.setMap(null); + pastDragCircle.forEach(c => c.setMap(null)); + + setPolygon(); + setDragCircle([]); } finishDraw(); - props.handleInitCoordinates(); + props.handleInitCoordinates(); + + // if(mode === 'LINE' && pastPolyline) { + // pastPolyline.setMap(null); + // pastDragCircle.forEach(c => c.setMap(null)); + + // setPolyline({}); + // setDragCircle([]); + // } + + // if(mode === 'POLYGON' && pastPolygon) { + // pastPolygon.setMap(null); + // pastDragCircle.forEach(c => c.setMap(null)); + + // setPolygon({}); + // setDragCircle([]); + // } + + // if(mode === 'CIRCLE' && pastCircle) { + // pastCircle.setMap(null); + // naver.maps.Event.removeListener(pastEve); + + // setCircle({}); + // } + + // if(mode === 'RESET') { + // if(pastPolyline) pastPolyline.setMap(null); + // if(pastCircle) pastCircle.setMap(null); + // if(pastPolygon) pastPolygon.setMap(null); + // } } const startMode = (mode) => { console.log('startMode') - // console.log(polyline, 'polyline', pastPolyline, 'pastPolyline'); - // console.log(polygon, 'polygon', pastPolygon, 'pastPolygon'); - // console.log(circle, 'circle', pastCircle, 'pastCircle'); if (!mode) return; if (mode === 'LINE') { @@ -304,7 +334,7 @@ export const FlightPlanDrawTest = props => { }); Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) - $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) }); + $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) }); } else { polygon.getPath().push(coord); } @@ -655,48 +685,68 @@ export const FlightPlanDrawTest = props => { } const onClickReset = () => { - if(mapControl.drawType === 'RESET') { - clearMode(mode); + console.log('onClickRest - ', mapControl.drawType); + if(mapControl.drawType === 'RESET') { + clearMode('RESET'); } } const handleDetailDrwa = () => { if (props.areaCoordList) { - const areas = props.areaCoordList[0]; - if(areas.areaType && areas.areaType === 'LINE') { - const paths = []; + const areas = props.areaCoordList[0]; - areas.coordList.forEach((coord) => { - const path = new naver.maps.LatLng(coord.lat, coord.lon) + const paths = []; - paths.push(path); - }) - - polyline = new naver.maps.Polyline({ - strokeLineCap: 'round', - strokeLineJoin: 'round', - strokeColor: '#283046', - strokeWeight: 3, - strokeOpacity: 1, - path: paths, - map: map - }); - - setPolyline(polyline) - // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); - } + areas.coordList.forEach((coord) => { + const path = new naver.maps.LatLng(coord.lat, coord.lon) - if(areas.areaType && areas.areaType === 'PLOYGON') { + paths.push(path); + }); - } + if(areas.areaType && areas.areaType === 'LINE') { + polyline = new naver.maps.Polyline({ + strokeLineCap: 'round', + strokeLineJoin: 'round', + strokeColor: '#283046', + strokeWeight: 3, + strokeOpacity: 1, + path: paths, + map: map + }); + + setPolyline(polyline) + // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); + } - if(areas.areaType && areas.areaType === 'CIRCLE') { + if(areas.areaType && areas.areaType === 'POLYGON') { + polygon = new naver.maps.Polygon({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + paths: paths, + map: map + }); - } + setPolygon(polygon); + } - } + if(areas.areaType && areas.areaType === 'CIRCLE') { + circle = new naver.maps.Circle({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + center: paths[0], + radius: areas.bufferZone, + map: map, + clickable: true + }); + setCircle(circle); + } + } } return ( diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index 992c423..0d457e7 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -30,7 +30,7 @@ const FlightPlanAreaContainer = ({handleModal}) => { } useEffect(() => { - dispatch(drawTypeChangeAction('RESET')); + dispatch(drawTypeChangeAction('')); getAirAreaList(); }, []); diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js index dccf0c4..30350d8 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -16,13 +16,13 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => { handleModal({ type: 'area', isOpne: false}); } - const handleSave = () => { + const handleSave = () => { const resultAreaDetail = areaDetail.map((area, i) => { return { ...area, coordList : areaDetail[0].coordList } - }); + }); dispatch(Actions.AREA_DETAIL_LIST_SAVE(resultAreaDetail)); @@ -52,7 +52,9 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => { useEffect(() => { // detail의 area 정보가 존재하면 detail 정보로 매핑 if(detail.areaList[0].planAreaSno !== 0) { - setAreaDetail(detail.areaList); + setAreaDetail(detail.areaList); + + dispatch(Actions.AREA_DETAIL_LIST_SAVE(detail.areaList)); } }, []) diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index d1e9ecb..107559b 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -99,23 +99,31 @@ const FlightPlanDetailContainer = () => { useEffect(() => { if(areaList !== undefined) { - const detailAreaList = detailData.areaList.concat(); - const area = Object.assign({}, initFlightBas['area']); + // const detailAreaList = detailData.areaList.concat(); + // const area = Object.assign({}, initFlightBas['area']); - area.bufferZone = areaList[0].bufferZone; - area.fltElev = areaList[0].fltElev; - area.fltMethod = areaList[0].fltMethod; - area.coordList = areaList[0].coordList; - detailAreaList.forEach((a, i) => { - detailAreaList[i] = area; + const detailAreaList = areaList.map((area) => { + return { + ...area + } + }) + + // area.bufferZone = areaList[0].bufferZone; + // area.fltElev = areaList[0].fltElev; + // area.fltMethod = areaList[0].fltMethod; + // area.areaType = areaList[0] + // area.coordList = areaList[0].coordList; + + // detailAreaList.forEach((a, i) => { + // detailAreaList[i] = area; - // if(a.planAreaSno === 0) { // create - // areaList[i] = area; - // } else { // update + // // if(a.planAreaSno === 0) { // create + // // areaList[i] = area; + // // } else { // update - // } - }); + // // } + // }); setDetailData(prevState => { return { diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index deab581..0aafdd5 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -86,6 +86,7 @@ export const flightReducer = createReducer(in .handleAction(Actions.AREA_DETAIL_LIST_SAVE, (state, action) => produce(state, draft => { const data = action.payload; - draft.areaList = data; + draft.areaList = data; + draft.areaCoordList = data; }) )