diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 5d1a7bd..794920a 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -1,6 +1,7 @@ import 'mapbox-gl/dist/mapbox-gl.css'; import mapboxgl from 'mapbox-gl'; import threebox from 'threebox-plugin'; +import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; // import * as THREE from 'three'; import MapboxLanguage from '@mapbox/mapbox-gl-language'; import { MAPBOX_TOKEN } from '../../../configs/constants'; @@ -262,6 +263,7 @@ export default function MapBoxMap() { const [mapObject, setMapObject] = useState(null); const [isMapLoaded, setMapLoaded] = useState(false); const [arrPolyline, setArrPolyline] = useState([]); + const [centeredModal, setCenteredModal] = useState(false); const mapContainer = useRef(null); const dispatch = useDispatch(); const mapControl = useSelector(state => state.controlMapReducer); @@ -413,6 +415,19 @@ export default function MapBoxMap() { }); } + // notam example + const notamEl = document.createElement('button'); + notamEl.className = 'notam-btn btn btn-secondary'; + notamEl.innerText = 'z'; + notamEl.addEventListener('click', () => { + setCenteredModal(true); + }); + new mapboxgl.Marker({ + element: notamEl + }) + .setLngLat([126.79004959538054, 37.57831700744829]) + .addTo(map); + let arrGeoJson = []; useGeoJson.features.map(item => { if (item.properties.type === '0001' && mapControl.area0001) { @@ -494,7 +509,9 @@ export default function MapBoxMap() { enableTooltips: true } )); - + map.on('click', e => { + console.log(e); + }); map.on('style.load', () => { const layers = map.getStyle().layers; const labelLayerId = layers.find( @@ -762,7 +779,131 @@ export default function MapBoxMap() { ) : null} - {/* */} + setCenteredModal(!centeredModal)} + className='modal-dialog-centered modal-lg notam-modal' + > + setCenteredModal(!centeredModal)}> + NOTAM 정보 + + +
+ Z0638/23 +
+ GG RKZZNAXX +
+ 250712 RKRRYNYX +
+ (Z0638/23 NOTAMN +
+ Q)RKRR/QWMLW/IV/BO/AW/000/002/3735N12647E005 +
+ A)RKSS
+ B)2310011000
+ C)2310281200 +
+ D)01 08 14 17 25 28 1000-1200 +
+ E)FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M CENTERED + ON 373547N1264720E +
+ F)SFC G)200FT AMSL) +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
항목내용
NOTAM번호Z0638/23신규
비행정보구역인천비행정보구역(RKRR)
QCODE + 미사일, 총포, 로켓발사 일어날 예정이다(특정 상황 및 내용 + 표기)(QWMLW) +
비행방식계기비행(IFR) 및 시계비행(VFR)
목적PIB포함, 항공기운항
적용범위비행장, 항행경고
고도지표면 ~ 200FT
지리참조기준점(위치)[북위]37도35분 [동경]126도47분
반경서울/김포 국제 공항(RKSS)
B항목(발효일시) + 국제표준시 23년 10월01일 10시00분(한국표준시 23년 10월01일 + 19시00분) +
C항목(종료일시) + 국제표준시 23년 10월28일 12시00분(한국표준시 23년 10월28일 + 21시00분 +
D항목(일정)01 08 14 17 25 28 1000-1200
E항목(NOTAM 본문) + FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M + CENTERED ON 373547N1264720E +
F항목(하한)지표면(SFC)
G항목(상한)200FT AMSL
+
+ + + + + ); } diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js index 6064745..27ee847 100644 --- a/src/views/control/main/ControlMain.js +++ b/src/views/control/main/ControlMain.js @@ -18,14 +18,7 @@ import { import { AiOutlinePoweroff, AiOutlineExclamation } from 'react-icons/ai'; import { IoAlertOutline } from 'react-icons/io5'; import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg'; -import { - Card, - Button, - Modal, - ModalHeader, - ModalBody, - ModalFooter -} from 'reactstrap'; +import { Card } from 'reactstrap'; import ControlAlarmNotice from '../alarm/ControlAlarmNotice'; import ControlReportList from '../report/ControlReportList'; import ControlReportDetail from '../report/ControlReportDetail'; @@ -172,8 +165,6 @@ const ControlMain = () => { } }; - const [centeredModal, setCenteredModal] = useState(false); - return ( <> @@ -306,137 +297,6 @@ const ControlMain = () => { - - setCenteredModal(!centeredModal)} - className='modal-dialog-centered modal-lg notam-modal' - > - setCenteredModal(!centeredModal)}> - NOTAM 정보 - - -
- Z0638/23 -
- GG RKZZNAXX -
- 250712 RKRRYNYX -
- (Z0638/23 NOTAMN -
- Q)RKRR/QWMLW/IV/BO/AW/000/002/3735N12647E005 -
- A)RKSS
- B)2310011000
- C)2310281200 -
- D)01 08 14 17 25 28 1000-1200 -
- E)FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M CENTERED - ON 373547N1264720E -
- F)SFC G)200FT AMSL) -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
항목내용
NOTAM번호Z0638/23신규
비행정보구역인천비행정보구역(RKRR)
QCODE - 미사일, 총포, 로켓발사 일어날 예정이다(특정 상황 및 내용 - 표기)(QWMLW) -
비행방식계기비행(IFR) 및 시계비행(VFR)
목적PIB포함, 항공기운항
적용범위비행장, 항행경고
고도지표면 ~ 200FT
지리참조기준점(위치)[북위]37도35분 [동경]126도47분
반경서울/김포 국제 공항(RKSS)
B항목(발효일시) - 국제표준시 23년 10월01일 10시00분(한국표준시 23년 10월01일 - 19시00분) -
C항목(종료일시) - 국제표준시 23년 10월28일 12시00분(한국표준시 23년 10월28일 - 21시00분 -
D항목(일정)01 08 14 17 25 28 1000-1200
E항목(NOTAM 본문) - FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M - CENTERED ON 373547N1264720E -
F항목(하한)지표면(SFC)
G항목(상한)200FT AMSL
-
- - - - - {/*