From ca7d7fac2e38da2b53cc932f49faa9db688fba7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Wed, 15 Nov 2023 14:54:18 +0900 Subject: [PATCH] =?UTF-8?q?=EB=93=9C=EB=A1=A0=EA=B5=90=ED=86=B5=EA=B4=80?= =?UTF-8?q?=EC=A0=9C=20=EB=B9=84=ED=96=89=EC=98=88=EC=83=81=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=ED=91=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/mapbox/MapBoxMap.js | 44 ++- src/components/map/mapbox/dron/DronPlan.js | 406 +++++++++++++++------ 2 files changed, 345 insertions(+), 105 deletions(-) diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index db76c47..6a87128 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 c2b692f..b9639d8 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; }