pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

드론교통관리 uam노선, 송전탑 주석

pull/1/head
junh_eee(이준희) 9 months ago
parent
3c05e48a9a
commit
52ef8b45bc
6 changed files with 222 additions and 219 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 309
      src/components/map/mapbox/feature/FeatureAirZone.js
  2. 28
      src/modules/basis/flight/actions/basisFlightAction.ts
  3. 10
      src/modules/basis/flight/apis/basisFlightApi.ts
  4. 32
      src/modules/basis/flight/models/basisFlightModel.ts
  5. 14
      src/modules/basis/flight/reducers/basisFlightReducer.ts
  6. 48
      src/modules/basis/flight/sagas/basisFlightSaga.ts

309
src/components/map/mapbox/feature/FeatureAirZone.js
Unescape View File

@ -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 '../../../../assets/css/custom.css';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { FLIGHT_UAM_BUFFER_LIST } from '../../../../modules/basis/flight/actions/basisFlightAction'; import geoJson from '../../geojson/airArea.json';
import towerImg from '../../../../assets/images/transmission_tower_icon.png'; 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 // 격자 공역 Source
const airPort = [ const airPort = [
@ -32,50 +32,50 @@ const airPort = [
export const FeatureAirZone = props => { export const FeatureAirZone = props => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { uamBufferList } = useSelector(state => state.flightState); // const { uamBufferList } = useSelector(state => state.flightState);
const [uamGeoJson, setUamGeoJson] = useState({ // const [uamGeoJson, setUamGeoJson] = useState({
...uamRouteArea, // ...uamRouteArea,
...uamTowerArea, // ...uamTowerArea,
features: [...uamRouteArea.features, ...uamTowerArea.features] // features: [...uamRouteArea.features, ...uamTowerArea.features]
}); // });
const [number, setNumber] = useState(0); // const [number, setNumber] = useState(0);
let popup; let popup;
useEffect(() => { useEffect(() => {
featureAirZoneInit(); featureAirZoneInit();
uamAirAreaInit(); // uamAirAreaInit();
}, []); }, []);
// 얻은 버퍼 좌표로 버퍼 도형 생성 후 지도에 반영 // 얻은 버퍼 좌표로 버퍼 도형 생성 후 지도에 반영
useEffect(() => { // useEffect(() => {
if (uamBufferList.length > 0) { // if (uamBufferList.length > 0) {
const paths = []; // const paths = [];
uamBufferList.map(buffer => { // uamBufferList.map(buffer => {
const path = [buffer.x, buffer.y]; // const path = [buffer.x, buffer.y];
paths.push(path); // paths.push(path);
}); // });
const bufferObj = { // const bufferObj = {
type: 'Feature', // type: 'Feature',
geometry: { // geometry: {
type: 'LineString', // type: 'LineString',
coordinates: paths // coordinates: paths
}, // },
properties: { // properties: {
type: 'routeBuffer' // type: 'routeBuffer'
} // }
}; // };
const obj = { // const obj = {
...uamGeoJson, // ...uamGeoJson,
features: [...uamGeoJson.features, bufferObj] // features: [...uamGeoJson.features, bufferObj]
}; // };
setUamGeoJson(obj); // setUamGeoJson(obj);
props.map.getSource('uam').setData(obj); // props.map.getSource('uam').setData(obj);
} // }
}, [uamBufferList]); // }, [uamBufferList]);
// 공역 정보 표출 window 생성 // 공역 정보 표출 window 생성
const infowindowOpen = data => { const infowindowOpen = data => {
@ -364,117 +364,120 @@ export const FeatureAirZone = props => {
}; };
// uam 셋팅 함수 // uam 셋팅 함수
const uamAirAreaInit = () => { // const uamAirAreaInit = () => {
if (number === 0) { // if (number === 0) {
// uam노선 features // // uam노선 features
const routeFeatures = uamRouteArea.features; // const routeFeatures = uamRouteArea.features;
// [경도, 위도] -> [{x: 경도, y: 위도}] 포맷팅 // // [경도, 위도] -> [{x: 경도, y: 위도}] 포맷팅
const routeLine = routeFeatures // const routeLine = routeFeatures
.filter(route => route.geometry.type === 'LineString') // .filter(route => route.geometry.type === 'LineString')
.map(line => { // .map(line => {
return line.geometry.coordinates.map(p => { // return line.geometry.coordinates.map(p => {
return { x: p[0], y: p[1] }; // return { x: p[0], y: p[1] };
}); // });
}); // });
// uam노선 버퍼 좌표 요청 // // uam노선 버퍼 좌표 요청
routeLine.forEach(coords => { // const bufferRequest = async coords => {
dispatch( // await axios;
FLIGHT_UAM_BUFFER_LIST.request({ // };
buffer: 50, // routeLine.forEach(coords => {
coordinates: coords // // dispatch(
}) // // FLIGHT_UAM_BUFFER_LIST.request({
); // // buffer: 50,
}); // // coordinates: coords
// // })
// 송전선 features // // );
const towerFeatures = uamTowerArea.features; // });
// 송전탑 마커 생성 // // 송전선 features
towerFeatures // const towerFeatures = uamTowerArea.features;
.filter(tower => tower.properties.type === 'towerPoint')
.map((point, idx) => { // // 송전탑 마커 생성
const el = document.createElement('img'); // towerFeatures
el.id = `tower${idx}`; // .filter(tower => tower.properties.type === 'towerPoint')
el.src = towerImg; // .map((point, idx) => {
el.style.width = '20px'; // const el = document.createElement('img');
el.style.height = '20px'; // el.id = `tower${idx}`;
// el.src = towerImg;
new props.mapboxgl.Marker({ // el.style.width = '20px';
element: el // el.style.height = '20px';
})
.setLngLat( // new props.mapboxgl.Marker({
props.mapboxgl.LngLat.convert(point.geometry.coordinates) // element: el
) // })
.addTo(props.map); // .setLngLat(
}); // props.mapboxgl.LngLat.convert(point.geometry.coordinates)
// )
// uam 관련 Source, Layer // .addTo(props.map);
props.map.addSource('uam', { // });
type: 'geojson',
data: uamGeoJson // // uam 관련 Source, Layer
}); // props.map.addSource('uam', {
props.map.addLayer({ // type: 'geojson',
id: 'routeLine', // data: uamGeoJson
type: 'line', // });
source: 'uam', // props.map.addLayer({
layout: { // id: 'routeLine',
'line-cap': 'butt', // type: 'line',
'line-join': 'round' // source: 'uam',
}, // layout: {
paint: { // 'line-cap': 'butt',
'line-color': '#FF1493', // 'line-join': 'round'
'line-width': 3, // },
'line-dasharray': [1, 1] // paint: {
}, // 'line-color': '#FF1493',
filter: ['==', ['get', 'type'], 'routeLine'] // 'line-width': 3,
}); // 'line-dasharray': [1, 1]
props.map.addLayer({ // },
id: 'routeBuffer', // filter: ['==', ['get', 'type'], 'routeLine']
type: 'line', // });
source: 'uam', // props.map.addLayer({
layout: { // id: 'routeBuffer',
'line-cap': 'round', // type: 'line',
'line-join': 'round' // source: 'uam',
}, // layout: {
paint: { // 'line-cap': 'round',
'line-color': '#000000', // 'line-join': 'round'
'line-width': 1, // },
'line-dasharray': [3, 3] // paint: {
}, // 'line-color': '#000000',
filter: ['==', ['get', 'type'], 'routeBuffer'] // 'line-width': 1,
}); // 'line-dasharray': [3, 3]
props.map.addLayer({ // },
id: 'routePoint', // filter: ['==', ['get', 'type'], 'routeBuffer']
type: 'circle', // });
source: 'uam', // props.map.addLayer({
paint: { // id: 'routePoint',
'circle-radius': 5, // type: 'circle',
'circle-color': '#ffffff', // source: 'uam',
'circle-stroke-color': '#000000', // paint: {
'circle-stroke-width': 1 // 'circle-radius': 5,
}, // 'circle-color': '#ffffff',
filter: ['==', ['get', 'type'], 'routePoint'] // 'circle-stroke-color': '#000000',
}); // 'circle-stroke-width': 1
props.map.addLayer({ // },
id: 'towerLine', // filter: ['==', ['get', 'type'], 'routePoint']
type: 'line', // });
source: 'uam', // props.map.addLayer({
layout: { // id: 'towerLine',
'line-cap': 'round', // type: 'line',
'line-join': 'round' // source: 'uam',
}, // layout: {
paint: { // 'line-cap': 'round',
'line-color': '#960018', // 'line-join': 'round'
'line-width': 1 // },
}, // paint: {
filter: ['==', ['get', 'type'], 'towerLine'] // 'line-color': '#960018',
}); // 'line-width': 1
} // },
// filter: ['==', ['get', 'type'], 'towerLine']
setNumber(number + 1); // });
}; // }
// setNumber(number + 1);
// };
return null; return null;
}; };

28
src/modules/basis/flight/actions/basisFlightAction.ts
Unescape View File

@ -13,9 +13,9 @@ import {
BasFlightAprovData, BasFlightAprovData,
BasFlightScheduleList, BasFlightScheduleList,
weatherData, weatherData,
resweatherData, resweatherData
FlightUamBufferRq, // FlightUamBufferRq,
FlightUamBufferList // FlightUamBufferList
} from '../models/basisFlightModel'; } from '../models/basisFlightModel';
// 공역 조회 // 공역 조회
@ -136,10 +136,10 @@ const FLIGHT_SCHEDULE_SUCCESS =
const FLIGHT_SCHEDULE_FAILURE = const FLIGHT_SCHEDULE_FAILURE =
'basis/flight/schedule/list/FLIGHT_SCHEDULE_FAILURE'; 'basis/flight/schedule/list/FLIGHT_SCHEDULE_FAILURE';
// 버퍼 좌표 가져오기 // uam 버퍼 좌표 가져오기
const UAM_BUFFER_LIST_REQUEST = 'basis/flight/adex/BUFFER_LIST_REQUEST'; // 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_SUCCESS = 'basis/flight/adex/BUFFER_LIST_SUCCESS';
const UAM_BUFFER_LIST_FAILURE = 'basis/flight/adex/BUFFER_LIST_FAILURE'; // const UAM_BUFFER_LIST_FAILURE = 'basis/flight/adex/BUFFER_LIST_FAILURE';
export const SEARCH_AREA = createAsyncAction( export const SEARCH_AREA = createAsyncAction(
FLIGHT_SEARCH_AREA_REQUEST, FLIGHT_SEARCH_AREA_REQUEST,
@ -300,11 +300,11 @@ export const FlightweatherAction = createAsyncAction(
)<weatherData, resweatherData, AxiosError>(); )<weatherData, resweatherData, AxiosError>();
// UAM 버퍼 좌표 가져오기 // UAM 버퍼 좌표 가져오기
export const FLIGHT_UAM_BUFFER_LIST = createAsyncAction( // export const FLIGHT_UAM_BUFFER_LIST = createAsyncAction(
UAM_BUFFER_LIST_REQUEST, // UAM_BUFFER_LIST_REQUEST,
UAM_BUFFER_LIST_SUCCESS, // UAM_BUFFER_LIST_SUCCESS,
UAM_BUFFER_LIST_FAILURE // UAM_BUFFER_LIST_FAILURE
)<FlightUamBufferRq, FlightUamBufferList[], AxiosError>(); // )<FlightUamBufferRq, FlightUamBufferList[], AxiosError>();
const actions = { const actions = {
PUBLIC_AREA_LIST, PUBLIC_AREA_LIST,
@ -332,8 +332,8 @@ const actions = {
SEARCH_AREA, SEARCH_AREA,
FLIGHT_SCHEDULE_LIST, FLIGHT_SCHEDULE_LIST,
FlightweatherAction, FlightweatherAction,
FLIGHT_PLAN_AREA_INAIRAREA, FLIGHT_PLAN_AREA_INAIRAREA
FLIGHT_UAM_BUFFER_LIST // FLIGHT_UAM_BUFFER_LIST
}; };
export type FlightAction = ActionType<typeof actions>; export type FlightAction = ActionType<typeof actions>;

10
src/modules/basis/flight/apis/basisFlightApi.ts
Unescape View File

@ -6,7 +6,7 @@ import {
FlightPlanAreaDataList, FlightPlanAreaDataList,
FlightPlanData, FlightPlanData,
FlightPlanListRqData, FlightPlanListRqData,
FlightUamBufferRq, // FlightUamBufferRq,
weatherData weatherData
} from '../models/basisFlightModel'; } from '../models/basisFlightModel';
@ -88,9 +88,9 @@ export const flightPlanAPI = {
inAirArea: async (data: FlightPlanAreaDataList) => { inAirArea: async (data: FlightPlanAreaDataList) => {
const res = await axios.post(`api/bas/flight/airspace/contains`, data); const res = await axios.post(`api/bas/flight/airspace/contains`, data);
return res.data.result; 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);
// }
}; };

32
src/modules/basis/flight/models/basisFlightModel.ts
Unescape View File

@ -22,7 +22,7 @@ export interface FlightState {
listSelect: ListGroupData | undefined; listSelect: ListGroupData | undefined;
aprvSelect: ListGroupData | undefined; aprvSelect: ListGroupData | undefined;
inAirArea: boolean | undefined; inAirArea: boolean | undefined;
uamBufferList: FlightUamBufferList[] | undefined; // uamBufferList: FlightUamBufferList[] | undefined;
} }
export interface weatherData { export interface weatherData {
serviceKey: string; serviceKey: string;
@ -245,20 +245,20 @@ export interface BasFlightScheduleData {
list: [BasFlightScheduleList]; list: [BasFlightScheduleList];
} }
export interface FlightUamBufferRq { // export interface FlightUamBufferRq {
buffer: number; // buffer: number;
coordinates: { // coordinates: {
x: number; // x: number;
y: number; // y: number;
}[]; // }[];
} // }
export interface FlightUamBufferList { // export interface FlightUamBufferList {
x: number; // x: number;
y: number; // y: number;
m: number | string; // m: number | string;
z: number | string; // z: number | string;
} // }
export const initFlight = { export const initFlight = {
weather: undefined, weather: undefined,
@ -405,8 +405,8 @@ export const initFlight = {
areaList: undefined, areaList: undefined,
aprvList: undefined, aprvList: undefined,
aprvProc: undefined, aprvProc: undefined,
scheduleList: [], scheduleList: []
uamBufferList: [] // uamBufferList: []
}; };
export const initFlightBas = { export const initFlightBas = {

14
src/modules/basis/flight/reducers/basisFlightReducer.ts
Unescape View File

@ -170,11 +170,11 @@ export const flightReducer = createReducer<FlightState, Actions.FlightAction>(
const data = action.payload; const data = action.payload;
draft.inAirArea = data; 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;
// })
// );

48
src/modules/basis/flight/sagas/basisFlightSaga.ts
Unescape View File

@ -447,29 +447,29 @@ function* inAirAreaSaga(
} }
// get uam buffer list // get uam buffer list
function* uamBufferListSaga( // function* uamBufferListSaga(
action: ActionType<typeof Actions.FLIGHT_UAM_BUFFER_LIST.request> // action: ActionType<typeof Actions.FLIGHT_UAM_BUFFER_LIST.request>
) { // ) {
try { // try {
const data = action.payload; // const data = action.payload;
const response = yield call(Apis.flightPlanAPI.uamBufferList, data); // const response = yield call(Apis.flightPlanAPI.uamBufferList, data);
if (response.errorCode) { // if (response.errorCode) {
yield put( // yield put(
MessageActions.IS_ERROR({ // MessageActions.IS_ERROR({
errorCode: response.errorCode, // errorCode: response.errorCode,
errorMessage: response.errorMessage, // errorMessage: response.errorMessage,
isHistoryBack: false, // isHistoryBack: false,
isRefresh: false // isRefresh: false
}) // })
); // );
return; // return;
} // }
yield put(Actions.FLIGHT_UAM_BUFFER_LIST.success(response)); // yield put(Actions.FLIGHT_UAM_BUFFER_LIST.success(response));
} catch (error: any) { // } catch (error: any) {
yield put(Actions.FLIGHT_UAM_BUFFER_LIST.failure(error)); // yield put(Actions.FLIGHT_UAM_BUFFER_LIST.failure(error));
} // }
} // }
export function* flightSaga() { export function* flightSaga() {
yield takeEvery(Actions.PUBLIC_AREA_LIST.request, listAreaSaga); 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.FLIGHT_SCHEDULE_LIST.request, scheduleListSaga);
yield takeEvery(Actions.FlightweatherAction.request, WeatherSaga); yield takeEvery(Actions.FlightweatherAction.request, WeatherSaga);
yield takeEvery(Actions.FLIGHT_PLAN_AREA_INAIRAREA.request, inAirAreaSaga); 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);
} }

Write Preview
Loading…
Cancel
Save