diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 6a87128..bdd77b9 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -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); }); diff --git a/src/components/map/mapbox/dron/DronPlan.js b/src/components/map/mapbox/dron/DronPlan.js index b9639d8..80dd2ee 100644 --- a/src/components/map/mapbox/dron/DronPlan.js +++ b/src/components/map/mapbox/dron/DronPlan.js @@ -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;