이준희
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