|
|
|
|
@ -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; |
|
|
|
|
}; |
|
|
|
|
|
junh_eee(이준희)
9 months ago