pav
/
pav-fe-kac-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
52ef8b45bc
commit
0ba565ef99
2 changed files with 157 additions and 156 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 311
      src/components/map/mapbox/feature/FeatureAirZone.js

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

@ -1,12 +1,11 @@
import '../../../../assets/css/custom.css';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
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';
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';
// 격자 공역 Source
const airPort = [
@ -31,51 +30,33 @@ const airPort = [
];
export const FeatureAirZone = props => {
const dispatch = useDispatch();
// const { uamBufferList } = useSelector(state => state.flightState);
const [bufferGeoJson, setBufferGeoJson] = useState();
const [uamGeoJson, setUamGeoJson] = useState({
...uamRouteArea,
...uamTowerArea,
features: [...uamRouteArea.features, ...uamTowerArea.features]
});
// const [uamGeoJson, setUamGeoJson] = useState({
// ...uamRouteArea,
// ...uamTowerArea,
// features: [...uamRouteArea.features, ...uamTowerArea.features]
// });
// const [number, setNumber] = useState(0);
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 (bufferGeoJson) {
const obj = {
...uamGeoJson,
features: [...uamGeoJson.features, bufferGeoJson]
};
setUamGeoJson(obj);
props.map.getSource('uam').setData(obj);
}
}, [bufferGeoJson]);
// 공역 정보 표출 window 생성
const infowindowOpen = data => {
@ -364,120 +345,140 @@ 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 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);
// };
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;
};

Write Preview
Loading…
Cancel
Save