pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

notam example 적용

pull/2/head
김장현 11 months ago
parent
74819d4f05
commit
71821c9724
2 changed files with 144 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 145
      src/components/map/mapbox/MapBoxMap.js
  2. 142
      src/views/control/main/ControlMain.js

145
src/components/map/mapbox/MapBoxMap.js
Unescape View File

@ -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}
{/* */}
<Modal
isOpen={centeredModal}
toggle={() => setCenteredModal(!centeredModal)}
className='modal-dialog-centered modal-lg notam-modal'
>
<ModalHeader toggle={() => setCenteredModal(!centeredModal)}>
NOTAM 정보
</ModalHeader>
<ModalBody className='notam-info'>
<div>
Z0638/23
<br />
GG RKZZNAXX
<br />
250712 RKRRYNYX
<br />
(Z0638/23 NOTAMN
<br />
Q)RKRR/QWMLW/IV/BO/AW/000/002/3735N12647E005
<br />
A)RKSS <br />
B)2310011000 <br />
C)2310281200
<br />
D)01 08 14 17 25 28 1000-1200
<br />
E)FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M CENTERED
ON 373547N1264720E
<br />
F)SFC G)200FT AMSL)
</div>
<div>
<table>
<thead>
<tr>
<th>항목</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<th>NOTAM번호</th>
<td>Z0638/23신규</td>
</tr>
<tr>
<th>비행정보구역</th>
<td>인천비행정보구역(RKRR)</td>
</tr>
<tr>
<th>QCODE</th>
<td>
미사일, 총포, 로켓발사 일어날 예정이다(특정 상황 및 내용
표기)(QWMLW)
</td>
</tr>
<tr>
<th>비행방식</th>
<td>계기비행(IFR) 및 시계비행(VFR)</td>
</tr>
<tr>
<th>목적</th>
<td>PIB포함, 항공기운항</td>
</tr>
<tr>
<th>적용범위</th>
<td>비행장, 항행경고</td>
</tr>
<tr>
<th>고도</th>
<td>지표면 ~ 200FT</td>
</tr>
<tr>
<th>지리참조기준점(위치)</th>
<td>[북위]37도35분 [동경]126도47분</td>
</tr>
<tr>
<th>반경</th>
<td>서울/김포 국제 공항(RKSS)</td>
</tr>
<tr>
<th>B항목(발효일시)</th>
<td>
국제표준시 23년 10월01일 10시00분(한국표준시 23년 10월01일
19시00분)
</td>
</tr>
<tr>
<th>C항목(종료일시)</th>
<td>
국제표준시 23년 10월28일 12시00분(한국표준시 23년 10월28일
21시00분
</td>
</tr>
<tr>
<th>D항목(일정)</th>
<td>01 08 14 17 25 28 1000-1200</td>
</tr>
<tr>
<th>E항목(NOTAM 본문)</th>
<td>
FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M
CENTERED ON 373547N1264720E
</td>
</tr>
<tr>
<th>F항목(하한)</th>
<td>지표면(SFC)</td>
</tr>
<tr>
<th>G항목(상한)</th>
<td>200FT AMSL</td>
</tr>
</tbody>
</table>
</div>
</ModalBody>
<ModalFooter>
<Button
color='primary'
onClick={() => setCenteredModal(!centeredModal)}
>
확인
</Button>
</ModalFooter>
</Modal>
</>
);
}

142
src/views/control/main/ControlMain.js
Unescape View File

@ -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 (
<>
<ControlAlarmNotice />
@ -306,137 +297,6 @@ const ControlMain = () => {
</div>
</Card>
</div>
<Button
className='notam-btn'
onClick={() => setCenteredModal(!centeredModal)}
>
z
</Button>
<Modal
isOpen={centeredModal}
toggle={() => setCenteredModal(!centeredModal)}
className='modal-dialog-centered modal-lg notam-modal'
>
<ModalHeader toggle={() => setCenteredModal(!centeredModal)}>
NOTAM 정보
</ModalHeader>
<ModalBody className='notam-info'>
<div>
Z0638/23
<br />
GG RKZZNAXX
<br />
250712 RKRRYNYX
<br />
(Z0638/23 NOTAMN
<br />
Q)RKRR/QWMLW/IV/BO/AW/000/002/3735N12647E005
<br />
A)RKSS <br />
B)2310011000 <br />
C)2310281200
<br />
D)01 08 14 17 25 28 1000-1200
<br />
E)FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M CENTERED
ON 373547N1264720E
<br />
F)SFC G)200FT AMSL)
</div>
<div>
<table>
<thead>
<tr>
<th>항목</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<th>NOTAM번호</th>
<td>Z0638/23신규</td>
</tr>
<tr>
<th>비행정보구역</th>
<td>인천비행정보구역(RKRR)</td>
</tr>
<tr>
<th>QCODE</th>
<td>
미사일, 총포, 로켓발사 일어날 예정이다(특정 상황 및 내용
표기)(QWMLW)
</td>
</tr>
<tr>
<th>비행방식</th>
<td>계기비행(IFR) 및 시계비행(VFR)</td>
</tr>
<tr>
<th>목적</th>
<td>PIB포함, 항공기운항</td>
</tr>
<tr>
<th>적용범위</th>
<td>비행장, 항행경고</td>
</tr>
<tr>
<th>고도</th>
<td>지표면 ~ 200FT</td>
</tr>
<tr>
<th>지리참조기준점(위치)</th>
<td>[북위]37도35분 [동경]126도47분</td>
</tr>
<tr>
<th>반경</th>
<td>서울/김포 국제 공항(RKSS)</td>
</tr>
<tr>
<th>B항목(발효일시)</th>
<td>
국제표준시 23년 10월01일 10시00분(한국표준시 23년 10월01일
19시00분)
</td>
</tr>
<tr>
<th>C항목(종료일시)</th>
<td>
국제표준시 23년 10월28일 12시00분(한국표준시 23년 10월28일
21시00분
</td>
</tr>
<tr>
<th>D항목(일정)</th>
<td>01 08 14 17 25 28 1000-1200</td>
</tr>
<tr>
<th>E항목(NOTAM 본문)</th>
<td>
FIREWORKS WILL TAKE PLACE AS FLW : A CIRCLE RADIUS 100M
CENTERED ON 373547N1264720E
</td>
</tr>
<tr>
<th>F항목(하한)</th>
<td>지표면(SFC)</td>
</tr>
<tr>
<th>G항목(상한)</th>
<td>200FT AMSL</td>
</tr>
</tbody>
</table>
</div>
</ModalBody>
<ModalFooter>
<Button
color='primary'
onClick={() => setCenteredModal(!centeredModal)}
>
확인
</Button>
</ModalFooter>
</Modal>
{/* <div className='main-data-box flight-data'>
<Card>
<div className='data-box-header'>

Write Preview
Loading…
Cancel
Save