|
|
@ -1,9 +1,16 @@ |
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
import { useSelector } from 'react-redux'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import '../../../../assets/css/custom.css'; |
|
|
|
import '../../../../assets/css/custom.css'; |
|
|
|
|
|
|
|
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
|
|
|
|
|
|
|
|
export const FeatureAirZone = props => { |
|
|
|
export const FeatureAirZone = props => { |
|
|
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
|
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
|
|
|
|
const { uamBufferList } = useSelector(state => state.flightState); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [uamCoordinates, setUamCoordinates] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
let infoWindow; |
|
|
|
let infoWindow; |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
@ -19,6 +26,38 @@ export const FeatureAirZone = props => { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, [props.poly]); |
|
|
|
}, [props.poly]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// uam 노선 buffer 가져오기
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (uamCoordinates.length > 0) { |
|
|
|
|
|
|
|
uamCoordinates.forEach(coordinates => { |
|
|
|
|
|
|
|
dispatch( |
|
|
|
|
|
|
|
Actions.FLIGHT_UAM_BUFFER_LIST.request({ |
|
|
|
|
|
|
|
buffer: 50, |
|
|
|
|
|
|
|
coordinates: coordinates |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, [uamCoordinates]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
let bufferPaths = []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
uamBufferList.forEach(coord => { |
|
|
|
|
|
|
|
const path = new naver.maps.LatLng(coord.y, coord.x); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
bufferPaths.push(path); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
new naver.maps.Polyline({ |
|
|
|
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
|
|
|
strokeStyle: [5, 5], |
|
|
|
|
|
|
|
path: bufferPaths, |
|
|
|
|
|
|
|
map: props.map |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}, [uamBufferList]); |
|
|
|
|
|
|
|
|
|
|
|
const infowindowOpen = data => { |
|
|
|
const infowindowOpen = data => { |
|
|
|
const content = |
|
|
|
const content = |
|
|
|
'<div class="tooltip-box">' + |
|
|
|
'<div class="tooltip-box">' + |
|
|
@ -61,6 +100,15 @@ export const FeatureAirZone = props => { |
|
|
|
|
|
|
|
|
|
|
|
const featureAirZoneInit = () => { |
|
|
|
const featureAirZoneInit = () => { |
|
|
|
let arrGeoJson = []; |
|
|
|
let arrGeoJson = []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const uamRoutes = { |
|
|
|
|
|
|
|
AR: [], |
|
|
|
|
|
|
|
HG01: [], |
|
|
|
|
|
|
|
HG02: [], |
|
|
|
|
|
|
|
HG03: [], |
|
|
|
|
|
|
|
TC: [] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// props.map.data.removeGeoJson(props.geoJson);
|
|
|
|
// props.map.data.removeGeoJson(props.geoJson);
|
|
|
|
// let geoJson = originGeoJson;
|
|
|
|
// let geoJson = originGeoJson;
|
|
|
|
let useGeoJson = { type: 'FeatureCollection' }; |
|
|
|
let useGeoJson = { type: 'FeatureCollection' }; |
|
|
@ -83,7 +131,24 @@ export const FeatureAirZone = props => { |
|
|
|
arrGeoJson.push(item); |
|
|
|
arrGeoJson.push(item); |
|
|
|
} else if (item.properties.route) { |
|
|
|
} else if (item.properties.route) { |
|
|
|
arrGeoJson.push(item); |
|
|
|
arrGeoJson.push(item); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 노선 별 좌표 저장
|
|
|
|
|
|
|
|
if (item.geometry.type === 'LineString') { |
|
|
|
|
|
|
|
const route = item.properties.route; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (uamRoutes[route]) { |
|
|
|
|
|
|
|
item.geometry.coordinates.forEach(coord => { |
|
|
|
|
|
|
|
const coordinates = { x: coord[0], y: coord[1] }; |
|
|
|
|
|
|
|
uamRoutes[route].push(coordinates); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const routeArrays = Object.values(uamRoutes); |
|
|
|
|
|
|
|
routeArrays.forEach(routeArray => { |
|
|
|
|
|
|
|
setUamCoordinates(prev => [...prev, routeArray]); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
useGeoJson.features = arrGeoJson; |
|
|
|
useGeoJson.features = arrGeoJson; |
|
|
@ -93,8 +158,8 @@ export const FeatureAirZone = props => { |
|
|
|
var color; |
|
|
|
var color; |
|
|
|
var wayPointIcon = { |
|
|
|
var wayPointIcon = { |
|
|
|
content: |
|
|
|
content: |
|
|
|
'<div style="width: 15px; height: 15px; background-color: white; border: 1px solid black; border-radius: 50%;"></div>', |
|
|
|
'<div style="width: 12px; height: 12px; background-color: white; border: 1px solid black; border-radius: 50%;"></div>', |
|
|
|
anchor: new naver.maps.Point(10, 5) |
|
|
|
anchor: new naver.maps.Point(7, 6) |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
//0001 비행금지구역 #FF3648
|
|
|
|
//0001 비행금지구역 #FF3648
|
|
|
@ -132,9 +197,7 @@ export const FeatureAirZone = props => { |
|
|
|
strokeColor: color, |
|
|
|
strokeColor: color, |
|
|
|
strokeWeight: name === '김포공항' ? 1 : route ? 3 : 0.7, |
|
|
|
strokeWeight: name === '김포공항' ? 1 : route ? 3 : 0.7, |
|
|
|
icon: route ? wayPointIcon : null, |
|
|
|
icon: route ? wayPointIcon : null, |
|
|
|
strokeStyle: route ? 'shortdash' : '', |
|
|
|
strokeStyle: route ? 'shortdash' : '' |
|
|
|
strokeLineCap: route ? 'round' : '', |
|
|
|
|
|
|
|
strokeLineJoin: route ? 'round' : '' |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|