Merge pull request '드론교통관리 uam노선, 송전탑 주석 해제' (#1) from dev into master

Reviewed-on: #1

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

@@ -1,4 +1,11 @@
 import '../../../../assets/css/custom.css';
+import { useEffect, useState } from 'react';
+import geoJson from '../../geojson/airArea.json';
+import * as turf from '@turf/turf';
+import towerImg from '../../../../assets/images/transmission_tower_icon.png';
+import uamRouteArea from '../../geojson/uamRouteArea.json';
+import uamTowerArea from '../../geojson/uamTowerArea.json';
+import axios from '../../../../modules/utils/customAxiosUtil';
 import { useEffect } from 'react';
 import geoJson from '../../geojson/airArea.json';
 import * as turf from '@turf/turf';
@@ -26,12 +33,34 @@ const airPort = [
 ];
 
 export const FeatureAirZone = props => {
+  const [bufferGeoJson, setBufferGeoJson] = useState();
+  const [uamGeoJson, setUamGeoJson] = useState({
+    ...uamRouteArea,
+    ...uamTowerArea,
+    features: [...uamRouteArea.features, ...uamTowerArea.features]
+  });
+
+  const [number, setNumber] = useState(0);
+
   let popup;
 
   useEffect(() => {
     featureAirZoneInit();
+    uamAirAreaInit();
   }, []);
 
+  // 얻은 버퍼 좌표로 버퍼 도형 생성 후 지도에 반영
+  useEffect(() => {
+    if (bufferGeoJson) {
+      const obj = {
+        ...uamGeoJson,
+        features: [...uamGeoJson.features, bufferGeoJson]
+      };
+      setUamGeoJson(obj);
+      props.map.getSource('uam').setData(obj);
+    }
+  }, [bufferGeoJson]);
+
   // 공역 정보 표출 window 생성
   const infowindowOpen = data => {
     const content =
@@ -318,5 +347,141 @@ export const FeatureAirZone = props => {
     });
   };
 
+  // uam 셋팅 함수
+  const uamAirAreaInit = () => {
+    if (number === 0) {
+      // uam노선 features
+      const routeFeatures = uamRouteArea.features;
+
+      // [경도, 위도] -> [{x: 경도, y: 위도}] 포맷팅
+      const routeLine = routeFeatures
+        .filter(route => route.geometry.type === 'LineString')
+        .map(line => {
+          return line.geometry.coordinates.map(p => {
+            return { x: p[0], y: p[1] };
+          });
+        });
+
+      // uam노선 버퍼 좌표 요청
+      const bufferCreate = async coords => {
+        const bufferList = await axios.post(
+          `http://211.253.11.189:8080/api/bas/flight/adex/buffer`,
+          {
+            buffer: 50,
+            coordinates: coords
+          }
+        );
+
+        const paths = [];
+        bufferList.map(buffer => {
+          const path = [buffer.x, buffer.y];
+          paths.push(path);
+        });
+
+        const bufferObj = {
+          type: 'Feature',
+          geometry: {
+            type: 'LineString',
+            coordinates: paths
+          },
+          properties: {
+            type: 'routeBuffer'
+          }
+        };
+        setBufferGeoJson(bufferObj);
+      };
+
+      routeLine.forEach(coords => {
+        bufferCreate(coords);
+      });
+
+      // 송전선 features
+      const towerFeatures = uamTowerArea.features;
+
+      // 송전탑 마커 생성
+      towerFeatures
+        .filter(tower => tower.properties.type === 'towerPoint')
+        .map((point, idx) => {
+          const el = document.createElement('img');
+          el.id = `tower${idx}`;
+          el.src = towerImg;
+          el.style.width = '20px';
+          el.style.height = '20px';
+
+          new props.mapboxgl.Marker({
+            element: el
+          })
+            .setLngLat(
+              props.mapboxgl.LngLat.convert(point.geometry.coordinates)
+            )
+            .addTo(props.map);
+        });
+
+      // uam 관련 Source, Layer
+      props.map.addSource('uam', {
+        type: 'geojson',
+        data: uamGeoJson
+      });
+      props.map.addLayer({
+        id: 'routeLine',
+        type: 'line',
+        source: 'uam',
+        layout: {
+          'line-cap': 'butt',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#FF1493',
+          'line-width': 3,
+          'line-dasharray': [1, 1]
+        },
+        filter: ['==', ['get', 'type'], 'routeLine']
+      });
+      props.map.addLayer({
+        id: 'routeBuffer',
+        type: 'line',
+        source: 'uam',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#000000',
+          'line-width': 1,
+          'line-dasharray': [3, 3]
+        },
+        filter: ['==', ['get', 'type'], 'routeBuffer']
+      });
+      props.map.addLayer({
+        id: 'routePoint',
+        type: 'circle',
+        source: 'uam',
+        paint: {
+          'circle-radius': 5,
+          'circle-color': '#ffffff',
+          'circle-stroke-color': '#000000',
+          'circle-stroke-width': 1
+        },
+        filter: ['==', ['get', 'type'], 'routePoint']
+      });
+      props.map.addLayer({
+        id: 'towerLine',
+        type: 'line',
+        source: 'uam',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': '#960018',
+          'line-width': 1
+        },
+        filter: ['==', ['get', 'type'], 'towerLine']
+      });
+    }
+
+    setNumber(number + 1);
+  };
+
   return null;
 };

src/modules/basis/flight/reducers/basisFlightReducer.ts

@@ -171,3 +171,10 @@ export const flightReducer = createReducer<FlightState, Actions.FlightAction>(
       draft.inAirArea = data;
     })
   );
+// uam 노선 버퍼 영역 조회
+//.handleAction(Actions.FLIGHT_UAM_BUFFER_LIST.success, (state, action) =>
+//   produce(state, draft => {
+//     const data = action.payload;
+//     draft.uamBufferList = data;
+//   })
+// );