From 52ef8b45bcd973b3b28626cd02d9cfd021de26d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Thu, 14 Dec 2023 17:59:39 +0900 Subject: [PATCH] =?UTF-8?q?=EB=93=9C=EB=A1=A0=EA=B5=90=ED=86=B5=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20uam=EB=85=B8=EC=84=A0,=20=EC=86=A1=EC=A0=84?= =?UTF-8?q?=ED=83=91=20=EC=A3=BC=EC=84=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/mapbox/feature/FeatureAirZone.js | 309 +++++++++--------- .../basis/flight/actions/basisFlightAction.ts | 28 +- .../basis/flight/apis/basisFlightApi.ts | 10 +- .../basis/flight/models/basisFlightModel.ts | 32 +- .../flight/reducers/basisFlightReducer.ts | 14 +- .../basis/flight/sagas/basisFlightSaga.ts | 48 +-- 6 files changed, 222 insertions(+), 219 deletions(-) diff --git a/src/components/map/mapbox/feature/FeatureAirZone.js b/src/components/map/mapbox/feature/FeatureAirZone.js index 5be4ca1..e872ac8 100644 --- a/src/components/map/mapbox/feature/FeatureAirZone.js +++ b/src/components/map/mapbox/feature/FeatureAirZone.js @@ -1,12 +1,12 @@ -import { useEffect, useState } from 'react'; -import * as turf from '@turf/turf'; -import geoJson from '../../geojson/airArea.json'; -import uamRouteArea from '../../geojson/uamRouteArea.json'; -import uamTowerArea from '../../geojson/uamTowerArea.json'; import '../../../../assets/css/custom.css'; +import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { FLIGHT_UAM_BUFFER_LIST } from '../../../../modules/basis/flight/actions/basisFlightAction'; -import towerImg from '../../../../assets/images/transmission_tower_icon.png'; +import geoJson from '../../geojson/airArea.json'; +import * as turf from '@turf/turf'; +// import { FLIGHT_UAM_BUFFER_LIST } from '../../../../modules/basis/flight/actions/basisFlightAction'; +// import towerImg from '../../../../assets/images/transmission_tower_icon.png'; +// import uamRouteArea from '../../geojson/uamRouteArea.json'; +// import uamTowerArea from '../../geojson/uamTowerArea.json'; // 격자 공역 Source const airPort = [ @@ -32,50 +32,50 @@ const airPort = [ export const FeatureAirZone = props => { const dispatch = useDispatch(); - const { uamBufferList } = useSelector(state => state.flightState); + // const { uamBufferList } = useSelector(state => state.flightState); - const [uamGeoJson, setUamGeoJson] = useState({ - ...uamRouteArea, - ...uamTowerArea, - features: [...uamRouteArea.features, ...uamTowerArea.features] - }); - const [number, setNumber] = useState(0); + // const [uamGeoJson, setUamGeoJson] = useState({ + // ...uamRouteArea, + // ...uamTowerArea, + // features: [...uamRouteArea.features, ...uamTowerArea.features] + // }); + // const [number, setNumber] = useState(0); let popup; useEffect(() => { featureAirZoneInit(); - uamAirAreaInit(); + // uamAirAreaInit(); }, []); // 얻은 버퍼 좌표로 버퍼 도형 생성 후 지도에 반영 - useEffect(() => { - if (uamBufferList.length > 0) { - const paths = []; - uamBufferList.map(buffer => { - const path = [buffer.x, buffer.y]; - paths.push(path); - }); - - const bufferObj = { - type: 'Feature', - geometry: { - type: 'LineString', - coordinates: paths - }, - properties: { - type: 'routeBuffer' - } - }; - - const obj = { - ...uamGeoJson, - features: [...uamGeoJson.features, bufferObj] - }; - setUamGeoJson(obj); - props.map.getSource('uam').setData(obj); - } - }, [uamBufferList]); + // useEffect(() => { + // if (uamBufferList.length > 0) { + // const paths = []; + // uamBufferList.map(buffer => { + // const path = [buffer.x, buffer.y]; + // paths.push(path); + // }); + + // const bufferObj = { + // type: 'Feature', + // geometry: { + // type: 'LineString', + // coordinates: paths + // }, + // properties: { + // type: 'routeBuffer' + // } + // }; + + // const obj = { + // ...uamGeoJson, + // features: [...uamGeoJson.features, bufferObj] + // }; + // setUamGeoJson(obj); + // props.map.getSource('uam').setData(obj); + // } + // }, [uamBufferList]); // 공역 정보 표출 window 생성 const infowindowOpen = data => { @@ -364,117 +364,120 @@ 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노선 버퍼 좌표 요청 - routeLine.forEach(coords => { - dispatch( - FLIGHT_UAM_BUFFER_LIST.request({ - buffer: 50, - coordinates: 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); - }; + // 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 bufferRequest = async coords => { + // await axios; + // }; + // routeLine.forEach(coords => { + // // dispatch( + // // FLIGHT_UAM_BUFFER_LIST.request({ + // // buffer: 50, + // // coordinates: 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; }; diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index 440b744..9eb3a0e 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -13,9 +13,9 @@ import { BasFlightAprovData, BasFlightScheduleList, weatherData, - resweatherData, - FlightUamBufferRq, - FlightUamBufferList + resweatherData + // FlightUamBufferRq, + // FlightUamBufferList } from '../models/basisFlightModel'; // 공역 조회 @@ -136,10 +136,10 @@ 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'; +// uam 버퍼 좌표 가져오기 +// 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, @@ -300,11 +300,11 @@ export const FlightweatherAction = createAsyncAction( )(); // UAM 버퍼 좌표 가져오기 -export const FLIGHT_UAM_BUFFER_LIST = createAsyncAction( - UAM_BUFFER_LIST_REQUEST, - UAM_BUFFER_LIST_SUCCESS, - UAM_BUFFER_LIST_FAILURE -)(); +// export const FLIGHT_UAM_BUFFER_LIST = createAsyncAction( +// UAM_BUFFER_LIST_REQUEST, +// UAM_BUFFER_LIST_SUCCESS, +// UAM_BUFFER_LIST_FAILURE +// )(); const actions = { PUBLIC_AREA_LIST, @@ -332,8 +332,8 @@ const actions = { SEARCH_AREA, FLIGHT_SCHEDULE_LIST, FlightweatherAction, - FLIGHT_PLAN_AREA_INAIRAREA, - FLIGHT_UAM_BUFFER_LIST + FLIGHT_PLAN_AREA_INAIRAREA + // 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 c437361..98caf89 100644 --- a/src/modules/basis/flight/apis/basisFlightApi.ts +++ b/src/modules/basis/flight/apis/basisFlightApi.ts @@ -6,7 +6,7 @@ import { FlightPlanAreaDataList, FlightPlanData, FlightPlanListRqData, - FlightUamBufferRq, + // FlightUamBufferRq, weatherData } from '../models/basisFlightModel'; @@ -88,9 +88,9 @@ export const flightPlanAPI = { inAirArea: async (data: FlightPlanAreaDataList) => { const res = await axios.post(`api/bas/flight/airspace/contains`, data); return res.data.result; - }, - - uamBufferList: async (data: FlightUamBufferRq) => { - return await axios.post('/api/bas/flight/adex/buffer', data); } + + // 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 b663795..d3c908e 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -22,7 +22,7 @@ export interface FlightState { listSelect: ListGroupData | undefined; aprvSelect: ListGroupData | undefined; inAirArea: boolean | undefined; - uamBufferList: FlightUamBufferList[] | undefined; + // uamBufferList: FlightUamBufferList[] | undefined; } export interface weatherData { serviceKey: string; @@ -245,20 +245,20 @@ export interface BasFlightScheduleData { list: [BasFlightScheduleList]; } -export interface FlightUamBufferRq { - buffer: number; - coordinates: { - x: number; - y: number; - }[]; -} +// export interface FlightUamBufferRq { +// buffer: number; +// coordinates: { +// x: number; +// y: number; +// }[]; +// } -export interface FlightUamBufferList { - x: number; - y: number; - m: number | string; - z: number | string; -} +// export interface FlightUamBufferList { +// x: number; +// y: number; +// m: number | string; +// z: number | string; +// } export const initFlight = { weather: undefined, @@ -405,8 +405,8 @@ export const initFlight = { areaList: undefined, aprvList: undefined, aprvProc: undefined, - scheduleList: [], - uamBufferList: [] + scheduleList: [] + // uamBufferList: [] }; export const initFlightBas = { diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index a305b47..a3c97f5 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -170,11 +170,11 @@ export const flightReducer = createReducer( const data = action.payload; draft.inAirArea = data; }) - ) - // uam 노선 버퍼 영역 조회 - .handleAction(Actions.FLIGHT_UAM_BUFFER_LIST.success, (state, action) => - produce(state, draft => { - const data = action.payload; - draft.uamBufferList = 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 5c5737f..7651a00 100644 --- a/src/modules/basis/flight/sagas/basisFlightSaga.ts +++ b/src/modules/basis/flight/sagas/basisFlightSaga.ts @@ -447,29 +447,29 @@ function* inAirAreaSaga( } // 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)); - } -} +// 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); @@ -488,5 +488,5 @@ export function* flightSaga() { yield takeEvery(Actions.FLIGHT_SCHEDULE_LIST.request, scheduleListSaga); yield takeEvery(Actions.FlightweatherAction.request, WeatherSaga); yield takeEvery(Actions.FLIGHT_PLAN_AREA_INAIRAREA.request, inAirAreaSaga); - yield takeEvery(Actions.FLIGHT_UAM_BUFFER_LIST.request, uamBufferListSaga); + // yield takeEvery(Actions.FLIGHT_UAM_BUFFER_LIST.request, uamBufferListSaga); }