|
|
|
@ -5,6 +5,7 @@ import {
|
|
|
|
|
Button |
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; |
|
|
|
|
import { JQueryDraw } from '../../../mapDraw/naver/draw/JQueryDraw'; |
|
|
|
|
|
|
|
|
|
const FlightPlanAreaMap = (props) => { |
|
|
|
|
const naver = window.naver; |
|
|
|
@ -16,6 +17,7 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
useEffect(() => { |
|
|
|
|
NaverMapInit(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setIsMapLoad(true); |
|
|
|
|
}, [airArea]); |
|
|
|
@ -25,9 +27,9 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), |
|
|
|
|
zoom: 10, |
|
|
|
|
zoomControl: true, |
|
|
|
|
mapTypeId: naver.maps.MapTypeId.HYBRID, |
|
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAL, |
|
|
|
|
zoomControlOptions: { |
|
|
|
|
position: naver.maps.Position.TOP_LEFT, |
|
|
|
|
position: naver.maps.Position.LEFT_CENTER, |
|
|
|
|
|
|
|
|
|
style: naver.maps.ZoomControlStyle.SMALL |
|
|
|
|
} |
|
|
|
@ -48,15 +50,15 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div id="map" style={{ width: '100%', height: '50vh'}}></div> |
|
|
|
|
<div id="map" style={{ width: '100%', height: '50vh'}}> |
|
|
|
|
<JQueryDraw map={map} naver={naver} /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{isMapLoad ? (
|
|
|
|
|
<FeatureAirZone map={map} naver={naver} features={airArea.features} />
|
|
|
|
|
) : null} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className='d-flex align-items-center mt-2'> |
|
|
|
|
<Button.Ripple |
|
|
|
|
className='mr-1' |
|
|
|
|