uam 노선 buffer 적용

src/components/map/geojson/uamAirArea.json

@@ -263,7 +263,7 @@
       "properties": {
         "name": "UAM 실증 노선",
         "description": "한강 노선1",
-        "route": "HG"
+        "route": "HG01"
       }
     },
     {
@@ -327,7 +327,7 @@
       "properties": {
         "name": "UAM 실증 노선",
         "description": "한강 노선2",
-        "route": "HG"
+        "route": "HG02"
       }
     },
     {
@@ -380,7 +380,7 @@
       "properties": {
         "name": "UAM 실증 노선",
         "description": "한강 노선3",
-        "route": "HG"
+        "route": "HG03"
       }
     },
     {

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

@@ -1,9 +1,16 @@
 import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import '../../../../assets/css/custom.css';
+import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
 
 export const FeatureAirZone = props => {
+  const dispatch = useDispatch();
+
   const mapControl = useSelector(state => state.controlMapReducer);
+  const { uamBufferList } = useSelector(state => state.flightState);
+
+  const [uamCoordinates, setUamCoordinates] = useState([]);
+
   let infoWindow;
 
   useEffect(() => {
@@ -19,6 +26,38 @@ export const FeatureAirZone = props => {
     });
   }, [props.poly]);
 
+  // uam 노선 buffer 가져오기
+  useEffect(() => {
+    if (uamCoordinates.length > 0) {
+      uamCoordinates.forEach(coordinates => {
+        dispatch(
+          Actions.FLIGHT_UAM_BUFFER_LIST.request({
+            buffer: 50,
+            coordinates: coordinates
+          })
+        );
+      });
+    }
+  }, [uamCoordinates]);
+
+  useEffect(() => {
+    let bufferPaths = [];
+
+    uamBufferList.forEach(coord => {
+      const path = new naver.maps.LatLng(coord.y, coord.x);
+
+      bufferPaths.push(path);
+    });
+
+    new naver.maps.Polyline({
+      strokeColor: '#283046',
+      strokeOpacity: 1,
+      strokeStyle: [5, 5],
+      path: bufferPaths,
+      map: props.map
+    });
+  }, [uamBufferList]);
+
   const infowindowOpen = data => {
     const content =
       '<div class="tooltip-box">' +
@@ -61,6 +100,15 @@ export const FeatureAirZone = props => {
 
   const featureAirZoneInit = () => {
     let arrGeoJson = [];
+
+    const uamRoutes = {
+      AR: [],
+      HG01: [],
+      HG02: [],
+      HG03: [],
+      TC: []
+    };
+
     // props.map.data.removeGeoJson(props.geoJson);
     // let geoJson = originGeoJson;
     let useGeoJson = { type: 'FeatureCollection' };
@@ -83,9 +131,26 @@ export const FeatureAirZone = props => {
         arrGeoJson.push(item);
       } else if (item.properties.route) {
         arrGeoJson.push(item);
+
+        // 노선 별 좌표 저장
+        if (item.geometry.type === 'LineString') {
+          const route = item.properties.route;
+
+          if (uamRoutes[route]) {
+            item.geometry.coordinates.forEach(coord => {
+              const coordinates = { x: coord[0], y: coord[1] };
+              uamRoutes[route].push(coordinates);
+            });
+          }
+        }
       }
     });
 
+    const routeArrays = Object.values(uamRoutes);
+    routeArrays.forEach(routeArray => {
+      setUamCoordinates(prev => [...prev, routeArray]);
+    });
+
     useGeoJson.features = arrGeoJson;
     props.map.data.addGeoJson(useGeoJson);
 
@@ -93,8 +158,8 @@ export const FeatureAirZone = props => {
       var color;
       var wayPointIcon = {
         content:
-          '<div style="width: 15px; height: 15px; background-color: white; border: 1px solid black; border-radius: 50%;"></div>',
-        anchor: new naver.maps.Point(10, 5)
+          '<div style="width: 12px; height: 12px; background-color: white; border: 1px solid black; border-radius: 50%;"></div>',
+        anchor: new naver.maps.Point(7, 6)
       };
 
       //0001 비행금지구역 #FF3648
@@ -132,9 +197,7 @@ export const FeatureAirZone = props => {
         strokeColor: color,
         strokeWeight: name === '김포공항' ? 1 : route ? 3 : 0.7,
         icon: route ? wayPointIcon : null,
-        strokeStyle: route ? 'shortdash' : '',
-        strokeLineCap: route ? 'round' : '',
-        strokeLineJoin: route ? 'round' : ''
+        strokeStyle: route ? 'shortdash' : ''
       };
     });
 

src/modules/basis/flight/actions/basisFlightAction.ts

@@ -13,7 +13,9 @@ import {
   BasFlightAprovData,
   BasFlightScheduleList,
   weatherData,
-  resweatherData
+  resweatherData,
+  FlightUamBufferList,
+  FlightUamBufferRq
 } from '../models/basisFlightModel';
 
 // 공역 조회
@@ -129,6 +131,11 @@ const FLIGHT_SCHEDULE_SUCCESS =
 const FLIGHT_SCHEDULE_FAILURE =
   'basis/flight/schedule/list/FLIGHT_SCHEDULE_FAILURE';
 
+// 버퍼 좌표 가져오기
+const UAM_BUFFER_LIST_REQUEST = 'basis/flight/adex/BUFFER_LIST_REQUEST';
+const UAM_BUFFER_LIST_SUCCESS = 'basis/flight/adex/BUFFER_LIST_SUCCESS';
+const UAM_BUFFER_LIST_FAILURE = 'basis/flight/adex/BUFFER_LIST_FAILURE';
+
 export const SEARCH_AREA = createAsyncAction(
   FLIGHT_SEARCH_AREA_REQUEST,
   FLIGHT_SEARCH_AREA_SUCCESS,
@@ -280,6 +287,13 @@ export const FlightweatherAction = createAsyncAction(
   FLIGHT_WEATHER_FAILURE
 )<weatherData, resweatherData, AxiosError>();
 
+// UAM 버퍼 좌표 가져오기
+export const FLIGHT_UAM_BUFFER_LIST = createAsyncAction(
+  UAM_BUFFER_LIST_REQUEST,
+  UAM_BUFFER_LIST_SUCCESS,
+  UAM_BUFFER_LIST_FAILURE
+)<FlightUamBufferRq, FlightUamBufferList[], AxiosError>();
+
 const actions = {
   PUBLIC_AREA_LIST,
   // FLIGHT_PLAN_AREA,
@@ -305,7 +319,8 @@ const actions = {
   FLIGHT_APRV_PROC,
   SEARCH_AREA,
   FLIGHT_SCHEDULE_LIST,
-  FlightweatherAction
+  FlightweatherAction,
+  FLIGHT_UAM_BUFFER_LIST
 };
 
 export type FlightAction = ActionType<typeof actions>;

src/modules/basis/flight/apis/basisFlightApi.ts

@@ -6,6 +6,7 @@ import {
   FlightPlanAreaDataList,
   FlightPlanData,
   FlightPlanListRqData,
+  FlightUamBufferRq,
   weatherData
 } from '../models/basisFlightModel';
 
@@ -82,5 +83,8 @@ export const flightPlanAPI = {
   },
   scheduleList: async (date: string) => {
     return await axios.get(`api/bas/flight/schedule?searchDate=${date}`);
+  },
+  uamBufferList: async (data: FlightUamBufferRq) => {
+    return await axios.post('/api/bas/flight/adex/buffer', data);
   }
 };

src/modules/basis/flight/models/basisFlightModel.ts

@@ -21,6 +21,7 @@ export interface FlightState {
   selectGroup: SelectGroupData | undefined;
   listSelect: ListGroupData | undefined;
   aprvSelect: ListGroupData | undefined;
+  uamBufferList: FlightUamBufferList[] | undefined;
 }
 export interface weatherData {
   serviceKey: string;
@@ -243,6 +244,21 @@ export interface BasFlightScheduleData {
   list: [BasFlightScheduleList];
 }
 
+export interface FlightUamBufferRq {
+  buffer: number;
+  coordinates: {
+    x: number;
+    y: number;
+  }[];
+}
+
+export interface FlightUamBufferList {
+  x: number;
+  y: number;
+  m: number | string;
+  z: number | string;
+}
+
 export const initFlight = {
   weather: undefined,
   page: 1,
@@ -387,7 +403,8 @@ export const initFlight = {
   areaList: undefined,
   aprvList: undefined,
   aprvProc: undefined,
-  scheduleList: []
+  scheduleList: [],
+  uamBufferList: []
 };
 
 export const initFlightBas = {

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

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

src/modules/basis/flight/sagas/basisFlightSaga.ts

@@ -433,6 +433,31 @@ function* searchAreaSaga(
   }
 }
 
+// get uam buffer list
+function* uamBufferListSaga(
+  action: ActionType<typeof Actions.FLIGHT_UAM_BUFFER_LIST.request>
+) {
+  try {
+    const data = action.payload;
+    const response = yield call(Apis.flightPlanAPI.uamBufferList, data);
+    if (response.errorCode) {
+      yield put(
+        MessageActions.IS_ERROR({
+          errorCode: response.errorCode,
+          errorMessage: response.errorMessage,
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+      return;
+    }
+
+    yield put(Actions.FLIGHT_UAM_BUFFER_LIST.success(response));
+  } catch (error: any) {
+    yield put(Actions.FLIGHT_UAM_BUFFER_LIST.failure(error));
+  }
+}
+
 export function* flightSaga() {
   yield takeEvery(Actions.PUBLIC_AREA_LIST.request, listAreaSaga);
   // yield takeEvery(Actions.FLIGHT_PLAN_AREA.request, createFlightPlanArea);
@@ -449,4 +474,5 @@ export function* flightSaga() {
   yield takeEvery(Actions.SEARCH_AREA.request, searchAreaSaga);
   yield takeEvery(Actions.FLIGHT_SCHEDULE_LIST.request, scheduleListSaga);
   yield takeEvery(Actions.FlightweatherAction.request, WeatherSaga);
+  yield takeEvery(Actions.FLIGHT_UAM_BUFFER_LIST.request, uamBufferListSaga);
 }