From 7d6ef9dfc8ffd1d3879afe5e88f63ce9b0f23c8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junh_eee@naver.com>
Date: Tue, 14 Nov 2023 17:22:06 +0900
Subject: [PATCH] =?UTF-8?q?=EB=93=9C=EB=A1=A0=EA=B5=90=ED=86=B5=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=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=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1(=EC=9E=91=EC=97=85=EC=A0=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/mapbox/MapBoxMap.js     |   2 +
 src/components/map/mapbox/dron/DronPlan.js | 130 +++++++++++++++++++++
 2 files changed, 132 insertions(+)
 create mode 100644 src/components/map/mapbox/dron/DronPlan.js

diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 794920a..db76c47 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -26,6 +26,7 @@ import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json';
 // import SensorZone from './sensor/SensorZone';
 
 import { mapInitAction } from '../../../modules/control/map/actions/controlMapActions';
+import DronPlan from './dron/DronPlan';
 
 const uamPosition = {
   type: 'FeatureCollection',
@@ -752,6 +753,7 @@ export default function MapBoxMap() {
       {isMapLoaded && mapObject ? (
         <>
           <DronMarker map={mapObject} mapboxgl={mapboxgl} />
+          <DronPlan map={mapObject} mapboxgl={mapboxgl} />
 
           {/* <DronPlan map={mapObject} naver={naver} />
           <NewDronPlan map={mapObject} naver={naver} /> */}
diff --git a/src/components/map/mapbox/dron/DronPlan.js b/src/components/map/mapbox/dron/DronPlan.js
new file mode 100644
index 0000000..c2b692f
--- /dev/null
+++ b/src/components/map/mapbox/dron/DronPlan.js
@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+export default function DronPlan({ map, mapboxgl }) {
+  const dispatch = useDispatch();
+
+  const { controlGpList } = useSelector(state => state.controlGpState);
+  const { controlGpFltPlanList } = useSelector(
+    state => state.controlGpFltPlanState
+  );
+
+  const [areaArr, setAreaArr] = useState([]);
+  const [bufferArr, setBufferArr] = useState([]);
+  const [controlIdArr, setControlIdArr] = useState([]);
+
+  useEffect(() => {
+    if (controlGpFltPlanList) {
+      //   console.log(controlGpFltPlanList, 'planList');
+      //   planInit();
+    }
+  }, [controlGpFltPlanList]);
+
+  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);
+      //   }
+    }
+  }, [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());
+  //     }
+  //   };
+
+  return null;
+}