feat/ 제주공항 장애물제한표면 적용

src/components/map/mapbox/MapBoxMap.js

@@ -30,14 +30,18 @@ import FeatureAirZone from './feature/FeatureAirZone';
 // v월드 공역
 import { airArea } from '../geojson/_AirArea';
 
-import geoJson from '../../map/geojson/airArea.json';
-import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
-import ulsan from '../../map/geojson/ulsanAirArea.json';
 // 김포 격자 공역
 import gimPoGrid from '../../../components/map/geojson/airportAirArea.json';
-// 김포 선형 공역
+
+// 3d 공역
+import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
+import ulsan from '../../map/geojson/ulsanAirArea.json';
+import jeju from '../../map/geojson/jejuAirArea.json';
+
+// 선형(flat) 공역
 import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json';
 import flatUlsan from '../../map/geojson/flatUlsanAirArea.json';
+import flatJeju from '../../map/geojson/flatJejuAirport.json';
 
 import { clientMapInit } from '@src/redux/features/control/map/mapSlice';
 import { getDraw } from '@src/utility/MapUtils';
@@ -128,11 +132,13 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
       ...airArea,
       ...flatGimpo,
       ...flatUlsan,
+      ...flatJeju,
       features: [
         // ...geoJson.features,
         ...airArea.features,
         ...flatGimpo.features,
-        ...flatUlsan.features
+        ...flatUlsan.features,
+        ...flatJeju.features
       ]
     }
   ) => {
@@ -144,18 +150,19 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
             ...airArea,
             ...flatGimpo,
             ...flatUlsan,
+            ...flatJeju,
             features: [
               // ...geoJson.features,
               ...airArea.features,
               ...flatGimpo.features,
-              ...flatUlsan.features
+              ...flatUlsan.features,
+              ...flatJeju.features
             ]
           }
         : {
             // ...geoJson,
             ...airArea,
             ...gimPoGrid,
-            // ...ulsan
             features: [
               // ...geoJson.features,
               ...airArea.features,
@@ -459,12 +466,13 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
           },
           labelLayerId
         );
-        // 김포 3d 공역
+        // 3d 공역
         map.addLayer({
           id: 'route',
           type: 'custom',
           renderingMode: '3d',
           onAdd: function () {
+            // 김포
             for (let i = 0; i < gimPo.features.length; i++) {
               let line;
               const options = {
@@ -478,18 +486,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
               });
               tb.add(line);
             }
-          },
-          render: function () {
-            tb.update();
-          }
-        });
-
-        // 울산
-        map.addLayer({
-          id: 'routes',
-          type: 'custom',
-          renderingMode: '3d',
-          onAdd: function () {
+            // 울산
             for (let i = 0; i < ulsan.features.length; i++) {
               let line;
               const options = {
@@ -503,6 +500,20 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
               });
               tb.add(line);
             }
+            // 제주
+            for (let i = 0; i < jeju.features.length; i++) {
+              let line;
+              const options = {
+                path: jeju.features[i].geometry.coordinates
+              };
+              let lineGeometry = options.path;
+              line = tb.line({
+                geometry: lineGeometry,
+                width: jeju.features[i].properties['stroke-width'],
+                color: jeju.features[i].properties.stroke
+              });
+              tb.add(line);
+            }
           },
           render: function () {
             tb.update();
@@ -513,6 +524,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
         map.setMaxPitch(0);
         map.setBearing(0);
         map.dragRotate.disable();
+        // 김포
         gimPo.features.map((i, idx) => {
           map.addSource(`lineRoute${idx}`, {
             type: 'geojson',
@@ -534,6 +546,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
             }
           });
         });
+        // 울산
         ulsan.features.map((i, idx) => {
           map.addSource(`lineRoute${idx}`, {
             type: 'geojson',
@@ -555,6 +568,28 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
             }
           });
         });
+        // 제주
+        jeju.features.map((i, idx) => {
+          map.addSource(`lineRoute${idx}`, {
+            type: 'geojson',
+            data: {
+              ...i
+            }
+          });
+          map.addLayer({
+            id: `lineRoute${idx}`,
+            type: 'line',
+            source: `lineRoute${idx}`,
+            layout: {
+              'line-join': 'round',
+              'line-cap': 'round'
+            },
+            paint: {
+              'line-color': i.properties.stroke,
+              'line-width': i.properties['stroke-width']
+            }
+          });
+        });
       }
 
       // 지형 높이 표시

src/utility/MapUtils.js

@@ -16,6 +16,7 @@ import { airArea } from '../components/map/geojson/_AirArea';
 import geoJson from '../components/map/geojson/airArea.json';
 import flatGimpo from '../components/map/geojson/flatGimpoAirportAirArea.json';
 import flatUlsan from '../components/map/geojson/flatUlsanAirArea.json';
+import flatJeju from '../components/map/geojson/flatJejuAirport.json';
 
 /**
  * geojson Feature 형식으로 반환
@@ -335,11 +336,13 @@ export const handlerCreateAirSpace = (
     ...airArea,
     ...flatGimpo,
     ...flatUlsan,
+    ...flatJeju,
     features: [
       // ...geoJson.features,
       ...airArea.features,
       ...flatGimpo.features,
-      ...flatUlsan.features
+      ...flatUlsan.features,
+      ...flatJeju.features
     ]
   }
 ) => {

src/views/control/setting/ControlSetting.js

@@ -9,6 +9,7 @@ import {
   clientFlightAreaClick,
   clientMapTypeChange
 } from '@src/redux/features/control/map/mapSlice';
+import { clientDispatchTopMenu } from '@src/redux/features/layout/layoutSlice';
 
 // v월드 공역
 import { airArea } from '../../../components/map/geojson/_AirArea';
@@ -19,8 +20,8 @@ import gimPo from '../../../components/map/geojson/gimpoAirportAirArea.json';
 import gimPoGrid from '../../../components/map/geojson/airportAirArea.json';
 // 김포 선형 공역
 import flatGimpo from '../../../components/map/geojson/flatGimpoAirportAirArea.json';
-import { clientDispatchTopMenu } from '@src/redux/features/layout/layoutSlice';
 import flatUlsan from '../../../components/map/geojson/flatUlsanAirArea.json';
+import flatJeju from '../../../components/map/geojson/flatJejuAirport.json';
 
 const ControlSetting = props => {
   const [setMapType] = useMapType();
@@ -42,11 +43,13 @@ const ControlSetting = props => {
           ...airArea,
           ...flatGimpo,
           ...flatUlsan,
+          ...flatJeju,
           features: [
             // ...geoJson.features,
             ...airArea.features,
             ...flatGimpo.features,
-            ...flatUlsan.features
+            ...flatUlsan.features,
+            ...flatJeju.features
           ]
         };
         let arrGeoJson = [];