관제과 비행구역 데이터블록 표출

src/containers/flight/ControlApprovalsContainer.js

@@ -40,6 +40,7 @@ import {
   FiCornerUpLeft
 } from 'react-icons/fi';
 import { X } from 'react-feather';
+import mapboxgl from 'mapbox-gl';
 
 export default function ControlApprovalsContainer({ mode }) {
   const dispatch = useDispatch();
@@ -67,8 +68,6 @@ export default function ControlApprovalsContainer({ mode }) {
 
   // 시군구
   const [district, setDistrict] = useState('전체');
-  // 미니맵 레이어
-  const [previewLayer, setPreviewLayer] = useState();
 
   const { map, mapType } = useSelector(state => state.mapState);
 
@@ -80,7 +79,11 @@ export default function ControlApprovalsContainer({ mode }) {
   const savedRightMenuRef = useRef(null);
   const [clientX, setClientX] = useState(0);
 
-  const previewGeo2 = {
+  // 비행구역 데이터블록
+  const [dataBlocks, setDataBlocks] = useState([]);
+
+  //   비행구역 (관제과) 레이어
+  const controlLayer = {
     type: 'FeatureCollection',
     features: []
   };
@@ -98,7 +101,7 @@ export default function ControlApprovalsContainer({ mode }) {
 
   useEffect(() => {
     if (areaCoordList.length !== 0) {
-      handlerPreviewDraw();
+      handlerAreaDraw();
     }
   }, [areaCoordList]);
 
@@ -289,22 +292,19 @@ export default function ControlApprovalsContainer({ mode }) {
   const handlerMapInit = () => {
     let mapInstance = mode === 'container' ? map : window.opener._mapbox;
 
-    if (mapInstance.getSource('preview')) {
+    if (mapInstance.getSource('controlLayer')) {
     } else {
-      mapInstance.addSource('preview', {
+      mapInstance.addSource('controlLayer', {
         type: 'geojson',
-        data: previewGeo2
+        data: controlLayer
       });
-      mapInstance.addLayer(flightlayerWayPoint('preview'));
+      mapInstance.addLayer(flightlayerWayPoint('controlLayer'));
-      mapInstance.addLayer(flightlayerBuffer('preview'));
+      mapInstance.addLayer(flightlayerBuffer('controlLayer'));
-      mapInstance.addLayer(flightlayerPolygon('preview'));
+      mapInstance.addLayer(flightlayerPolygon('controlLayer'));
-      mapInstance.addLayer(flightlayerPolyline('preview'));
+      mapInstance.addLayer(flightlayerPolyline('controlLayer'));
     }
 
     dispatch(clientSetIsMapLoading(true));
-    const preview = mapInstance.getSource('preview');
-
-    if (preview) setPreviewLayer(preview);
 
     setIsMapLoading(true);
 
@@ -313,13 +313,13 @@ export default function ControlApprovalsContainer({ mode }) {
     dispatch(clientMapInit(mapInstance));
   };
 
-  const handlerPreviewDraw = () => {
+  // 비행구역 생성 및 화면 포커스
+  const handlerAreaDraw = () => {
     if (areaCoordList.length > 0) {
       const areas = areaCoordList[0];
-
+      controlLayer.features = [];
-      previewGeo2.features = [];
-
       let fitZoomPaths = [];
+
       const radius = areas.bufferZone;
       const circleCoords = handlerGetCircleCoord(
         [areas.lon, areas.lat],
@@ -330,16 +330,56 @@ export default function ControlApprovalsContainer({ mode }) {
       circle.properties.center = [areas.lon, areas.lat];
       circle.geometry.coordinates = circleCoords;
 
-      previewGeo2.features.push(circle);
+      controlLayer.features.push(circle);
-
-      mapObject?.setCenter(circle.properties.center);
 
       fitZoomPaths = circleCoords[0];
-
       handlerFitBounds(mapObject, fitZoomPaths, 400, 'CIRCLE', 'flight');
 
-      // mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
+      handlerInfoWindow(areas);
-      mapObject?.getSource('preview').setData(previewGeo2);
+      mapObject?.getSource('controlLayer').setData(controlLayer);
+    }
+  };
+
+  // 데이터블록 표출 이벤트
+  const handlerInfoWindow = area => {
+    if (dataBlocks.length > 0) {
+      dataBlocks?.map(block => {
+        block.remove();
+      });
+    }
+
+    const divCd =
+      area.fltElevMax === 120
+        ? '원추'
+        : area.fltElevMax > 45 && area.fltElevMax < 100
+        ? '수평'
+        : '-';
+
+    const content = `
+          <div class="tooltip-box">
+            <div class="tooltip-ti">
+              <span>${area?.applyNo}</span>
+            </div>
+            <div class="tooltip-txt">
+              <div class="tooltip-txt-list">
+                <span>비행구역 ${area?.zoneNo} / 주소- / ${divCd}</span>
+              </div>
+            </div>
+          </div>
+          `;
+
+    if (mapObject) {
+      const dataBlock = new mapboxgl.Popup({
+        offset: [0, 0],
+        closeButton: false,
+        closeOnClick: false,
+        closeOnMove: false
+      })
+        .setLngLat({ lng: area?.lon, lat: area?.lat })
+        .setHTML(content)
+        .addTo(mapObject);
+
+      setDataBlocks(prev => [...prev, dataBlock]);
     }
   };