이준희
1 year ago
6 changed files with 219 additions and 8 deletions
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,66 @@ |
|||||||
|
import { object } from 'prop-types'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import { controlGpHisAction } from '../../../../modules/control/gp'; |
||||||
|
|
||||||
|
export const NewDronHistory = props => { |
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
|
const { controlGpHistory } = useSelector(state => state.controlGpHisState); |
||||||
|
const { controlGpList } = useSelector(state => state.controlGpState); |
||||||
|
|
||||||
|
// const { objectId, isClickObject } = useSelector(
|
||||||
|
// state => state.controlMapReducer
|
||||||
|
// );
|
||||||
|
|
||||||
|
// const [arrHistory, setArrHistory] = useState([]);
|
||||||
|
|
||||||
|
let naver = props.naver; |
||||||
|
let polyline = []; |
||||||
|
let polylinePath = [[]]; |
||||||
|
|
||||||
|
const [arrHistory, setArrHistory] = useState([]); |
||||||
|
const [controlIdArr, setControlIdArr] = useState([]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (controlGpList) { |
||||||
|
const listArr = controlGpList.map(gpList => { |
||||||
|
return gpList.objectId; |
||||||
|
}); |
||||||
|
if (controlIdArr != listArr) { |
||||||
|
setControlIdArr(listArr); |
||||||
|
const diff = controlIdArr.filter(list => !listArr.includes(list)); |
||||||
|
if (diff.length > 0) console.log(diff); |
||||||
|
} |
||||||
|
// console.log(controlGpList, '>>>>');
|
||||||
|
} |
||||||
|
}, [controlGpList]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (controlGpHistory) { |
||||||
|
// const tt = controlGpHistory[0].objectId;
|
||||||
|
// console.log(tt);
|
||||||
|
historyInit(); |
||||||
|
} |
||||||
|
}, [controlGpHistory]); |
||||||
|
|
||||||
|
const historyInit = () => { |
||||||
|
const hisList = controlGpHistory; |
||||||
|
const line = new naver.maps.Polyline({ |
||||||
|
clickable: false, |
||||||
|
strokeColor: '#ff4961', |
||||||
|
strokeStyle: 'solid', |
||||||
|
strokeOpacity: 5, |
||||||
|
strokeWeight: 1.5 |
||||||
|
}); |
||||||
|
hisList.map(item => { |
||||||
|
if (item.lat > 0 && item.lng > 0) { |
||||||
|
const position = new naver.maps.LatLng(item.lat, item.lng); |
||||||
|
polylinePath.push(position); |
||||||
|
} |
||||||
|
}); |
||||||
|
// line.setPath(poly)
|
||||||
|
}; |
||||||
|
|
||||||
|
return null; |
||||||
|
}; |
@ -0,0 +1,131 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { useSelector, useDispatch } from 'react-redux'; |
||||||
|
import { controlGpFlightPlanInitAction } from '../../../../modules/control/gp'; |
||||||
|
|
||||||
|
const NewDronPlan = ({ naver, map }) => { |
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
|
const { controlGpList } = useSelector(state => state.controlGpState); |
||||||
|
const { controlGpFltPlanList } = useSelector( |
||||||
|
state => state.controlGpFltPlanState |
||||||
|
); |
||||||
|
|
||||||
|
const [areaArr, setAreaArr] = useState([]); |
||||||
|
const [bufferArr, setBufferArr] = useState([]); |
||||||
|
const [controlIdArr, setControlIdArr] = useState([]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (controlGpFltPlanList) { |
||||||
|
planInit(); |
||||||
|
} |
||||||
|
}, [controlGpFltPlanList]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (controlGpList) { |
||||||
|
const listArr = controlGpList.map(gpList => { |
||||||
|
return gpList.objectId; |
||||||
|
}); |
||||||
|
if (controlIdArr != listArr) { |
||||||
|
setControlIdArr(listArr); |
||||||
|
const diff = controlIdArr.filter(list => !listArr.includes(list)); |
||||||
|
if (diff) clear(diff); |
||||||
|
} |
||||||
|
} |
||||||
|
}, [controlGpList]); |
||||||
|
|
||||||
|
const planInit = () => { |
||||||
|
const planList = controlGpFltPlanList; |
||||||
|
planList.forEach(plan => { |
||||||
|
const areaList = plan.areaList; |
||||||
|
|
||||||
|
areaList.forEach(area => { |
||||||
|
const coordList = area.coordList; // 기초 좌표
|
||||||
|
const bufferList = area.bufferCoordList; // 기초 좌표의 버퍼 좌표
|
||||||
|
const bufferZone = area.bufferZone; // 반경 값
|
||||||
|
const areaType = area.areaType; // 도형 타입
|
||||||
|
|
||||||
|
const paths = []; |
||||||
|
coordList.forEach(coord => { |
||||||
|
const path = new naver.maps.LatLng(coord.lat, coord.lon); |
||||||
|
|
||||||
|
paths.push(path); |
||||||
|
}); |
||||||
|
|
||||||
|
const idntfNum = plan.arcrftList[0].idntfNum; |
||||||
|
if (areaType === 'LINE') { |
||||||
|
polyline(paths, bufferList, idntfNum); |
||||||
|
} |
||||||
|
if (areaType === 'POLYGON') { |
||||||
|
//
|
||||||
|
} |
||||||
|
if (areaType === 'CIRCLE') { |
||||||
|
//
|
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const polyline = (paths, bufferList, idntfNum) => { |
||||||
|
if (paths && paths.length > 1) { |
||||||
|
const line = new naver.maps.Polyline({ |
||||||
|
strokeLineCap: 'round', |
||||||
|
strokeLineJoin: 'round', |
||||||
|
strokeColor: '#283046', |
||||||
|
strokeWeight: 1, |
||||||
|
strokeOpacity: 0.5, |
||||||
|
path: paths, |
||||||
|
map: map |
||||||
|
}); |
||||||
|
setAreaArr(prev => [...prev, { idntfNum: idntfNum, line: line }]); |
||||||
|
} |
||||||
|
if (bufferList && bufferList.length > 1) { |
||||||
|
const paths = []; |
||||||
|
bufferList.forEach(buffer => { |
||||||
|
const path = new naver.maps.LatLng(buffer.lat, buffer.lon); |
||||||
|
|
||||||
|
paths.push(path); |
||||||
|
}); |
||||||
|
|
||||||
|
const lineBuffer = new naver.maps.Polygon({ |
||||||
|
strokeColor: '#283046', |
||||||
|
strokeOpacity: 1, |
||||||
|
fillColor: '#7367F0', |
||||||
|
fillOpacity: 0.1, |
||||||
|
paths: paths, |
||||||
|
map: map |
||||||
|
}); |
||||||
|
|
||||||
|
setBufferArr(prev => [ |
||||||
|
...prev, |
||||||
|
{ idntfNum: idntfNum, lineBuffer: lineBuffer } |
||||||
|
]); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const clear = diffArr => { |
||||||
|
if (areaArr) { |
||||||
|
const clearArea = areaArr |
||||||
|
.filter(area => diffArr.includes(area.idntfNum)) |
||||||
|
.map(obj => obj.line); |
||||||
|
|
||||||
|
const clearBuffer = bufferArr |
||||||
|
.filter(buffer => diffArr.includes(buffer.idntfNum)) |
||||||
|
.map(obj => obj.lineBuffer); |
||||||
|
|
||||||
|
clearArea.map(area => area.setMap(null)); |
||||||
|
clearBuffer.map(buffer => buffer.setMap(null)); |
||||||
|
|
||||||
|
const saveArea = areaArr.filter(area => !diffArr.includes(area.idntfNum)); |
||||||
|
const saveBuffer = bufferArr.filter( |
||||||
|
buffer => !diffArr.includes(buffer.idntfNum) |
||||||
|
); |
||||||
|
setAreaArr(saveArea); |
||||||
|
setBufferArr(saveBuffer); |
||||||
|
// dispatch(controlGpFlightPlanInitAction());
|
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return null; |
||||||
|
}; |
||||||
|
|
||||||
|
export default NewDronPlan; |
Loading…
Reference in new issue