|
|
|
@ -1,13 +1,16 @@
|
|
|
|
|
import 'mapbox-gl/dist/mapbox-gl.css'; |
|
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
|
import { MAPBOX_TOKEN } from '../../configs/constants'; |
|
|
|
|
import { useEffect, useRef, useState } from 'react'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
|
|
|
import { initFlightBas } from '../../modules/basis/flight/models/basisFlightModel'; |
|
|
|
|
import { AREA_DETAIL_LIST_SAVE } from '../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
|
import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
import { |
|
|
|
|
drawTypeChangeAction, |
|
|
|
|
mapInitAction |
|
|
|
|
} from '../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
import LaancAreaMap from './LaancAreaMap'; |
|
|
|
|
import { |
|
|
|
|
InitFeature, |
|
|
|
@ -15,10 +18,15 @@ import {
|
|
|
|
|
handlerDrawLayerInit, |
|
|
|
|
handlerGetCircleCoord |
|
|
|
|
} from '../../utility/DrawUtil'; |
|
|
|
|
import flatGimpo from '../../components/map/geojson/flatGimpoAirportAirArea.json'; |
|
|
|
|
import gimpo from '../../components/map/geojson/gimpoAirportAirArea.json'; |
|
|
|
|
import geoJson from '../../components/map/geojson/airArea.json'; |
|
|
|
|
import { FeatureAirZone } from '../../components/map/mapbox/feature/FeatureAirZone'; |
|
|
|
|
|
|
|
|
|
export default function FlightArea({ centeredModal, setCenteredModal }) { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const { areaCoordList } = useSelector(state => state.flightState); |
|
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
|
|
|
|
|
|
const mapContainer = useRef(null); |
|
|
|
|
const [mapObject, setMapObject] = useState(); |
|
|
|
@ -37,6 +45,87 @@ export default function FlightArea({ centeredModal, setCenteredModal }) {
|
|
|
|
|
if (!centeredModal) handlerPreviewDraw(); |
|
|
|
|
}, [areaCoordList, centeredModal]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (mapObject) { |
|
|
|
|
// handlerCreateAirSpace(mapObject);
|
|
|
|
|
} |
|
|
|
|
}, [ |
|
|
|
|
mapControl.area0001, |
|
|
|
|
mapControl.area0002, |
|
|
|
|
mapControl.area0003, |
|
|
|
|
mapControl.area0004, |
|
|
|
|
mapControl.area0005, |
|
|
|
|
mapControl.area0006 |
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
const handlerCreateAirSpace = ( |
|
|
|
|
map, |
|
|
|
|
useGeoJson = { |
|
|
|
|
...geoJson, |
|
|
|
|
...flatGimpo, |
|
|
|
|
features: [...geoJson.features, ...flatGimpo.features] |
|
|
|
|
} |
|
|
|
|
) => { |
|
|
|
|
if (map.getLayer('maine')) { |
|
|
|
|
map.removeLayer('maine'); |
|
|
|
|
map.removeSource('maine'); |
|
|
|
|
} |
|
|
|
|
let arrGeoJson = []; |
|
|
|
|
useGeoJson.features.map(item => { |
|
|
|
|
if (item.properties.type === '0001' && mapControl.area0001) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#FF3648' } |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0002' && mapControl.area0002) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#FFA1AA' } |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0003' && mapControl.area0003) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#FFA800' } |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0004' && mapControl.area0004) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#A16B00' } |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0005' && mapControl.area0005) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#AB40FF' } |
|
|
|
|
}); |
|
|
|
|
} else if (item.properties.type === '0006' && mapControl.area0006) { |
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
...item, |
|
|
|
|
properties: { ...item.properties, color: '#009cad' } |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon'); |
|
|
|
|
|
|
|
|
|
// 공역 생성 start
|
|
|
|
|
map.addSource('maine', { |
|
|
|
|
type: 'geojson', |
|
|
|
|
data: { |
|
|
|
|
...useGeoJson |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
map.addLayer({ |
|
|
|
|
id: 'maine', |
|
|
|
|
type: 'fill', |
|
|
|
|
source: 'maine', |
|
|
|
|
layout: {}, |
|
|
|
|
paint: { |
|
|
|
|
'fill-color': ['get', 'color'], |
|
|
|
|
// 'fill-extrusion-height': 3000,
|
|
|
|
|
'fill-opacity': 0.5 |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerDrawType = val => { |
|
|
|
|
dispatch(drawTypeChangeAction(val)); |
|
|
|
|
}; |
|
|
|
@ -92,14 +181,54 @@ export default function FlightArea({ centeredModal, setCenteredModal }) {
|
|
|
|
|
const language = new MapboxLanguage(); |
|
|
|
|
map.addControl(language); |
|
|
|
|
|
|
|
|
|
handlerDrawLayerInit( |
|
|
|
|
const tb = (window.tb = new threebox.Threebox( |
|
|
|
|
map, |
|
|
|
|
'preview', |
|
|
|
|
previewGeo, |
|
|
|
|
setMapObject, |
|
|
|
|
setIsMapLoad, |
|
|
|
|
'' |
|
|
|
|
); |
|
|
|
|
map.getCanvas().getContext('webgl'), |
|
|
|
|
{ |
|
|
|
|
enableSelectingObjects: true, |
|
|
|
|
enableTooltips: true |
|
|
|
|
} |
|
|
|
|
)); |
|
|
|
|
|
|
|
|
|
map.on('style.load', () => { |
|
|
|
|
// 김포 3d 공역
|
|
|
|
|
map.addLayer({ |
|
|
|
|
id: 'route', |
|
|
|
|
type: 'custom', |
|
|
|
|
renderingMode: '3d', |
|
|
|
|
onAdd: function () { |
|
|
|
|
for (let i = 0; i < gimpo.features.length; i++) { |
|
|
|
|
let line; |
|
|
|
|
const options = { |
|
|
|
|
path: gimpo.features[i].geometry.coordinates |
|
|
|
|
}; |
|
|
|
|
let lineGeometry = options.path; |
|
|
|
|
line = tb.line({ |
|
|
|
|
geometry: lineGeometry, |
|
|
|
|
width: gimpo.features[i].properties['stroke-width'], |
|
|
|
|
color: gimpo.features[i].properties.stroke |
|
|
|
|
}); |
|
|
|
|
tb.add(line); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
render: function () { |
|
|
|
|
tb.update(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
handlerCreateAirSpace(map); |
|
|
|
|
setIsMapLoad(true); |
|
|
|
|
|
|
|
|
|
handlerDrawLayerInit( |
|
|
|
|
map, |
|
|
|
|
'preview', |
|
|
|
|
previewGeo, |
|
|
|
|
setMapObject, |
|
|
|
|
setIsMapLoad, |
|
|
|
|
'' |
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
setMapObject(map); |
|
|
|
|
dispatch(mapInitAction(map)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerPreviewDraw = () => { |
|
|
|
@ -174,6 +303,9 @@ export default function FlightArea({ centeredModal, setCenteredModal }) {
|
|
|
|
|
ref={mapContainer} |
|
|
|
|
style={{ width: '100%', height: '35vh' }} |
|
|
|
|
></div> |
|
|
|
|
{/* {isMapLoad && mapObject ? ( |
|
|
|
|
<FeatureAirZone map={mapObject} mapboxgl={mapboxgl} /> |
|
|
|
|
) : null} */} |
|
|
|
|
</div> |
|
|
|
|
<Modal |
|
|
|
|
isOpen={centeredModal} |
|
|
|
|