diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index db76c47a..6a87128b 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -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 ? (
<>
-
+
{/*
*/}
diff --git a/src/components/map/mapbox/dron/DronPlan.js b/src/components/map/mapbox/dron/DronPlan.js
index c2b692fd..b9639d87 100644
--- a/src/components/map/mapbox/dron/DronPlan.js
+++ b/src/components/map/mapbox/dron/DronPlan.js
@@ -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;
}