|
|
|
@ -1,4 +1,11 @@
|
|
|
|
|
import '../../../../assets/css/custom.css'; |
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import geoJson from '../../geojson/airArea.json'; |
|
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
|
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'; |
|
|
|
|
import { useEffect } from 'react'; |
|
|
|
|
import geoJson from '../../geojson/airArea.json'; |
|
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
@ -26,12 +33,34 @@ const airPort = [
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
export const FeatureAirZone = props => { |
|
|
|
|
const [bufferGeoJson, setBufferGeoJson] = useState(); |
|
|
|
|
const [uamGeoJson, setUamGeoJson] = useState({ |
|
|
|
|
...uamRouteArea, |
|
|
|
|
...uamTowerArea, |
|
|
|
|
features: [...uamRouteArea.features, ...uamTowerArea.features] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const [number, setNumber] = useState(0); |
|
|
|
|
|
|
|
|
|
let popup; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
featureAirZoneInit(); |
|
|
|
|
uamAirAreaInit(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
// 얻은 버퍼 좌표로 버퍼 도형 생성 후 지도에 반영
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (bufferGeoJson) { |
|
|
|
|
const obj = { |
|
|
|
|
...uamGeoJson, |
|
|
|
|
features: [...uamGeoJson.features, bufferGeoJson] |
|
|
|
|
}; |
|
|
|
|
setUamGeoJson(obj); |
|
|
|
|
props.map.getSource('uam').setData(obj); |
|
|
|
|
} |
|
|
|
|
}, [bufferGeoJson]); |
|
|
|
|
|
|
|
|
|
// 공역 정보 표출 window 생성
|
|
|
|
|
const infowindowOpen = data => { |
|
|
|
|
const content = |
|
|
|
@ -318,5 +347,141 @@ 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 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; |
|
|
|
|
}; |
|
|
|
|