|
|
@ -24,7 +24,7 @@ import { |
|
|
|
} from '../../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
} from '../../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
import { flightPlanAPI } from '../../../../modules/basis/flight/apis/basisFlightApi'; |
|
|
|
import { flightPlanAPI } from '../../../../modules/basis/flight/apis/basisFlightApi'; |
|
|
|
import { WeatherContainer } from '../../../../containers/basis/flight/plan/WeatherContainer'; |
|
|
|
import { WeatherContainer } from '../../../../containers/basis/flight/plan/WeatherContainer'; |
|
|
|
|
|
|
|
import gimpo from '../../../map/geojson/airportAirArea.json'; |
|
|
|
const FlightPlanAreaMap = props => { |
|
|
|
const FlightPlanAreaMap = props => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const naver = window.naver; |
|
|
|
const naver = window.naver; |
|
|
@ -49,8 +49,50 @@ const FlightPlanAreaMap = props => { |
|
|
|
const [number, setNumber] = useState(0); |
|
|
|
const [number, setNumber] = useState(0); |
|
|
|
|
|
|
|
|
|
|
|
const [formModal, setFormModal] = useState(false); |
|
|
|
const [formModal, setFormModal] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [coordCenter, setCoordCenter] = useState([]); // 격자 센터값
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let gimPofeatures = gimpo.features; |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
NaverMapInit(); |
|
|
|
NaverMapInit(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const coords = []; |
|
|
|
|
|
|
|
gimPofeatures.map(air => { |
|
|
|
|
|
|
|
coords.push({ |
|
|
|
|
|
|
|
lat: |
|
|
|
|
|
|
|
(Math.max( |
|
|
|
|
|
|
|
air.geometry.coordinates[0][0][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][1][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][2][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][3][1] |
|
|
|
|
|
|
|
) + |
|
|
|
|
|
|
|
Math.min( |
|
|
|
|
|
|
|
air.geometry.coordinates[0][0][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][1][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][2][1], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][3][1] |
|
|
|
|
|
|
|
)) / |
|
|
|
|
|
|
|
2, |
|
|
|
|
|
|
|
lng: |
|
|
|
|
|
|
|
(Math.max( |
|
|
|
|
|
|
|
air.geometry.coordinates[0][0][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][1][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][2][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][3][0] |
|
|
|
|
|
|
|
) + |
|
|
|
|
|
|
|
Math.min( |
|
|
|
|
|
|
|
air.geometry.coordinates[0][0][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][1][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][2][0], |
|
|
|
|
|
|
|
air.geometry.coordinates[0][3][0] |
|
|
|
|
|
|
|
)) / |
|
|
|
|
|
|
|
2, |
|
|
|
|
|
|
|
airspace: air.properties.airspace |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
setCoordCenter(coords); |
|
|
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
return () => { |
|
|
|
dispatch(AREA_DETAIL_INIT()); |
|
|
|
dispatch(AREA_DETAIL_INIT()); |
|
|
|
}; |
|
|
|
}; |
|
|
@ -64,6 +106,25 @@ const FlightPlanAreaMap = props => { |
|
|
|
setIsMapLoad(true); |
|
|
|
setIsMapLoad(true); |
|
|
|
}, [airArea]); |
|
|
|
}, [airArea]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
coordCenter.map((val, idx) => { |
|
|
|
|
|
|
|
const position = new naver.maps.LatLng( |
|
|
|
|
|
|
|
val.lat.toFixed(6), |
|
|
|
|
|
|
|
val.lng.toFixed(6) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
const marker = new naver.maps.Marker({ |
|
|
|
|
|
|
|
position: position, |
|
|
|
|
|
|
|
map: map, |
|
|
|
|
|
|
|
icon: { |
|
|
|
|
|
|
|
content: `<div style="color:#000000;font-size:10px;">${val.airspace}</div>`, |
|
|
|
|
|
|
|
size: new naver.maps.Size(0, 0), |
|
|
|
|
|
|
|
origin: new naver.maps.Point(0, 0), |
|
|
|
|
|
|
|
anchor: new naver.maps.Point(7, 5), |
|
|
|
|
|
|
|
align: 'center' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}, [coordCenter]); |
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
ModeInit(); |
|
|
|
ModeInit(); |
|
|
|
}, [mapControl.drawType]); |
|
|
|
}, [mapControl.drawType]); |
|
|
@ -118,8 +179,8 @@ const FlightPlanAreaMap = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
const mapOptions = { |
|
|
|
const mapOptions = { |
|
|
|
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
|
|
|
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
center: new naver.maps.LatLng(37.558522, 126.793722), |
|
|
|
zoom: !areaCoordList ? 14 : bufferzoom.bufferzoom, |
|
|
|
zoom: !areaCoordList ? 11 : bufferzoom.bufferzoom, |
|
|
|
zoomControl: true, |
|
|
|
zoomControl: true, |
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAL, |
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAL, |
|
|
|
zoomControlOptions: { |
|
|
|
zoomControlOptions: { |
|
|
|