pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

드론교통관리 비행예상경로 추가구현(polygon, circle)

pull/2/head
junh_eee(이준희) 10 months ago
parent
01ae2faaba
commit
e358a216c3
2 changed files with 324 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/components/map/mapbox/MapBoxMap.js
  2. 353
      src/components/map/mapbox/dron/DronPlan.js

14
src/components/map/mapbox/MapBoxMap.js
Unescape View File

@ -695,7 +695,6 @@ export default function MapBoxMap() {
type: 'geojson',
data: planGeo
});
map.addLayer({
id: 'line',
type: 'line',
@ -725,6 +724,19 @@ export default function MapBoxMap() {
},
filter: ['==', ['get', 'id'], 'buffer']
});
map.addLayer({
id: 'polygon',
type: 'fill',
source: 'plan',
layout: {},
paint: {
'fill-color': '#8a1c05',
'fill-opacity': 0.5,
'fill-outline-color': '#000000'
},
filter: ['in', '$type', 'Polygon']
// filter: ['==', ['get', 'id'], ['polygon', 'circle']]
});
setMapLoaded(true);
});

353
src/components/map/mapbox/dron/DronPlan.js
Unescape View File

@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { handlerGetCircleCoord } from '../../../../utility/DrawUtil';
export const dummyData = [
export const dummyPolyline = [
{
planSno: 242,
groupId: 'C807F9',
@ -194,27 +195,236 @@ export const dummyData = [
serviceType: 'PAV-KAC'
}
];
export const dummyPolygon = [
{
planSno: 244,
groupId: 'C807F9',
cstmrSno: 2,
memberName: '팔네트웍스',
email: 'dhji@palnet.co.kr',
hpno: '01082504456',
clncd: '+82',
schFltStDt: '2023-11-15 16:26:13',
schFltEndDt: '2023-11-15 18:21:13',
fltPurpose: 'TRAFFIC_MANAGEMENT',
fltType: 'COMMERCIAL',
fltTypeNm: '상업용',
aprvlYn: 'Y',
createUserId: 'palnet',
createDt: '2023-11-15 16:22:46',
updateUserId: 'palnet',
updateDt: '2023-11-15 16:22:46',
serviceType: 'PAV-KAC',
corpRegYn: 'N',
pdfUrl: '/api/comn/file/download/387',
areaList: [
{
planAreaSno: 244,
planSno: 244,
areaType: 'POLYGON',
fltAreaAddr: '인천광역시 계양구 26',
bufferZone: 0,
fltElev: '100',
createUserId: 'palnet',
createDt: '2023-11-15 16:22:46',
updateUserId: 'palnet',
updateDt: '2023-11-15 16:22:46',
docState: 'R',
coordList: [
{
planAreaCoordSno: 522,
planAreaSno: 244,
lat: 37.575642815639966,
lon: 126.7053377657183,
createUserId: 'palnet',
createDt: '2023-11-15 16:22:46',
docState: 'R'
},
{
planAreaCoordSno: 523,
planAreaSno: 244,
lat: 37.56753805633005,
lon: 126.7033921798162,
createUserId: 'palnet',
createDt: '2023-11-15 16:22:46',
docState: 'R'
},
{
planAreaCoordSno: 524,
planAreaSno: 244,
lat: 37.56832705395003,
lon: 126.71429651010209,
createUserId: 'palnet',
createDt: '2023-11-15 16:22:46',
docState: 'R'
},
{
planAreaCoordSno: 525,
planAreaSno: 244,
lat: 37.57553523611571,
lon: 126.71606111127,
createUserId: 'palnet',
createDt: '2023-11-15 16:22:46',
docState: 'R'
}
]
}
],
arcrftList: [
{
planArcrftSno: 240,
planSno: 244,
arcrftSno: 0,
idntfNum: 'PA0001',
arcrftTypeCd: 'UNMANNED_AIRCRAFT',
arcrftLngth: 0,
arcrftWdth: 0,
arcrftHght: 0,
arcrftWght: 0,
takeoffWght: 0,
createUserId: 'palnet',
createDt: '2023-11-15 16:22:46',
updateUserId: 'palnet',
updateDt: '2023-11-15 16:22:46',
docState: 'R',
acrftInsuranceYn: 'N',
arcrftWghtCd: 'W250G_LOE'
}
],
pilotList: [
{
planPilotSno: 242,
planSno: 244,
cstmrSno: 2,
groupNm: 'KAC',
memberName: '팔네트웍스',
email: 'dhji@palnet.co.kr',
hpno: '01082504456',
clncd: '+82',
createUserId: 'palnet',
createDt: '2023-11-15 16:22:46',
updateUserId: 'palnet',
updateDt: '2023-11-15 16:22:46',
docState: 'R'
}
],
arcrftWght: '최대이륙중량 250g 이하',
elev: '100'
}
];
export const dummyCircle = [
{
planSno: 239,
groupId: 'C807F9',
cstmrSno: 2,
memberName: '팔네트웍스',
email: 'dhji@palnet.co.kr',
hpno: '01082504456',
clncd: '+82',
schFltStDt: '2023-11-14 12:01:00',
schFltEndDt: '2023-11-14 13:56:00',
fltPurpose: 'TRAFFIC_MANAGEMENT',
fltType: 'COMMERCIAL',
fltTypeNm: '상업용',
aprvlYn: 'Y',
createUserId: 'palnet',
createDt: '2023-11-13 11:59:10',
updateUserId: 'palnet',
updateDt: '2023-11-13 11:59:13',
serviceType: 'PAV-KAC',
corpRegYn: 'N',
pdfUrl: '/api/comn/file/download/382',
areaList: [
{
planAreaSno: 239,
planSno: 239,
areaType: 'CIRCLE',
fltMethod: 'CLOCK_FLIGHT',
fltAreaAddr: '인천광역시 부평구 401',
bufferZone: 100,
fltElev: '12',
createUserId: 'palnet',
createDt: '2023-11-13 11:59:10',
updateUserId: 'palnet',
updateDt: '2023-11-13 11:59:10',
docState: 'R',
coordList: [
{
planAreaCoordSno: 507,
planAreaSno: 239,
lat: 37.52165750816398,
lon: 126.71042734097875,
createUserId: 'palnet',
createDt: '2023-11-13 11:59:10',
docState: 'R'
}
]
}
],
arcrftList: [
{
planArcrftSno: 235,
planSno: 239,
arcrftSno: 0,
idntfNum: 'PA0001',
arcrftTypeCd: 'UNMANNED_AIRCRAFT',
arcrftLngth: 0,
arcrftWdth: 0,
arcrftHght: 0,
arcrftWght: 0,
takeoffWght: 0,
createUserId: 'palnet',
createDt: '2023-11-13 11:59:10',
updateUserId: 'palnet',
updateDt: '2023-11-13 11:59:10',
docState: 'R',
acrftInsuranceYn: 'N',
arcrftWghtCd: 'W250G_LOE'
}
],
pilotList: [
{
planPilotSno: 237,
planSno: 239,
cstmrSno: 2,
groupNm: 'KAC',
memberName: '팔네트웍스',
email: 'dhji@palnet.co.kr',
hpno: '01082504456',
clncd: '+82',
createUserId: 'palnet',
createDt: '2023-11-13 11:59:10',
updateUserId: 'palnet',
updateDt: '2023-11-13 11:59:10',
docState: 'R'
}
],
elev: '12',
arcrftWght: '최대이륙중량 250g 이하'
}
];
export default function DronPlan({ map, planGeo }) {
const { controlGpList } = useSelector(state => state.controlGpState);
const { controlGpFltPlanList } = useSelector(
state => state.controlGpFltPlanState
);
const [objArr, setObjArr] = useState([]);
const [areaArr, setAreaArr] = useState([]);
const [bufferArr, setBufferArr] = useState([]);
const [controlIdArr, setControlIdArr] = useState([]);
useEffect(() => {
if (controlGpFltPlanList) {
console.log(controlGpFltPlanList, 'planList');
planInit();
}
}, [controlGpFltPlanList]);
// useEffect(() => {
// planInit();
// }, []);
// if (controlGpFltPlanList) {
// console.log(controlGpFltPlanList, 'planList');
// planInit();
// }
// }, [controlGpFltPlanList]);
useEffect(() => {
planInit();
}, []);
useEffect(() => {
if (controlGpList) {
@ -230,8 +440,11 @@ export default function DronPlan({ map, planGeo }) {
}, [controlGpList]);
const planInit = () => {
// const planList = dummyData;
const planList = controlGpFltPlanList;
// const planList = dummyPolyline;
// const planList = dummyPolygon;
const planList = dummyCircle;
// const planList = controlGpFltPlanList;
planList.forEach(plan => {
const areaList = plan.areaList;
@ -249,13 +462,52 @@ export default function DronPlan({ map, planGeo }) {
const idntfNum = plan.arcrftList[0].idntfNum;
if (areaType === 'LINE') {
create(paths, bufferList, idntfNum);
createWayPoint(paths, bufferList, idntfNum);
} else if (areaType === 'POLYGON') {
createPolygon([paths], idntfNum);
} else if (areaType === 'CIRCLE') {
createCircle(paths, bufferZone, idntfNum);
}
});
});
map?.getSource('plan').setData(planGeo);
};
const createCircle = (paths, bufferZone, idntfNum) => {
const center = [paths[0][0], paths[0][1]];
const circlePaths = handlerGetCircleCoord(center, bufferZone);
if (paths && paths.length > 0) {
const circle = {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: circlePaths
},
properties: { id: 'circle', idntfNum: idntfNum }
};
planGeo.features.push(circle);
setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: circle }]);
}
};
const createPolygon = (paths, idntfNum) => {
if (paths && paths[0].length > 2) {
const polygon = {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: paths
},
properties: { id: 'polygon', idntfNum: idntfNum }
};
planGeo.features.push(polygon);
setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: polygon }]);
// setAreaArr(prev => [...prev, {idntfNum: idntfNum, polygon: polygon}]);
}
};
const create = (paths, bufferList, idntfNum) => {
const createWayPoint = (paths, bufferList, idntfNum) => {
if (paths && paths.length > 1) {
const line = {
type: 'Feature',
@ -266,7 +518,8 @@ export default function DronPlan({ map, planGeo }) {
properties: { id: 'line', idntfNum: idntfNum }
};
planGeo.features.push(line);
setAreaArr(prev => [...prev, { idntfNum: idntfNum, line: line }]);
setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: line }]);
// setAreaArr(prev => [...prev, { idntfNum: idntfNum, line: line }]);
}
if (bufferList && bufferList.length > 1) {
@ -285,43 +538,59 @@ export default function DronPlan({ map, planGeo }) {
properties: { id: 'buffer', idntfNum: idntfNum }
};
planGeo.features.push(buffer);
setBufferArr(prev => [...prev, { idntfNum: idntfNum, buffer: buffer }]);
setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: 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);
if (objArr) {
const clearObj = objArr
.filter(obj => diffArr.includes(obj.idntfNum))
.map(obj => obj.obj);
clearArea.map(area => {
//지도에서 삭제
clearObj.map(obj => {
planGeo.features = planGeo.features.filter(
geo => geo.properties.idntfNum === area.properties.idntfNum
geo => geo.properties.idntfNum === obj.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);
const saveObj = objArr.filter(obj => !diffArr.includes(obj.idntfNum));
setObjArr(saveObj);
}
// 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);
// }
map?.getSource('plan').setData(planGeo);
};
return null;

Write Preview
Loading…
Cancel
Save