diff --git a/src/components/map/mapbox/dron/DronPlan.js b/src/components/map/mapbox/dron/DronPlan.js index 1988f60..e296b49 100644 --- a/src/components/map/mapbox/dron/DronPlan.js +++ b/src/components/map/mapbox/dron/DronPlan.js @@ -1,5 +1,5 @@ -import React, { useEffect, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; import { handlerGetCircleCoord } from '../../../../utility/DrawUtil'; export const dummyPolyline = [ @@ -404,7 +404,7 @@ export const dummyCircle = [ } ]; -export default function DronPlan({ map, planGeo }) { +export default function DronPlan({ map, planGeo, setPlanGeo }) { const { controlGpList } = useSelector(state => state.controlGpState); const { controlGpFltPlanList } = useSelector( state => state.controlGpFltPlanState @@ -439,6 +439,13 @@ export default function DronPlan({ map, planGeo }) { } }, [controlGpList]); + const updatePlanGeo = feature => { + setPlanGeo(prev => ({ + ...prev, + features: [...prev.features, feature] + })); + }; + const planInit = () => { // const planList = dummyPolyline; // const planList = dummyPolygon; @@ -486,7 +493,7 @@ export default function DronPlan({ map, planGeo }) { }, properties: { id: 'circle', idntfNum: idntfNum } }; - planGeo.features.push(circle); + updatePlanGeo(circle); setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: circle }]); } }; @@ -501,9 +508,8 @@ export default function DronPlan({ map, planGeo }) { }, properties: { id: 'polygon', idntfNum: idntfNum } }; - planGeo.features.push(polygon); + updatePlanGeo(polygon); setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: polygon }]); - // setAreaArr(prev => [...prev, {idntfNum: idntfNum, polygon: polygon}]); } }; @@ -517,9 +523,8 @@ export default function DronPlan({ map, planGeo }) { }, properties: { id: 'line', idntfNum: idntfNum } }; - planGeo.features.push(line); + updatePlanGeo(line); setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: line }]); - // setAreaArr(prev => [...prev, { idntfNum: idntfNum, line: line }]); } if (bufferList && bufferList.length > 1) { @@ -537,9 +542,8 @@ export default function DronPlan({ map, planGeo }) { }, properties: { id: 'buffer', idntfNum: idntfNum } }; - planGeo.features.push(buffer); + updatePlanGeo(buffer); setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: buffer }]); - // setBufferArr(prev => [...prev, { idntfNum: idntfNum, buffer: buffer }]); } }; @@ -550,46 +554,19 @@ export default function DronPlan({ map, planGeo }) { .map(obj => obj.obj); clearObj.map(obj => { - planGeo.features = planGeo.features.filter( - geo => geo.properties.idntfNum === obj.properties.idntfNum + const feature = planGeo.features.filter( + geo => geo.properties.idntfNum !== obj.properties.idntfNum ); + setPlanGeo(prev => ({ + ...prev, + features: feature + })); }); 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); };