드론교통 시스템(선형, 격자 노출 스위칭) 작업

src/components/map/mapbox/MapBoxMap.js

@@ -14,6 +14,9 @@ import { FeatureAirZone } from './feature/FeatureAirZone';
 import geoJson from '../../map/geojson/airArea.json';
 // import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
 import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
+// 김포 격자 공역
+import gimPoGrid from '../../../components/map/geojson/airportAirArea.json';
+// 김포 선형 공역
 import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json';
 // import DronPlan from './dron/DronPlan';
 // import NewDronPlan from './dron/NewDronPlan';
@@ -211,6 +214,9 @@ const uamPosition = {
   ]
 };
 
+let gridCoords = [];
+let altitudeMarker = [];
+
 export default function MapBoxMap() {
   const naver = window.naver;
 
@@ -260,7 +266,8 @@ export default function MapBoxMap() {
     mapControl.area0003,
     mapControl.area0004,
     mapControl.area0005,
-    mapControl.area0006
+    mapControl.area0006,
+    mapControl.liner
   ]);
 
   const handlerCreateAirSpace = (
@@ -271,10 +278,83 @@ export default function MapBoxMap() {
       features: [...geoJson.features, ...flatGimpo.features]
     }
   ) => {
+    useGeoJson = mapControl.liner
+      ? {
+          ...geoJson,
+          ...flatGimpo,
+          features: [...geoJson.features, ...flatGimpo.features]
+        }
+      : {
+          ...geoJson,
+          ...gimPoGrid,
+          features: [...geoJson.features, ...gimPoGrid.features]
+        };
     if (map.getLayer('maine')) {
       map.removeLayer('maine');
       map.removeSource('maine');
     }
+
+    if (altitudeMarker.length > 0) {
+      altitudeMarker.map(i => {
+        i.remove();
+      });
+      gridCoords = [];
+    }
+
+    if (!mapControl.liner) {
+      if (gridCoords.length <= 0) {
+        gimPoGrid.features.map(air => {
+          gridCoords.push({
+            lat:
+              (Math.max(
+                air.geometry.coordinates[0][0][1],
+                air.geometry.coordinates[0][1][1],
+                air.geometry.coordinates[0][2][1],
+                air.geometry.coordinates[0][3][1]
+              ) +
+                Math.min(
+                  air.geometry.coordinates[0][0][1],
+                  air.geometry.coordinates[0][1][1],
+                  air.geometry.coordinates[0][2][1],
+                  air.geometry.coordinates[0][3][1]
+                )) /
+              2,
+            lng:
+              (Math.max(
+                air.geometry.coordinates[0][0][0],
+                air.geometry.coordinates[0][1][0],
+                air.geometry.coordinates[0][2][0],
+                air.geometry.coordinates[0][3][0]
+              ) +
+                Math.min(
+                  air.geometry.coordinates[0][0][0],
+                  air.geometry.coordinates[0][1][0],
+                  air.geometry.coordinates[0][2][0],
+                  air.geometry.coordinates[0][3][0]
+                )) /
+              2,
+            airspace: air.properties.airspace,
+            type: air.properties.type
+          });
+        });
+        gridCoords.map(val => {
+          if (mapControl[`area${val.type}`]) {
+            const el = document.createElement('div');
+            el.style.color = '#000000';
+            el.style.fontSize = '10px';
+            el.innerText = val.airspace;
+            const marker = new mapboxgl.Marker({
+              element: el
+            })
+              .setLngLat([val.lng.toFixed(6), val.lat.toFixed(6)])
+              .addTo(map);
+            marker.type = val.type;
+            altitudeMarker.push(marker);
+          }
+        });
+      }
+    }
+
     let arrGeoJson = [];
     useGeoJson.features.map(item => {
       if (item.properties.type === '0001' && mapControl.area0001) {
@@ -362,7 +442,7 @@ export default function MapBoxMap() {
       const labelLayerId = layers.find(
         layer => layer.type === 'symbol' && layer.layout['text-field']
       ).id;
-      console.log('?@?@?@');
+
       // 지형 3d start
       map.addSource('mapbox-dem', {
         type: 'raster-dem',

src/components/map/mapbox/feature/FeatureAirZone.js

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import * as turf from '@turf/turf';
 import geoJson from '../../../../components/map/geojson/airArea.json';
-import gimPo from '../../../../components/map/geojson/airportAirArea.json';
 import '../../../../assets/css/custom.css';
 
 // 격자 공역 Source
@@ -151,13 +150,13 @@ export const FeatureAirZone = props => {
       });
 
     // 격자 공역 생성
-    airPort.map(air => polyArea(air));
+    airPort.map((air, idx) => polyArea(air, idx));
     // 마우스 오버 이벤트 생성
     featureAirEvent(markers);
   };
 
   // 격자 공역 셋팅 함수
-  const polyArea = air => {
+  const polyArea = (air, idx) => {
     const polyArr = [];
     const radius = air.buffer;
     const position = air.center;

src/modules/control/map/reducers/controlMapReducer.ts

@@ -10,6 +10,7 @@ const initialState = {
   area0004: true, // 비행장(군사)
   area0005: true, // 이착륙장(RC비행장)
   area0006: true, // 초경량비행장치
+  liner: true,
   sensor: 'dust',
   isLaanc: false,
   drawType: null,
@@ -61,6 +62,11 @@ const controlReducerReducer = (state = initialState, action) => {
           ...state,
           area0006: !state.area0006
         };
+      } else if (action.value === 'liner') {
+        return {
+          ...state,
+          liner: !state.liner
+        };
       } else {
         return {
           state

src/views/control/setting/ControlSetting.js

@@ -184,17 +184,17 @@ const ControlSetting = props => {
               <dt>
                 <div className='list-left-txt'>
                   <span className='dot-icon color-skyblue'></span>
-                  선형
+                  {mapControl.liner ? '선형' : '격자'}
                 </div>
                 <div className='list-right-txt'>
                   <CustomInput
-                    onClick={e => handlerAreaClick('0006')}
+                    onClick={e => handlerAreaClick('liner')}
                     className='custom-control-primary'
                     type='switch'
-                    id='test06'
-                    name='test06'
+                    id='test07'
+                    name='test07'
                     inline
-                    defaultChecked={mapControl.area0006}
+                    defaultChecked={mapControl.liner}
                   />
                 </div>
               </dt>