feat/ 비행구역 요청반경 라인으로 표출

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');

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([]);