|
|
@ -1,6 +1,7 @@ |
|
|
|
import 'mapbox-gl/dist/mapbox-gl.css'; |
|
|
|
import 'mapbox-gl/dist/mapbox-gl.css'; |
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
|
|
|
|
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
|
|
// import * as THREE from 'three';
|
|
|
|
// import * as THREE from 'three';
|
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
@ -262,6 +263,7 @@ export default function MapBoxMap() { |
|
|
|
const [mapObject, setMapObject] = useState(null); |
|
|
|
const [mapObject, setMapObject] = useState(null); |
|
|
|
const [isMapLoaded, setMapLoaded] = useState(false); |
|
|
|
const [isMapLoaded, setMapLoaded] = useState(false); |
|
|
|
const [arrPolyline, setArrPolyline] = useState([]); |
|
|
|
const [arrPolyline, setArrPolyline] = useState([]); |
|
|
|
|
|
|
|
const [centeredModal, setCenteredModal] = useState(false); |
|
|
|
const mapContainer = useRef(null); |
|
|
|
const mapContainer = useRef(null); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
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 = []; |
|
|
|
let arrGeoJson = []; |
|
|
|
useGeoJson.features.map(item => { |
|
|
|
useGeoJson.features.map(item => { |
|
|
|
if (item.properties.type === '0001' && mapControl.area0001) { |
|
|
|
if (item.properties.type === '0001' && mapControl.area0001) { |
|
|
@ -494,7 +509,9 @@ export default function MapBoxMap() { |
|
|
|
enableTooltips: true |
|
|
|
enableTooltips: true |
|
|
|
} |
|
|
|
} |
|
|
|
)); |
|
|
|
)); |
|
|
|
|
|
|
|
map.on('click', e => { |
|
|
|
|
|
|
|
console.log(e); |
|
|
|
|
|
|
|
}); |
|
|
|
map.on('style.load', () => { |
|
|
|
map.on('style.load', () => { |
|
|
|
const layers = map.getStyle().layers; |
|
|
|
const layers = map.getStyle().layers; |
|
|
|
const labelLayerId = layers.find( |
|
|
|
const labelLayerId = layers.find( |
|
|
@ -762,7 +779,131 @@ export default function MapBoxMap() { |
|
|
|
</> |
|
|
|
</> |
|
|
|
) : null} |
|
|
|
) : 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> |
|
|
|
</> |
|
|
|
</> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|