|
|
|
|
@ -1,12 +1,7 @@
|
|
|
|
|
import '../../../../assets/css/custom.css'; |
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { useEffect } from 'react'; |
|
|
|
|
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 = [ |
|
|
|
|
@ -31,52 +26,12 @@ const airPort = [
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
export const FeatureAirZone = props => { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
// const { uamBufferList } = useSelector(state => state.flightState);
|
|
|
|
|
|
|
|
|
|
// const [uamGeoJson, setUamGeoJson] = useState({
|
|
|
|
|
// ...uamRouteArea,
|
|
|
|
|
// ...uamTowerArea,
|
|
|
|
|
// features: [...uamRouteArea.features, ...uamTowerArea.features]
|
|
|
|
|
// });
|
|
|
|
|
// const [number, setNumber] = useState(0);
|
|
|
|
|
|
|
|
|
|
let popup; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
featureAirZoneInit(); |
|
|
|
|
// 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]);
|
|
|
|
|
|
|
|
|
|
// 공역 정보 표출 window 생성
|
|
|
|
|
const infowindowOpen = data => { |
|
|
|
|
const content = |
|
|
|
|
@ -363,121 +318,5 @@ 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);
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
return null; |
|
|
|
|
}; |
|
|
|
|
|
junh_eee(이준희)
9 months ago