김포공항 관제권 장애물표현 geojson 파일 생성

src/components/map/mapbox/MapBoxMap.js

@@ -11,7 +11,7 @@ import { DronMarker } from './dron/DronMarker';
 // import { NaverMapSearch } from './search/NaverMapSearch';
 import { FeatureAirZone } from './feature/FeatureAirZone';
 import geoJson from '../../map/geojson/airArea.json';
-import gimPo from '../../map/geojson/airportAirArea.json';
+import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
 // import DronPlan from './dron/DronPlan';
 // import NewDronPlan from './dron/NewDronPlan';
 // import { NewDronHistory } from './dron/NewDronHistroy';
@@ -224,7 +224,6 @@ export default function MapBoxMap() {
 
   useEffect(() => {
     if (mapObject) {
-      console.log('????');
       uamPosition.features.map(uam => {
         const el = document.createElement('div');
         const elChild = document.createElement('span');
@@ -247,11 +246,87 @@ export default function MapBoxMap() {
     }
   }, [mapObject]);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (mapObject) {
+    if (mapObject) {
-  //     mapObject.setStyle('mapbox://styles/mapbox/streets-v12');
+      console.log(mapControl);
-  //   }
+      handlerCreateAirSpace(mapObject);
-  // }, [mapControl, mapObject]);
+    }
+  }, [
+    mapControl.area0001,
+    mapControl.area0002,
+    mapControl.area0003,
+    mapControl.area0004,
+    mapControl.area0005,
+    mapControl.area0006
+  ]);
+
+  const handlerCreateAirSpace = (
+    map,
+    useGeoJson = {
+      ...geoJson,
+      features: [...geoJson.features, ...gimPo.features]
+    }
+  ) => {
+    if (map.getLayer('maine')) {
+      map.removeLayer('maine');
+      map.removeSource('maine');
+    }
+
+    let arrGeoJson = [];
+    useGeoJson.features.map(item => {
+      if (item.properties.type === '0001' && mapControl.area0001) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#FF3648' }
+        });
+      } else if (item.properties.type === '0002' && mapControl.area0002) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#FFA1AA' }
+        });
+      } else if (item.properties.type === '0003' && mapControl.area0003) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#FFA800' }
+        });
+      } else if (item.properties.type === '0004' && mapControl.area0004) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#A16B00' }
+        });
+      } else if (item.properties.type === '0005' && mapControl.area0005) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#AB40FF' }
+        });
+      } else if (item.properties.type === '0006' && mapControl.area0006) {
+        arrGeoJson.push({
+          ...item,
+          properties: { ...item.properties, color: '#009cad' }
+        });
+      }
+    });
+    useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon');
+
+    // 공역 생성 start
+    map.addSource('maine', {
+      type: 'geojson',
+      data: {
+        ...useGeoJson
+      }
+    });
+    map.addLayer({
+      id: 'maine',
+      type: 'fill',
+      source: 'maine',
+      layout: {},
+      paint: {
+        'fill-color': ['get', 'color'],
+        // 'fill-extrusion-height': 3000,
+        'fill-opacity': 0.5
+      }
+    });
+  };
 
   const mapBoxMapInit = () => {
     mapboxgl.accessToken = MAPBOX_TOKEN;
@@ -262,11 +337,13 @@ export default function MapBoxMap() {
       center: [127.85101412107547, 37.520357], // starting position [lng, lat]
       zoom: 8.5, // starting zoom
       antialias: true
-      // pitch: 64.9,
-      // bearing: 172.5
     });
     const language = new MapboxLanguage();
     map.addControl(language);
+
+    // 드래그 제한 2d
+    map.dragRotate.disable();
+
     // const tb = (window.tb = new threebox.Threebox(
     //   map,
     //   map.getCanvas().getContext('webgl'),
@@ -286,13 +363,15 @@ export default function MapBoxMap() {
       ).id;
 
       // 지형 3d start
-      map.addSource('mapbox-dem', {
+      // map.addSource('mapbox-dem', {
-        type: 'raster-dem',
+      //   type: 'raster-dem',
-        url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+      //   url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-        tileSize: 512,
+      //   tileSize: 512,
-        maxZoom: 14
+      //   maxZoom: 14,
-      });
+      //   pitch: 0, // Set pitch to 0 for a 2D view
-      map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
+      //   bearing: 0 // Set bearing to 0 for a north-up view
+      // });
+      // map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
 
       // map.addLayer({
       //   id: 'contour-labels',
