데이터블록 위치 변경 및 비행구역 center 포인트 추가

src/containers/flight/ControlApprovalsContainer.js

@@ -310,7 +310,21 @@ export default function ControlApprovalsContainer({ mode }) {
         type: 'geojson',
         data: controlLayer
       });
-      mapInstance.addLayer(flightlayerWayPoint('controlLayer'));
+      // mapInstance.addLayer(flightlayerWayPoint('controlLayer'));
+      const centerPoint = {
+        id: 'waypoint-center',
+        type: 'circle',
+        source: 'controlLayer',
+        paint: {
+          'circle-radius': 5,
+          'circle-color': '#8a1c05',
+          'circle-stroke-color': '#000000',
+          'circle-stroke-width': 1
+        },
+        filter: ['in', '$type', 'Point']
+      };
+      mapInstance.addLayer(centerPoint);
+
       mapInstance.addLayer(flightlayerBuffer('controlLayer'));
       mapInstance.addLayer(flightlayerPolygon('controlLayer'));
       mapInstance.addLayer(flightlayerPolyline('controlLayer'));
@@ -342,6 +356,10 @@ export default function ControlApprovalsContainer({ mode }) {
       circle.properties.center = [areas.lon, areas.lat];
       circle.geometry.coordinates = circleCoords;
 
+      const point = InitFeature('Point', 'POINT');
+      point.geometry.coordinates = [areas.lon, areas.lat];
+      controlLayer.features.push(point);
+
       controlLayer.features.push(circle);
 
       fitZoomPaths = circleCoords[0];
@@ -377,7 +395,8 @@ export default function ControlApprovalsContainer({ mode }) {
 
     if (mapObject) {
       const dataBlock = new mapboxgl.Popup({
-        offset: [0, 0],
+        anchor: 'bottom-left',
+        offset: [20, -20],
         closeButton: false,
         closeOnClick: false,
         closeOnMove: false

src/containers/flight/OperationApprovalsContainer.js

@@ -370,7 +370,21 @@ export default function OperationApprovalsContainer({ mode }) {
         type: 'geojson',
         data: operationLayer
       });
-      mapInstance.addLayer(flightlayerWayPoint('operationLayer'));
+      // mapInstance.addLayer(flightlayerWayPoint('operationLayer'));
+      const centerPoint = {
+        id: 'waypoint-center',
+        type: 'circle',
+        source: 'operationLayer',
+        paint: {
+          'circle-radius': 5,
+          'circle-color': '#8a1c05',
+          'circle-stroke-color': '#000000',
+          'circle-stroke-width': 1
+        },
+        filter: ['in', '$type', 'Point']
+      };
+      mapInstance.addLayer(centerPoint);
+
       mapInstance.addLayer(flightlayerBuffer('operationLayer'));
       mapInstance.addLayer(flightlayerPolygon('operationLayer'));
       mapInstance.addLayer(flightlayerPolyline('operationLayer'));
@@ -408,6 +422,10 @@ export default function OperationApprovalsContainer({ mode }) {
           key: area?.planAreaSno
         };
 
+        const point = InitFeature('Point', 'POINT');
+        point.geometry.coordinates = [area.lon, area.lat];
+        operationLayer.features.push(point);
+
         operationLayer.features.push(circle);
       });
 
@@ -464,7 +482,8 @@ export default function OperationApprovalsContainer({ mode }) {
 
       if (mapObject) {
         const dataBlock = new mapboxgl.Popup({
-          offset: [0, 0],
+          anchor: 'bottom-left',
+          offset: [20, -20],
           closeButton: false,
           closeOnClick: false,
           closeOnMove: false