|
|
|
@ -20,7 +20,11 @@ import {
|
|
|
|
|
InitFeature, |
|
|
|
|
handlerCreatePoint, |
|
|
|
|
handlerFitBounds, |
|
|
|
|
handlerGetCircleCoord |
|
|
|
|
handlerGetCircleCoord, |
|
|
|
|
layerPolyline, |
|
|
|
|
layerPolygon, |
|
|
|
|
layerBuffer, |
|
|
|
|
layerWayPoint |
|
|
|
|
} from '../../utility/MapUtils'; |
|
|
|
|
import { MapControl } from '../../components/map/MapControl'; |
|
|
|
|
import { clientSetIsMapLoading } from '@src/redux/features/laanc/laancSlice'; |
|
|
|
@ -32,7 +36,7 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
|
|
|
|
|
// 오른쪽 사이드 메뉴 표출 여부
|
|
|
|
|
const [openSetting, setOpenSetting] = useState(true); |
|
|
|
|
const [data, setData] = useState([ |
|
|
|
|
const [res, setRes] = useState([ |
|
|
|
|
{ |
|
|
|
|
planSno: '321', |
|
|
|
|
complaint: '15000', |
|
|
|
@ -176,7 +180,7 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
const [areaCoordList, setAreaCoordList] = useState([]); |
|
|
|
|
|
|
|
|
|
const map = useSelector(state => state.mapState.map); |
|
|
|
|
const previewGeo = { |
|
|
|
|
const previewGeo2 = { |
|
|
|
|
type: 'FeatureCollection', |
|
|
|
|
features: [] |
|
|
|
|
}; |
|
|
|
@ -214,117 +218,34 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
}, [map]); |
|
|
|
|
|
|
|
|
|
const handlerMapInit = () => { |
|
|
|
|
mapboxgl.accessToken = MAPBOX_TOKEN; |
|
|
|
|
|
|
|
|
|
// 비행구역 상세맵 draw 정보 셋팅
|
|
|
|
|
const draw = new MapboxDraw({ |
|
|
|
|
displayControlsDefault: false, |
|
|
|
|
userProperties: true, |
|
|
|
|
boxSelect: false, |
|
|
|
|
modes: { |
|
|
|
|
...MapboxDraw.modes, |
|
|
|
|
draw_circle: CircleMode, |
|
|
|
|
drag_circle: DragCircleMode, |
|
|
|
|
direct_select: DirectMode, |
|
|
|
|
simple_select: SimpleSelectMode |
|
|
|
|
}, |
|
|
|
|
styles: [ |
|
|
|
|
{ |
|
|
|
|
// polyline
|
|
|
|
|
id: 'gl-draw-line', |
|
|
|
|
type: 'line', |
|
|
|
|
filter: [ |
|
|
|
|
'all', |
|
|
|
|
['==', '$type', 'LineString'], |
|
|
|
|
['!=', 'mode', 'static'] |
|
|
|
|
], |
|
|
|
|
layout: { |
|
|
|
|
'line-cap': 'round', |
|
|
|
|
'line-join': 'round' |
|
|
|
|
}, |
|
|
|
|
paint: { |
|
|
|
|
'line-color': '#8a1c05', |
|
|
|
|
'line-dasharray': [0.2, 2], |
|
|
|
|
'line-width': 2 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
// polygon fill
|
|
|
|
|
id: 'gl-draw-polygon-fill', |
|
|
|
|
type: 'fill', |
|
|
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], |
|
|
|
|
paint: { |
|
|
|
|
'fill-color': '#8a1c05', |
|
|
|
|
'fill-outline-color': '#8a1c05', |
|
|
|
|
'fill-opacity': 0.1 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// polygon outline
|
|
|
|
|
{ |
|
|
|
|
id: 'gl-draw-polygon-stroke-active', |
|
|
|
|
type: 'line', |
|
|
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], |
|
|
|
|
layout: { |
|
|
|
|
'line-cap': 'round', |
|
|
|
|
'line-join': 'round' |
|
|
|
|
}, |
|
|
|
|
paint: { |
|
|
|
|
'line-color': '#8a1c05', |
|
|
|
|
'line-dasharray': [0.2, 2], |
|
|
|
|
'line-width': 2 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
// vertex point halos
|
|
|
|
|
id: 'gl-draw-polygon-and-line-vertex-halo-active', |
|
|
|
|
type: 'circle', |
|
|
|
|
filter: [ |
|
|
|
|
'all', |
|
|
|
|
['==', 'meta', 'vertex'], |
|
|
|
|
['==', '$type', 'Point'], |
|
|
|
|
['!=', 'mode', 'static'] |
|
|
|
|
], |
|
|
|
|
paint: { |
|
|
|
|
'circle-radius': 8, |
|
|
|
|
'circle-color': '#ffffff' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
// vertex points
|
|
|
|
|
id: 'gl-draw-polygon-and-line-vertex-active', |
|
|
|
|
type: 'circle', |
|
|
|
|
filter: [ |
|
|
|
|
'all', |
|
|
|
|
['==', 'meta', 'vertex'], |
|
|
|
|
['==', '$type', 'Point'], |
|
|
|
|
['!=', 'mode', 'static'] |
|
|
|
|
], |
|
|
|
|
paint: { |
|
|
|
|
'circle-radius': 6, |
|
|
|
|
'circle-color': '#8a1c05' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
map.on('style.load', () => { |
|
|
|
|
map.addSource('preview', { |
|
|
|
|
type: 'geojson', |
|
|
|
|
data: previewGeo2 |
|
|
|
|
}); |
|
|
|
|
map.addLayer(layerPolyline('preview')); |
|
|
|
|
map.addLayer(layerPolygon('preview')); |
|
|
|
|
map.addLayer(layerBuffer('preview')); |
|
|
|
|
map.addLayer(layerWayPoint('preview')); |
|
|
|
|
|
|
|
|
|
setDrawObj(draw); |
|
|
|
|
map.dragRotate.disable(); |
|
|
|
|
|
|
|
|
|
// dispatch(clientMapInit(map));
|
|
|
|
|
// 김포 3d 공역
|
|
|
|
|
|
|
|
|
|
dispatch(clientSetIsMapLoading(true)); |
|
|
|
|
|
|
|
|
|
setIsMapLoading(true); |
|
|
|
|
setMapObject(map); |
|
|
|
|
dispatch(clientMapInit(map)); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerPreviewDraw = () => { |
|
|
|
|
if (areaCoordList) { |
|
|
|
|
const areas = areaCoordList[0]; |
|
|
|
|
const paths = []; |
|
|
|
|
areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat])); |
|
|
|
|
|
|
|
|
|
previewGeo2.features = []; |
|
|
|
|
|
|
|
|
|
let fitZoomPaths = []; |
|
|
|
|
|
|
|
|
|
if (areas.areaType) { |
|
|
|
@ -336,6 +257,8 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
circle.properties.center = paths[0]; |
|
|
|
|
circle.geometry.coordinates = circleCoords; |
|
|
|
|
|
|
|
|
|
previewGeo2.features.push(circle); |
|
|
|
|
|
|
|
|
|
mapObject.setCenter(circle.properties.center); |
|
|
|
|
|
|
|
|
|
fitZoomPaths = circleCoords[0]; |
|
|
|
@ -346,6 +269,7 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
const point = []; |
|
|
|
|
if (areas.areaType === 'LINE') { |
|
|
|
|
lineString.geometry.coordinates = paths; |
|
|
|
|
previewGeo2features.push(lineString); |
|
|
|
|
|
|
|
|
|
//버퍼 생성
|
|
|
|
|
if (areas.bufferCoordList) { |
|
|
|
@ -356,24 +280,31 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
bufferPolyline.geometry.coordinates = bufferPaths; |
|
|
|
|
previewGeo2features.push(bufferPolyline); |
|
|
|
|
} |
|
|
|
|
} else if (areas.areaType === 'POLYGON') { |
|
|
|
|
polygon.geometry.coordinates = [paths]; |
|
|
|
|
previewGeo2features.push(polygon); |
|
|
|
|
} |
|
|
|
|
// 포인트 생성
|
|
|
|
|
paths.forEach((p, i) => { |
|
|
|
|
const wayPoint = handlerCreatePoint(p, i, areas.areaType); |
|
|
|
|
point.push(wayPoint); |
|
|
|
|
}); |
|
|
|
|
previewGeo2features = previewGeo2features.filter( |
|
|
|
|
geo => geo.properties.id !== 'point' |
|
|
|
|
); |
|
|
|
|
point.forEach(p => previewGeo2features.push(p)); |
|
|
|
|
|
|
|
|
|
//지도 줌 좌표 설정
|
|
|
|
|
fitZoomPaths = paths.concat(); |
|
|
|
|
} |
|
|
|
|
console.log('>>>', mapObject); |
|
|
|
|
|
|
|
|
|
handlerFitBounds(map, fitZoomPaths, 50, areas.areaType); |
|
|
|
|
handlerFitBounds(mapObject, fitZoomPaths, 50, areas.areaType); |
|
|
|
|
|
|
|
|
|
map.setPaintProperty('waypoint', 'circle-radius', 10); |
|
|
|
|
console.log('>>>', map.getSource('preview')); |
|
|
|
|
mapObject.setPaintProperty('waypoint', 'circle-radius', 10); |
|
|
|
|
mapObject.getSource('preview').setData(previewGeo2); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
@ -395,7 +326,7 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<FlightApprovalsReport handlerSearch={handlerSearch} /> |
|
|
|
|
<FlightApprovalsTable |
|
|
|
|
data={data} |
|
|
|
|
data={res} |
|
|
|
|
filter={filter} |
|
|
|
|
selected={selected} |
|
|
|
|
handlerDetail={handlerDetail} |
|
|
|
@ -414,46 +345,6 @@ export default function FlightApprovalsContainer() {
|
|
|
|
|
<div className='right-layer'></div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{/* <div className='main-data-box flight-data' style={{ width: '440px' }}> |
|
|
|
|
<Card> |
|
|
|
|
<div className='data-box-header'> |
|
|
|
|
<span className='box-ti'>관활기관 신청 결과 건수</span> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className='data-list-box' |
|
|
|
|
style={{ |
|
|
|
|
display: 'flex', |
|
|
|
|
gap: '10px', |
|
|
|
|
flexWrap: 'wrap' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div className='data-list'> |
|
|
|
|
<span className=''>서울지방항공청 1건</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='data-list'> |
|
|
|
|
<span className=''>김포공항관리사무소 3건</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='data-list'> |
|
|
|
|
<span className=''>청주공항출장소 2건</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
display: 'flex', |
|
|
|
|
gap: '10px', |
|
|
|
|
justifyContent: 'start' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div className='data-list'> |
|
|
|
|
<span className=''>부산지방공청 1건</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='data-list'> |
|
|
|
|
<span className=''>제주지방항공청 1건</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</Card> |
|
|
|
|
</div> */} |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|