@@ -345,122 +424,47 @@ export default function MapBoxMap() {
       // });
       // 등고선 end
       // 3d building
-      map.addLayer(
+      // map.addLayer(
-        {
+      //   {
-          id: 'add-3d-buildings',
+      //     id: 'add-3d-buildings',
-          source: 'composite',
+      //     source: 'composite',
-          'source-layer': 'building',
+      //     'source-layer': 'building',
-          filter: ['==', 'extrude', 'true'],
+      //     filter: ['==', 'extrude', 'true'],
-          type: 'fill-extrusion',
+      //     type: 'fill-extrusion',
-          minzoom: 15,
+      //     minzoom: 15,
-          paint: {
+      //     paint: {
-            'fill-extrusion-color': '#aaa',
+      //       'fill-extrusion-color': '#aaa',
-
+
-            // Use an 'interpolate' expression to
+      //       // Use an 'interpolate' expression to
-            // add a smooth transition effect to
+      //       // add a smooth transition effect to
-            // the buildings as the user zooms in.
+      //       // the buildings as the user zooms in.
-            'fill-extrusion-height': [
+      //       'fill-extrusion-height': [
-              'interpolate',
+      //         'interpolate',
-              ['linear'],
+      //         ['linear'],
-              ['zoom'],
+      //         ['zoom'],
-              15,
+      //         15,
-              0,
+      //         0,
-              15.05,
+      //         15.05,
-              ['get', 'height']
+      //         ['get', 'height']
-            ],
+      //       ],
-            'fill-extrusion-base': [
+      //       'fill-extrusion-base': [
-              'interpolate',
+      //         'interpolate',
-              ['linear'],
+      //         ['linear'],
-              ['zoom'],
+      //         ['zoom'],
-              15,
+      //         15,
-              0,
+      //         0,
-              15.05,
+      //         15.05,
-              ['get', 'min_height']
+      //         ['get', 'min_height']
-            ],
+      //       ],
-            'fill-extrusion-opacity': 0.6
+      //       'fill-extrusion-opacity': 0.6
-          }
+      //     }
-        },
+      //   },
-        labelLayerId
+      //   labelLayerId
-      );
+      // );
       // 3d building
 
-      let arrGeoJson = [];
-
-      const useGeoJson = {
-        ...geoJson,
-        features: [...geoJson.features, ...gimPo.features]
-      };
-      // if (mapControl.mapType === 'NORMAL') {
-      //   props.map.setStyle('mapbox://styles/mapbox/streets-v12');
-      // } else if (mapControl.mapType === 'TERRAIN') {
-      //   //   props.map.setMapTypeId(naver.maps.MapTypeId.TERRAIN);
-      // } else if (mapControl.mapType === 'HYBRID') {
-      //   props.map.setStyle('mapbox://styles/mapbox/satellite-streets-v11');
-      // }
-
-      if (map.getLayer('maine')) {
-        map.removeLayer('maine');
-        map.removeSource('maine');
-      }
-
       // 공역 색상 및 공역 표출 정보에 따른 노출
-      useGeoJson.features.map(item => {
+      handlerCreateAirSpace(map);
-        if (item.properties.type === '0001' && mapControl.area0001) {
-          arrGeoJson.push({
-            ...item,
-            properties: { ...item.properties, color: '#FF3648' }
-          });
-        } else if (item.properties.type === '0002' && mapControl.area0002) {
-          arrGeoJson.push({
-            ...item,
-            properties: { ...item.properties, color: '#FFA1AA' }
-          });
-        } else if (item.properties.type === '0003' && mapControl.area0003) {
-          arrGeoJson.push({
-            ...item,
-            properties: { ...item.properties, color: '#FFA800' }
-          });
-        } else if (item.properties.type === '0004' && mapControl.area0004) {
-          arrGeoJson.push({
-            ...item,
-            properties: { ...item.properties, color: '#A16B00' }
-          });
-        } else if (item.properties.type === '0005' && mapControl.area0005) {
-          arrGeoJson.push({
-            ...item,
-            properties: { ...item.properties, color: '#AB40FF' }
-          });
-        } else if (item.properties.type === '0006' && mapControl.area0006) {
-          arrGeoJson.push({
-            ...item,
-            properties: { ...item.properties, color: '#009cad' }
-          });
-        }
-      });
-      useGeoJson.features = arrGeoJson.filter(
-        i => i.geometry.type === 'Polygon'
-      );
-
-      // 공역 생성 start
-      map.addSource('maine', {
-        type: 'geojson',
-        data: {
-          ...useGeoJson
-        }
-      });
-      map.addLayer({
-        id: 'maine',
-        type: 'fill-extrusion',
-        source: 'maine',
-        layout: {},
-        paint: {
-          'fill-extrusion-color': ['get', 'color'],
-          'fill-extrusion-height': 3000,
-          'fill-extrusion-opacity': 0.5
-        }
-      });
-      // 공역 생성 end
-
       setMapLoaded(true);
     });
     setMapObject(map);