비행 승인 컨테이너 수정

src/containers/flight/flightApprovalsContainer.js

@@ -20,7 +20,11 @@ import {
   InitFeature,
   handlerCreatePoint,
   handlerFitBounds,
-  handlerGetCircleCoord
+  handlerGetCircleCoord,
+  layerPolyline,
+  layerPolygon,
+  layerBuffer,
+  layerWayPoint
 } from '../../utility/MapUtils';
 import { MapControl } from '../../components/map/MapControl';
 import { clientSetIsMapLoading } from '@src/redux/features/laanc/laancSlice';
@@ -32,7 +36,7 @@ export default function FlightApprovalsContainer() {
 
   // 오른쪽 사이드 메뉴 표출 여부
   const [openSetting, setOpenSetting] = useState(true);
-  const [data, setData] = useState([
+  const [res, setRes] = useState([
     {
       planSno: '321',
       complaint: '15000',
@@ -176,7 +180,7 @@ export default function FlightApprovalsContainer() {
   const [areaCoordList, setAreaCoordList] = useState([]);
 
   const map = useSelector(state => state.mapState.map);
-  const previewGeo = {
+  const previewGeo2 = {
     type: 'FeatureCollection',
     features: []
   };
@@ -214,117 +218,34 @@ export default function FlightApprovalsContainer() {
   }, [map]);
 
   const handlerMapInit = () => {
-    mapboxgl.accessToken = MAPBOX_TOKEN;
+    map.on('style.load', () => {
+      map.addSource('preview', {
+        type: 'geojson',
+        data: previewGeo2
+      });
+      map.addLayer(layerPolyline('preview'));
+      map.addLayer(layerPolygon('preview'));
+      map.addLayer(layerBuffer('preview'));
+      map.addLayer(layerWayPoint('preview'));
 
-    // 비행구역 상세맵 draw 정보 셋팅
-    const draw = new MapboxDraw({
-      displayControlsDefault: false,
-      userProperties: true,
-      boxSelect: false,
-      modes: {
-        ...MapboxDraw.modes,
-        draw_circle: CircleMode,
-        drag_circle: DragCircleMode,
-        direct_select: DirectMode,
-        simple_select: SimpleSelectMode
-      },
-      styles: [
-        {
-          // polyline
-          id: 'gl-draw-line',
-          type: 'line',
-          filter: [
-            'all',
-            ['==', '$type', 'LineString'],
-            ['!=', 'mode', 'static']
-          ],
-          layout: {
-            'line-cap': 'round',
-            'line-join': 'round'
-          },
-          paint: {
-            'line-color': '#8a1c05',
-            'line-dasharray': [0.2, 2],
-            'line-width': 2
-          }
-        },
-        {
-          // polygon fill
-          id: 'gl-draw-polygon-fill',
-          type: 'fill',
-          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
-          paint: {
-            'fill-color': '#8a1c05',
-            'fill-outline-color': '#8a1c05',
-            'fill-opacity': 0.1
-          }
-        },
-        // polygon outline
-        {
-          id: 'gl-draw-polygon-stroke-active',
-          type: 'line',
-          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
-          layout: {
-            'line-cap': 'round',
-            'line-join': 'round'
-          },
-          paint: {
-            'line-color': '#8a1c05',
-            'line-dasharray': [0.2, 2],
-            'line-width': 2
-          }
-        },
-        {
-          // vertex point halos
-          id: 'gl-draw-polygon-and-line-vertex-halo-active',
-          type: 'circle',
-          filter: [
-            'all',
-            ['==', 'meta', 'vertex'],
-            ['==', '$type', 'Point'],
-            ['!=', 'mode', 'static']
-          ],
-          paint: {
-            'circle-radius': 8,
-            'circle-color': '#ffffff'
-          }
-        },
-        {
-          // vertex points
-          id: 'gl-draw-polygon-and-line-vertex-active',
-          type: 'circle',
-          filter: [
-            'all',
-            ['==', 'meta', 'vertex'],
-            ['==', '$type', 'Point'],
-            ['!=', 'mode', 'static']
-          ],
-          paint: {
-            'circle-radius': 6,
-            'circle-color': '#8a1c05'
-          }
-        }
-      ]
-    });
-    setDrawObj(draw);
-    map.dragRotate.disable();
-
-    // dispatch(clientMapInit(map));
-    // 김포 3d 공역
+      setDrawObj(draw);
+      map.dragRotate.disable();
 
-    dispatch(clientSetIsMapLoading(true));
+      dispatch(clientSetIsMapLoading(true));
 
-    setIsMapLoading(true);
-    setMapObject(map);
-    dispatch(clientMapInit(map));
+      setIsMapLoading(true);
+      setMapObject(map);
+      dispatch(clientMapInit(map));
+    });
   };
-
   const handlerPreviewDraw = () => {
     if (areaCoordList) {
       const areas = areaCoordList[0];
       const paths = [];
       areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
 
+      previewGeo2.features = [];
+
       let fitZoomPaths = [];
 
       if (areas.areaType) {
@@ -336,6 +257,8 @@ export default function FlightApprovalsContainer() {
           circle.properties.center = paths[0];
           circle.geometry.coordinates = circleCoords;
 
+          previewGeo2.features.push(circle);
+
           mapObject.setCenter(circle.properties.center);
 
           fitZoomPaths = circleCoords[0];
@@ -346,6 +269,7 @@ export default function FlightApprovalsContainer() {
           const point = [];
           if (areas.areaType === 'LINE') {
             lineString.geometry.coordinates = paths;
+            previewGeo2features.push(lineString);
 
             //버퍼 생성
             if (areas.bufferCoordList) {
@@ -356,24 +280,31 @@ export default function FlightApprovalsContainer() {
               );
 
               bufferPolyline.geometry.coordinates = bufferPaths;
+              previewGeo2features.push(bufferPolyline);
             }
           } else if (areas.areaType === 'POLYGON') {
             polygon.geometry.coordinates = [paths];
+            previewGeo2features.push(polygon);
           }
           // 포인트 생성
           paths.forEach((p, i) => {
             const wayPoint = handlerCreatePoint(p, i, areas.areaType);
             point.push(wayPoint);
           });
+          previewGeo2features = previewGeo2features.filter(
+            geo => geo.properties.id !== 'point'
+          );
+          point.forEach(p => previewGeo2features.push(p));
 
           //지도 줌 좌표 설정
           fitZoomPaths = paths.concat();
         }
-        console.log('>>>', mapObject);
 
-        handlerFitBounds(map, fitZoomPaths, 50, areas.areaType);
+        handlerFitBounds(mapObject, fitZoomPaths, 50, areas.areaType);
 
-        map.setPaintProperty('waypoint', 'circle-radius', 10);
+        console.log('>>>', map.getSource('preview'));
+        mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
+        mapObject.getSource('preview').setData(previewGeo2);
       }
     }
   };
@@ -395,7 +326,7 @@ export default function FlightApprovalsContainer() {
             <div className='layer-content'>
               <FlightApprovalsReport handlerSearch={handlerSearch} />
               <FlightApprovalsTable
-                data={data}
+                data={res}
                 filter={filter}
                 selected={selected}
                 handlerDetail={handlerDetail}
@@ -414,46 +345,6 @@ export default function FlightApprovalsContainer() {
           <div className='right-layer'></div>
         </div>
       )}
-      {/* <div className='main-data-box flight-data' style={{ width: '440px' }}>
-        <Card>
-          <div className='data-box-header'>
-            <span className='box-ti'>관활기관 신청 결과 건수</span>
-          </div>
-          <div
-            className='data-list-box'
-            style={{
-              display: 'flex',
-              gap: '10px',
-              flexWrap: 'wrap'
-            }}
-          >
-            <div className='data-list'>
-              <span className=''>서울지방항공청 1건</span>
-            </div>
-            <div className='data-list'>
-              <span className=''>김포공항관리사무소 3건</span>
-            </div>
-            <div className='data-list'>
-              <span className=''>청주공항출장소 2건</span>
-            </div>
-
-            <div
-              style={{
-                display: 'flex',
-                gap: '10px',
-                justifyContent: 'start'
-              }}
-            >
-              <div className='data-list'>
-                <span className=''>부산지방공청 1건</span>
-              </div>
-              <div className='data-list'>
-                <span className=''>제주지방항공청 1건</span>
-              </div>
-            </div>
-          </div>
-        </Card>
-      </div> */}
     </>
   );
 }