|
|
|
@ -34,7 +34,9 @@ import {
|
|
|
|
|
Table |
|
|
|
|
} from '@component/ui'; |
|
|
|
|
import { FiUsers, FiFileText } from 'react-icons/fi'; |
|
|
|
|
|
|
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
|
|
|
|
|
|
export default function OperationApprovalsContainer({ mode }) { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
@ -45,6 +47,7 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
// 비행구역 그리기
|
|
|
|
|
|
|
|
|
|
const [filter, setFilter] = useState(''); |
|
|
|
|
|
|
|
|
|
// 지도
|
|
|
|
|
const [mapObject, setMapObject] = useState(); |
|
|
|
|
const [setMapType] = useMapType(); |
|
|
|
@ -77,7 +80,8 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
// 비행구역 데이터블록
|
|
|
|
|
const [dataBlocks, setDataBlocks] = useState([]); |
|
|
|
|
|
|
|
|
|
const previewGeo2 = { |
|
|
|
|
// 비행구역 (운항과) 레이어
|
|
|
|
|
const operationLayer = { |
|
|
|
|
type: 'FeatureCollection', |
|
|
|
|
features: [] |
|
|
|
|
}; |
|
|
|
@ -95,7 +99,7 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (areaCoordList.length !== 0) { |
|
|
|
|
handlerPreviewDraw(); |
|
|
|
|
handlerAreaDraw(); |
|
|
|
|
} |
|
|
|
|
}, [areaCoordList]); |
|
|
|
|
|
|
|
|
@ -276,9 +280,13 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerDetail = area => { |
|
|
|
|
setSelected(area.planAreaSno); |
|
|
|
|
if (area.length === 1) { |
|
|
|
|
setSelected(area[0].planAreaSno); |
|
|
|
|
} else { |
|
|
|
|
setSelected(null); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
dispatch(clientSaveAreaCoordinateList([area])); |
|
|
|
|
dispatch(clientSaveAreaCoordinateList(area)); |
|
|
|
|
|
|
|
|
|
handlerMapInit(); |
|
|
|
|
}; |
|
|
|
@ -290,7 +298,7 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
} else { |
|
|
|
|
mapInstance.addSource('preview', { |
|
|
|
|
type: 'geojson', |
|
|
|
|
data: previewGeo2 |
|
|
|
|
data: operationLayer |
|
|
|
|
}); |
|
|
|
|
mapInstance.addLayer(flightlayerWayPoint('preview')); |
|
|
|
|
mapInstance.addLayer(flightlayerBuffer('preview')); |
|
|
|
@ -310,50 +318,58 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
dispatch(clientMapInit(mapInstance)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerPreviewDraw = () => { |
|
|
|
|
// 더보기 펼친게 두개(A,B)인 상황에서
|
|
|
|
|
// A의 1번에 포커스 잡혀있다가 B의 1을 클릭하면
|
|
|
|
|
// B구역이 안그려지고(A구역은 그대로) 포커스만 잡히는 에러 고치기
|
|
|
|
|
const handlerAreaDraw = () => { |
|
|
|
|
if (areaCoordList.length > 0) { |
|
|
|
|
const areas = areaCoordList[0]; |
|
|
|
|
|
|
|
|
|
previewGeo2.features = []; |
|
|
|
|
|
|
|
|
|
operationLayer.features = []; |
|
|
|
|
let fitZoomPaths = []; |
|
|
|
|
const radius = areas.bufferZone; |
|
|
|
|
|
|
|
|
|
areaCoordList.map((area, idx) => { |
|
|
|
|
const radius = area.bufferZone; |
|
|
|
|
const circleCoords = handlerGetCircleCoord( |
|
|
|
|
[areas.lon, areas.lat], |
|
|
|
|
[area.lon, area.lat], |
|
|
|
|
radius |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const circle = InitFeature('Polygon', 'CIRCLE'); |
|
|
|
|
circle.properties.center = [areas.lon, areas.lat]; |
|
|
|
|
circle.properties.center = [area.lon, area.lat]; |
|
|
|
|
circle.geometry.coordinates = circleCoords; |
|
|
|
|
|
|
|
|
|
previewGeo2.features.push(circle); |
|
|
|
|
|
|
|
|
|
mapObject?.setCenter(circle.properties.center); |
|
|
|
|
|
|
|
|
|
fitZoomPaths = circleCoords[0]; |
|
|
|
|
operationLayer.features.push(circle); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
handlerFitBounds(mapObject, fitZoomPaths, 400, 'CIRCLE', 'flight'); |
|
|
|
|
const features = turf.featureCollection([]); |
|
|
|
|
operationLayer.features.map(circle => { |
|
|
|
|
features.features.push(circle); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
|
|
|
|
|
mapObject?.getSource('preview').setData(previewGeo2); |
|
|
|
|
const enveloped = turf.envelope(features); |
|
|
|
|
fitZoomPaths = enveloped.geometry.coordinates[0]; |
|
|
|
|
handlerFitBounds(mapObject, fitZoomPaths, 400, 'POLYGON', 'flight'); |
|
|
|
|
|
|
|
|
|
if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) { |
|
|
|
|
handlerInfoWindow(areaCoordList); |
|
|
|
|
mapObject?.getSource('preview').setData(operationLayer); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerInfoWindow = data => { |
|
|
|
|
// 데이터블록 표출 이벤트
|
|
|
|
|
const handlerInfoWindow = areaList => { |
|
|
|
|
console.log(areaList, '====areaList'); |
|
|
|
|
if (dataBlocks.length > 0) { |
|
|
|
|
dataBlocks?.map(block => { |
|
|
|
|
block.remove(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
data.map((apply, idx) => { |
|
|
|
|
areaList.map((data, idx) => { |
|
|
|
|
const divCd = |
|
|
|
|
apply.fltElevMax === 120 |
|
|
|
|
data.fltElevMax === 120 |
|
|
|
|
? '원추' |
|
|
|
|
: apply.fltElevMax > 45 && apply.fltElevMax < 100 |
|
|
|
|
: data.fltElevMax > 45 && data.fltElevMax < 100 |
|
|
|
|
? '수평' |
|
|
|
|
: '-'; |
|
|
|
|
|
|
|
|
@ -361,7 +377,7 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
'<div class="tooltip-box">' + |
|
|
|
|
'<div class="tooltip-ti">' + |
|
|
|
|
'<span>' + |
|
|
|
|
apply?.applyNo + |
|
|
|
|
data?.applyNo + |
|
|
|
|
'</span>' + |
|
|
|
|
'</div>' + |
|
|
|
|
'<div class="tooltip-txt">' + |
|
|
|
@ -385,7 +401,7 @@ export default function OperationApprovalsContainer({ mode }) {
|
|
|
|
|
closeOnClick: false, |
|
|
|
|
closeOnMove: false |
|
|
|
|
}) |
|
|
|
|
.setLngLat({ lng: apply?.lon, lat: apply?.lat }) |
|
|
|
|
.setLngLat({ lng: data?.lon, lat: data?.lat }) |
|
|
|
|
.setHTML(content) |
|
|
|
|
.addTo(mapObject); |
|
|
|
|
|
|
|
|
|