From c376959dde7e5c239e3ebcbed8d04da6e718d9b7 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Tue, 26 Sep 2023 11:31:06 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EA=B4=80=EC=A0=9C=20->=20laanc=20navigatio?= =?UTF-8?q?n=20focusing=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/control/setting/ControlSetting.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js index 7d70ade..448250e 100644 --- a/src/views/control/setting/ControlSetting.js +++ b/src/views/control/setting/ControlSetting.js @@ -1,6 +1,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { Button, ButtonGroup, CustomInput } from 'reactstrap'; +import * as Actions from '../../../modules/menu/actions/menuAction'; import { areaClickAction, mapTypeChangeAction, @@ -190,7 +191,10 @@ const ControlSetting = props => { From 3a94c606cffe0f0b37db7205893aa73f093b9967 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Tue, 26 Sep 2023 11:34:12 +0900 Subject: [PATCH 2/2] =?UTF-8?q?lannc=20=EC=A7=80=EB=8F=84=20=EA=B3=B5?= =?UTF-8?q?=EC=97=AD=20=EC=A0=81=EC=9A=A9=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/laanc/FlightArea.js | 150 ++++++++++++++++++++++++++++++-- src/views/laanc/LaancAreaMap.js | 4 +- src/views/laanc/LaancStep1.js | 22 ++--- 3 files changed, 154 insertions(+), 22 deletions(-) diff --git a/src/views/laanc/FlightArea.js b/src/views/laanc/FlightArea.js index 48e73af..9245638 100644 --- a/src/views/laanc/FlightArea.js +++ b/src/views/laanc/FlightArea.js @@ -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' }} > + {/* {isMapLoad && mapObject ? ( + + ) : null} */} - + *종류 - + @@ -184,7 +184,7 @@ export default function LaancStep1({ id='fltPurpose' name='fltPurpose' value={data.fltPurpose} - bssize='sm' + size='sm' onChange={e => { const { name, value } = e.target; handleChange({ @@ -218,7 +218,7 @@ export default function LaancStep1({
- 비행 구역 정보 + 비행 구역 정보
@@ -232,7 +232,7 @@ export default function LaancStep1({ name='fltElev' // defaultValue={data.email || ''} value={data.areaList[0].fltElev} - bssize='sm' + size='sm' onChange={e => { const { name, value } = e.target; handleChange({ @@ -257,7 +257,7 @@ export default function LaancStep1({ name='bufferZone' // defaultValue={data.email || ''} value={data.areaList[0].bufferZone} - bssize='sm' + size='sm' onChange={e => { const { name, value } = e.target; handleChange({ @@ -282,7 +282,7 @@ export default function LaancStep1({ name='fltMethod' // defaultValue={data.email || ''} value={data.areaList[0].fltMethod} - bssize='sm' + size='sm' onChange={e => { const { name, value } = e.target; handleChange({ @@ -314,7 +314,7 @@ export default function LaancStep1({ type='text' id='selffltMethod' name='selffltMethod' - bssize='sm' + size='sm' onChange={e => { const { name, value } = e.target; handleChange({ @@ -343,7 +343,7 @@ export default function LaancStep1({ @@ -374,7 +374,7 @@ export default function LaancStep1({ id='arcrftTypeCd' name='arcrftTypeCd' value={data.arcrftList[0].arcrftTypeCd} - bssize='sm' + size='sm' onChange={e => { const { name, value } = e.target; handleChange({ @@ -403,7 +403,7 @@ export default function LaancStep1({ name='groupNm' // defaultValue={data.email || ''} value={data.arcrftList[0].groupNm} - bssize='sm' + size='sm' onChange={e => { const { name, value } = e.target; handleChange({