|
|
|
@ -1,9 +1,201 @@
|
|
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
|
|
export default function DronPlan({ map, mapboxgl }) { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
export const dummyData = [ |
|
|
|
|
{ |
|
|
|
|
planSno: 242, |
|
|
|
|
groupId: 'C807F9', |
|
|
|
|
cstmrSno: 2, |
|
|
|
|
memberName: '팔네트웍스', |
|
|
|
|
email: 'dhji@palnet.co.kr', |
|
|
|
|
hpno: '01082504456', |
|
|
|
|
clncd: '+82', |
|
|
|
|
schFltStDt: '2023-11-15 10:00:00', |
|
|
|
|
schFltEndDt: '2023-11-15 16:31:18', |
|
|
|
|
fltPurpose: 'EDUCATION_FLIGHT', |
|
|
|
|
aprvlYn: 'Y', |
|
|
|
|
delYn: 'N', |
|
|
|
|
createUserId: 'palnet', |
|
|
|
|
createDt: '2023-11-15 10:00:00', |
|
|
|
|
updateUserId: 'palnet', |
|
|
|
|
updateDt: '2023-11-15 10:00:00', |
|
|
|
|
docState: 'R', |
|
|
|
|
areaList: [ |
|
|
|
|
{ |
|
|
|
|
planAreaSno: 242, |
|
|
|
|
planSno: 242, |
|
|
|
|
areaType: 'LINE', |
|
|
|
|
fltAreaAddr: '인천광역시 계양구 봉오대로463번길 26', |
|
|
|
|
bufferZone: 100, |
|
|
|
|
fltElev: '100', |
|
|
|
|
createUserId: 'palnet', |
|
|
|
|
createDt: '2023-11-14 15:57:21', |
|
|
|
|
updateUserId: 'palnet', |
|
|
|
|
updateDt: '2023-11-14 15:57:21', |
|
|
|
|
docState: 'R', |
|
|
|
|
coordList: [ |
|
|
|
|
{ |
|
|
|
|
planAreaCoordSno: 515, |
|
|
|
|
planAreaSno: 242, |
|
|
|
|
lat: 37.530121373976954, |
|
|
|
|
lon: 126.69937537668989, |
|
|
|
|
createUserId: 'palnet', |
|
|
|
|
createDt: '2023-11-14 15:57:21', |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planAreaCoordSno: 516, |
|
|
|
|
planAreaSno: 242, |
|
|
|
|
lat: 37.53072487369214, |
|
|
|
|
lon: 126.70586394488811, |
|
|
|
|
createUserId: 'palnet', |
|
|
|
|
createDt: '2023-11-14 15:57:21', |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
planAreaCoordSno: 517, |
|
|
|
|
planAreaSno: 242, |
|
|
|
|
lat: 37.52748497586097, |
|
|
|
|
lon: 126.70594405066777, |
|
|
|
|
createUserId: 'palnet', |
|
|
|
|
createDt: '2023-11-14 15:57:21', |
|
|
|
|
docState: 'R' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
bufferCoordList: [ |
|
|
|
|
{ |
|
|
|
|
lat: 37.5316197886034, |
|
|
|
|
lon: 126.70573274477093, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.531625304714495, |
|
|
|
|
lon: 126.70590392813509, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.53161017252108, |
|
|
|
|
lon: 126.70607419460082, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.531574739035676, |
|
|
|
|
lon: 126.70623963959872, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.53151981682155, |
|
|
|
|
lon: 126.70639646913716, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.53144666535704, |
|
|
|
|
lon: 126.70654108681464, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.531356962150426, |
|
|
|
|
lon: 126.70667017629863, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.53125276426794, |
|
|
|
|
lon: 126.70678077737894, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.53113646115761, |
|
|
|
|
lon: 126.70687035385097, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.53101071985107, |
|
|
|
|
lon: 126.7069368516722, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.53087842380056, |
|
|
|
|
lon: 126.70697874605814, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.530742606753975, |
|
|
|
|
lon: 126.70699507643907, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.527502707958675, |
|
|
|
|
lon: 126.70707513332411, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.526601887803295, |
|
|
|
|
lon: 126.70709739090397, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.526566413313844, |
|
|
|
|
lon: 126.70483525338567, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.52971486141971, |
|
|
|
|
lon: 126.70475736339164, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.529226466217224, |
|
|
|
|
lon: 126.69950664996875, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.52912191557935, |
|
|
|
|
lon: 126.69838296584224, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.53091172822204, |
|
|
|
|
lon: 126.69812038962549, |
|
|
|
|
docState: 'R' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
lat: 37.5316197886034, |
|
|
|
|
lon: 126.70573274477093, |
|
|
|
|
docState: 'R' |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
arcrftList: [ |
|
|
|
|
{ |
|
|
|
|
arcrftSno: 1, |
|
|
|
|
idntfNum: 'PA0001', |
|
|
|
|
prdctNum: 'PAV_001_PPAL20230914', |
|
|
|
|
arcrftTypeCd: '01', |
|
|
|
|
arcrftModelNm: 'PAV_001', |
|
|
|
|
prdctCmpnNm: 'PalNetworks', |
|
|
|
|
arcrftLngth: 0, |
|
|
|
|
arcrftWdth: 0, |
|
|
|
|
arcrftHght: 0, |
|
|
|
|
arcrftWght: 0, |
|
|
|
|
wghtTypeCd: '250G+2KG-', |
|
|
|
|
takeoffWght: 0, |
|
|
|
|
useYn: 'Y', |
|
|
|
|
cameraYn: 'N', |
|
|
|
|
insrncYn: 'Y', |
|
|
|
|
createUserId: 'palnet', |
|
|
|
|
createDt: '2023-09-14 17:32:59', |
|
|
|
|
updateUserId: 'palnet', |
|
|
|
|
updateDt: '2023-09-14 17:32:59', |
|
|
|
|
docState: 'R' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
corpRegYn: 'N', |
|
|
|
|
serviceType: 'PAV-KAC' |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
export default function DronPlan({ map, planGeo }) { |
|
|
|
|
const { controlGpList } = useSelector(state => state.controlGpState); |
|
|
|
|
const { controlGpFltPlanList } = useSelector( |
|
|
|
|
state => state.controlGpFltPlanState |
|
|
|
@ -15,116 +207,122 @@ export default function DronPlan({ map, mapboxgl }) {
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (controlGpFltPlanList) { |
|
|
|
|
// console.log(controlGpFltPlanList, 'planList');
|
|
|
|
|
// planInit();
|
|
|
|
|
console.log(controlGpFltPlanList, 'planList'); |
|
|
|
|
planInit(); |
|
|
|
|
} |
|
|
|
|
}, [controlGpFltPlanList]); |
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// planInit();
|
|
|
|
|
// }, []);
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (controlGpList) { |
|
|
|
|
// console.log(controlGpList, 'gplist');
|
|
|
|
|
// 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);
|
|
|
|
|
// }
|
|
|
|
|
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: '#8a1c05',
|
|
|
|
|
// 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());
|
|
|
|
|
// }
|
|
|
|
|
// };
|
|
|
|
|
const planInit = () => { |
|
|
|
|
// const planList = dummyData;
|
|
|
|
|
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 = [coord.lon, coord.lat]; |
|
|
|
|
paths.push(path); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const idntfNum = plan.arcrftList[0].idntfNum; |
|
|
|
|
if (areaType === 'LINE') { |
|
|
|
|
create(paths, bufferList, idntfNum); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const create = (paths, bufferList, idntfNum) => { |
|
|
|
|
if (paths && paths.length > 1) { |
|
|
|
|
const line = { |
|
|
|
|
type: 'Feature', |
|
|
|
|
geometry: { |
|
|
|
|
type: 'LineString', |
|
|
|
|
coordinates: paths |
|
|
|
|
}, |
|
|
|
|
properties: { id: 'line', idntfNum: idntfNum } |
|
|
|
|
}; |
|
|
|
|
planGeo.features.push(line); |
|
|
|
|
setAreaArr(prev => [...prev, { idntfNum: idntfNum, line: line }]); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (bufferList && bufferList.length > 1) { |
|
|
|
|
const paths = []; |
|
|
|
|
bufferList.forEach(buffer => { |
|
|
|
|
const path = [buffer.lon, buffer.lat]; |
|
|
|
|
paths.push(path); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const buffer = { |
|
|
|
|
type: 'Feature', |
|
|
|
|
geometry: { |
|
|
|
|
type: 'LineString', |
|
|
|
|
coordinates: paths |
|
|
|
|
}, |
|
|
|
|
properties: { id: 'buffer', idntfNum: idntfNum } |
|
|
|
|
}; |
|
|
|
|
planGeo.features.push(buffer); |
|
|
|
|
setBufferArr(prev => [...prev, { idntfNum: idntfNum, buffer: buffer }]); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
map.getSource('plan').setData(planGeo); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
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.buffer); |
|
|
|
|
|
|
|
|
|
clearArea.map(area => { |
|
|
|
|
//지도에서 삭제
|
|
|
|
|
planGeo.features = planGeo.features.filter( |
|
|
|
|
geo => geo.properties.idntfNum === area.properties.idntfNum |
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
clearBuffer.map(buffer => { |
|
|
|
|
//지도에서 삭제
|
|
|
|
|
planGeo.features = planGeo.features.filter( |
|
|
|
|
geo => geo.properties.idntfNum === buffer.properties.idntfNum |
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const saveArea = areaArr.filter(area => !diffArr.includes(area.idntfNum)); |
|
|
|
|
const saveBuffer = bufferArr.filter( |
|
|
|
|
buffer => !diffArr.includes(buffer.idntfNum) |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
setAreaArr(saveArea); |
|
|
|
|
setBufferArr(saveBuffer); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|