diff --git a/src/components/map/geojson/uamAirArea.json b/src/components/map/geojson/uamAirArea.json index 1963f55..c26d4fc 100644 --- a/src/components/map/geojson/uamAirArea.json +++ b/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" } }, { diff --git a/src/components/map/naver/feature/FeatureAirZone.js b/src/components/map/naver/feature/FeatureAirZone.js index f5a2d52..4b6de22 100644 --- a/src/components/map/naver/feature/FeatureAirZone.js +++ b/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 = '
' + @@ -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: - '
', - anchor: new naver.maps.Point(10, 5) + '
', + 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' : '' }; }); diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index a359199..e8a3a61 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/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 )(); +// UAM 버퍼 좌표 가져오기 +export const FLIGHT_UAM_BUFFER_LIST = createAsyncAction( + UAM_BUFFER_LIST_REQUEST, + UAM_BUFFER_LIST_SUCCESS, + UAM_BUFFER_LIST_FAILURE +)(); + 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; diff --git a/src/modules/basis/flight/apis/basisFlightApi.ts b/src/modules/basis/flight/apis/basisFlightApi.ts index a9a1bfb..3156fbe 100644 --- a/src/modules/basis/flight/apis/basisFlightApi.ts +++ b/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); } }; diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index 52a8f94..3449a4d 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/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 = { diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 3f5a3a0..5d3afa6 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -163,4 +163,11 @@ export const flightReducer = createReducer( 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; + }) ); diff --git a/src/modules/basis/flight/sagas/basisFlightSaga.ts b/src/modules/basis/flight/sagas/basisFlightSaga.ts index 4cc5693..6d5cc76 100644 --- a/src/modules/basis/flight/sagas/basisFlightSaga.ts +++ b/src/modules/basis/flight/sagas/basisFlightSaga.ts @@ -433,6 +433,31 @@ function* searchAreaSaga( } } +// get uam buffer list +function* uamBufferListSaga( + action: ActionType +) { + 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); }