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

드론교통관제 비행예상경로 표출

pull/2/head
junh_eee(이준희) 10 months ago
parent
f82b3fe710
commit
ca7d7fac2e
2 changed files with 345 additions and 105 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. 44
      src/components/map/mapbox/MapBoxMap.js
  2. 406
      src/components/map/mapbox/dron/DronPlan.js

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

@ -269,6 +269,11 @@ export default function MapBoxMap() {
const dispatch = useDispatch();
const mapControl = useSelector(state => state.controlMapReducer);
const planGeo = {
type: 'FeatureCollection',
features: []
};
useLayoutEffect(() => {
mapBoxMapInit();
}, []);
@ -684,6 +689,43 @@ export default function MapBoxMap() {
// 공역 색상 및 공역 표출 정보에 따른 노출
handlerCreateAirSpace(map);
// 비행경로 표출
map.addSource('plan', {
type: 'geojson',
data: planGeo
});
map.addLayer({
id: 'line',
type: 'line',
source: 'plan',
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': '#283046',
'line-width': 2
},
filter: ['==', ['get', 'id'], 'line']
});
map.addLayer({
id: 'buffer',
type: 'line',
source: 'plan',
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': '#283046',
'line-width': 1,
'line-dasharray': [5, 5]
},
filter: ['==', ['get', 'id'], 'buffer']
});
setMapLoaded(true);
});
setMapObject(map);
@ -753,7 +795,7 @@ export default function MapBoxMap() {
{isMapLoaded && mapObject ? (
<>
<DronMarker map={mapObject} mapboxgl={mapboxgl} />
<DronPlan map={mapObject} mapboxgl={mapboxgl} />
<DronPlan map={mapObject} planGeo={planGeo} />
{/* <DronPlan map={mapObject} naver={naver} />
<NewDronPlan map={mapObject} naver={naver} /> */}

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

@ -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;
}

Write Preview
Loading…
Cancel
Save