From c56cabe24c86119d1e26a6622a8da71c9b0186de 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, 13 Aug 2024 16:19:59 +0900
Subject: [PATCH] =?UTF-8?q?feat/=20=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=EB=B0=98=EA=B2=BD=20=EB=9D=BC=EC=9D=B8?=
 =?UTF-8?q?=EC=9C=BC=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

---
 .../flight/ControlApprovalsContainer.js       | 30 +++++++++++++++++--
 .../flight/OperationApprovalsContainer.js     | 30 +++++++++++++++++--
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/containers/flight/ControlApprovalsContainer.js b/src/containers/flight/ControlApprovalsContainer.js
index 6cd02d98..d35dee3c 100644
--- a/src/containers/flight/ControlApprovalsContainer.js
+++ b/src/containers/flight/ControlApprovalsContainer.js
@@ -336,9 +336,25 @@ export default function ControlApprovalsContainer({ mode }) {
       };
       mapInstance.addLayer(centerPoint);
 
+      const reqRadiusCircle = {
+        id: 'polyline',
+        type: 'line',
+        source: 'controlLayer',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#8a1c05',
+          'line-width': 1
+        },
+        filter: ['in', ['get', 'id'], ['literal', ['LINE', 'outline']]]
+      };
+      mapInstance.addLayer(reqRadiusCircle);
+
       mapInstance.addLayer(flightlayerBuffer('controlLayer'));
       mapInstance.addLayer(flightlayerPolygon('controlLayer'));
-      mapInstance.addLayer(flightlayerPolyline('controlLayer'));
+      // mapInstance.addLayer(flightlayerPolyline('controlLayer'));
     }
 
     dispatch(clientSetIsMapLoading(true));
@@ -366,12 +382,22 @@ export default function ControlApprovalsContainer({ mode }) {
       const circle = InitFeature('Polygon', 'CIRCLE');
       circle.properties.center = [areas.lon, areas.lat];
       circle.geometry.coordinates = circleCoords;
+      controlLayer.features.push(circle);
 
       const point = InitFeature('Point', 'POINT');
       point.geometry.coordinates = [areas.lon, areas.lat];
       controlLayer.features.push(point);
 
-      controlLayer.features.push(circle);
+      // 요청반경 도식화
+      if (areas?.reqRadius) {
+        const reqCoords = handlerGetCircleCoord(
+          [areas.lon, areas.lat],
+          areas.reqRadius
+        );
+        const reqCircleLine = InitFeature('LineString', 'LINE');
+        reqCircleLine.geometry.coordinates = reqCoords[0];
+        controlLayer.features.push(reqCircleLine);
+      }
 
       fitZoomPaths = circleCoords[0];
       handlerFitBounds(mapObject, fitZoomPaths, 400, 'CIRCLE', 'flight');
diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js
index 5f47fd5e..d9581219 100644
--- a/src/containers/flight/OperationApprovalsContainer.js
+++ b/src/containers/flight/OperationApprovalsContainer.js
@@ -394,9 +394,25 @@ export default function OperationApprovalsContainer({ mode }) {
       };
       mapInstance.addLayer(centerPoint);
 
+      const reqRadiusCircle = {
+        id: 'polyline',
+        type: 'line',
+        source: 'operationLayer',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#8a1c05',
+          'line-width': 1
+        },
+        filter: ['in', ['get', 'id'], ['literal', ['LINE', 'outline']]]
+      };
+      mapInstance.addLayer(reqRadiusCircle);
+
       mapInstance.addLayer(flightlayerBuffer('operationLayer'));
       mapInstance.addLayer(flightlayerPolygon('operationLayer'));
-      mapInstance.addLayer(flightlayerPolyline('operationLayer'));
+      // mapInstance.addLayer(flightlayerPolyline('operationLayer'));
     }
 
     dispatch(clientSetIsMapLoading(true));
@@ -431,12 +447,22 @@ export default function OperationApprovalsContainer({ mode }) {
         circle.properties.key = area?.planAreaSno;
         circle.properties.addr = area.addr;
         circle.geometry.coordinates = circleCoords;
+        operationLayer.features.push(circle);
 
         const point = InitFeature('Point', 'POINT');
         point.geometry.coordinates = [area.lon, area.lat];
         operationLayer.features.push(point);
 
-        operationLayer.features.push(circle);
+        // 요청반경 도식화
+        if (area?.reqRadius) {
+          const reqCoords = handlerGetCircleCoord(
+            [area.lon, area.lat],
+            area.reqRadius
+          );
+          const reqCircleLine = InitFeature('LineString', 'LINE');
+          reqCircleLine.geometry.coordinates = reqCoords[0];
+          operationLayer.features.push(reqCircleLine);
+        }
       });
 
       const features = turf.featureCollection([]);