|
|
|
@ -1,18 +1,16 @@
|
|
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
|
import { |
|
|
|
|
Card, |
|
|
|
|
CardBody, |
|
|
|
|
Button, |
|
|
|
|
Input |
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
import { Card, CardBody, Button, Input } from 'reactstrap'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; |
|
|
|
|
import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
import { |
|
|
|
|
drawTypeChangeAction, |
|
|
|
|
drawCheckAction |
|
|
|
|
} from '../../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw'; |
|
|
|
|
import { initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; |
|
|
|
|
import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
|
|
|
|
|
|
const FlightPlanAreaMap = (props) => { |
|
|
|
|
const FlightPlanAreaMap = props => { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const naver = window.naver; |
|
|
|
|
const airArea = props.airArea; |
|
|
|
@ -22,54 +20,67 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
const [map, setMap] = useState(); |
|
|
|
|
const [isMapLoad, setIsMapLoad] = useState(false); |
|
|
|
|
const [mode, setMode] = useState(); |
|
|
|
|
const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList); |
|
|
|
|
const [mapAreaCoordList, setMapAreaCoordList] = useState( |
|
|
|
|
initFlightBas.initDetail.areaList |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const [searchData, setSearchData] = useState(); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
NaverMapInit(); |
|
|
|
|
},[]); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
setIsMapLoad(true); |
|
|
|
|
}, [airArea]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
ModeInit(); |
|
|
|
|
}, [mapControl.drawType]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(areaCoordList) { |
|
|
|
|
if(areaCoordList[0].coordList[0].lat !== 0 && areaCoordList[0].coordList[0].lon !== 0){ |
|
|
|
|
if(map) { |
|
|
|
|
map.setCenter(new naver.maps.LatLng(areaCoordList[0].coordList[0].lat, areaCoordList[0].coordList[0].lon)) |
|
|
|
|
setMapAreaCoordList(areaCoordList) |
|
|
|
|
if (areaCoordList) { |
|
|
|
|
if ( |
|
|
|
|
areaCoordList[0].coordList[0].lat !== 0 && |
|
|
|
|
areaCoordList[0].coordList[0].lon !== 0 |
|
|
|
|
) { |
|
|
|
|
if (map) { |
|
|
|
|
map.setCenter( |
|
|
|
|
new naver.maps.LatLng( |
|
|
|
|
areaCoordList[0].coordList[0].lat, |
|
|
|
|
areaCoordList[0].coordList[0].lon |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
setMapAreaCoordList(areaCoordList); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, [areaCoordList]); |
|
|
|
|
|
|
|
|
|
}, [areaCoordList, map]); |
|
|
|
|
|
|
|
|
|
const ModeInit = () => { |
|
|
|
|
setMode(mapControl.drawType) |
|
|
|
|
} |
|
|
|
|
setMode(mapControl.drawType); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const NaverMapInit = () => { |
|
|
|
|
const bufferzoom ={}; |
|
|
|
|
if(areaCoordList){ |
|
|
|
|
if(areaCoordList[0].bufferZone>=0 && areaCoordList[0].bufferZone <2000){ |
|
|
|
|
bufferzoom.bufferzoom =13; |
|
|
|
|
} |
|
|
|
|
else if(areaCoordList[0].bufferZone>=2000 && areaCoordList[0].bufferZone <5000){ |
|
|
|
|
bufferzoom.bufferzoom =12; |
|
|
|
|
} |
|
|
|
|
else if(areaCoordList[0].bufferZone>=5000 && areaCoordList[0].bufferZone <=9000){ |
|
|
|
|
bufferzoom.bufferzoom =11; |
|
|
|
|
} |
|
|
|
|
else{ |
|
|
|
|
bufferzoom.bufferzoom =10; |
|
|
|
|
const bufferzoom = {}; |
|
|
|
|
if (areaCoordList) { |
|
|
|
|
if ( |
|
|
|
|
areaCoordList[0].bufferZone >= 0 && |
|
|
|
|
areaCoordList[0].bufferZone < 2000 |
|
|
|
|
) { |
|
|
|
|
bufferzoom.bufferzoom = 13; |
|
|
|
|
} else if ( |
|
|
|
|
areaCoordList[0].bufferZone >= 2000 && |
|
|
|
|
areaCoordList[0].bufferZone < 5000 |
|
|
|
|
) { |
|
|
|
|
bufferzoom.bufferzoom = 12; |
|
|
|
|
} else if ( |
|
|
|
|
areaCoordList[0].bufferZone >= 5000 && |
|
|
|
|
areaCoordList[0].bufferZone <= 9000 |
|
|
|
|
) { |
|
|
|
|
bufferzoom.bufferzoom = 11; |
|
|
|
|
} else { |
|
|
|
|
bufferzoom.bufferzoom = 10; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const mapOptions = { |
|
|
|
@ -84,7 +95,7 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
setMap(new naver.maps.Map('map', mapOptions)); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerDrawType = val => { |
|
|
|
|
dispatch(drawTypeChangeAction(val)); |
|
|
|
@ -92,11 +103,11 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
|
|
|
|
|
const handleInitCoordinates = () => { |
|
|
|
|
const init = initFlightBas.initDetail.areaList.concat(); |
|
|
|
|
dispatch(AREA_COORDINATE_LIST_SAVE(init)) |
|
|
|
|
} |
|
|
|
|
dispatch(AREA_COORDINATE_LIST_SAVE(init)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleCoordinates = (areaInfo) => { |
|
|
|
|
const initAreaList = initFlightBas.initDetail.areaList.concat() |
|
|
|
|
const handleCoordinates = areaInfo => { |
|
|
|
|
const initAreaList = initFlightBas.initDetail.areaList.concat(); |
|
|
|
|
const coordList = []; |
|
|
|
|
|
|
|
|
|
// radius = 10;
|
|
|
|
@ -116,25 +127,25 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
...area, |
|
|
|
|
bufferZone: areaInfo.bufferZone, |
|
|
|
|
areaType: areaInfo.areaType, |
|
|
|
|
coordList : coordList |
|
|
|
|
} |
|
|
|
|
})
|
|
|
|
|
coordList: coordList |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// dispatch(AREA_COORDINATE_LIST_SAVE(areaList))
|
|
|
|
|
setMapAreaCoordList(areaList); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleSearch = () => { |
|
|
|
|
console.log(searchData, 'encoding') |
|
|
|
|
} |
|
|
|
|
// console.log(searchData, 'encoding');
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleChange = e => { |
|
|
|
|
const {name, value} = e.target; |
|
|
|
|
const { name, value } = e.target; |
|
|
|
|
|
|
|
|
|
if(name=='searchInput') { |
|
|
|
|
if (name == 'searchInput') { |
|
|
|
|
setSearchData(encodeURI(value)); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Card className='mb-0'> |
|
|
|
@ -148,8 +159,9 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style={{ position: 'relative' }}> |
|
|
|
|
<div id="map" style={{ width: '100%', height: '60vh' }}> |
|
|
|
|
{isMapLoad ? <FlightPlanDraw |
|
|
|
|
<div id='map' style={{ width: '100%', height: '60vh' }}> |
|
|
|
|
{isMapLoad ? ( |
|
|
|
|
<FlightPlanDraw |
|
|
|
|
map={map} |
|
|
|
|
naver={naver} |
|
|
|
|
mode={mode} |
|
|
|
@ -158,7 +170,8 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
handleCoordinates={handleCoordinates} |
|
|
|
|
handleInitCoordinates={handleInitCoordinates} |
|
|
|
|
handleConfirm={props.handleConfirm} |
|
|
|
|
/> : null} |
|
|
|
|
/> |
|
|
|
|
) : null} |
|
|
|
|
|
|
|
|
|
<Button.Ripple |
|
|
|
|
color='primary' |
|
|
|
@ -194,7 +207,6 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{isMapLoad ? ( |
|
|
|
|
<FeatureAirZone map={map} naver={naver} features={airArea.features} /> |
|
|
|
|
) : null} |
|
|
|
@ -226,7 +238,7 @@ const FlightPlanAreaMap = (props) => {
|
|
|
|
|
</div> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default FlightPlanAreaMap; |