|
|
@ -15,7 +15,6 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const naver = window.naver; |
|
|
|
const naver = window.naver; |
|
|
|
const airArea = props.airArea;
|
|
|
|
const airArea = props.airArea;
|
|
|
|
const isFlightDone = props.isFlightDone;
|
|
|
|
|
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
const { areaCoordList } = useSelector(state => state.flightState); |
|
|
|
const { areaCoordList } = useSelector(state => state.flightState); |
|
|
|
|
|
|
|
|
|
|
@ -24,6 +23,7 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
const [mode, setMode] = useState(); |
|
|
|
const [mode, setMode] = useState(); |
|
|
|
const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList);
|
|
|
|
const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
NaverMapInit();
|
|
|
|
NaverMapInit();
|
|
|
|
},[]); |
|
|
|
},[]); |
|
|
@ -38,21 +38,23 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
}, [mapControl.drawType]); |
|
|
|
}, [mapControl.drawType]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
// NaverMapInit();
|
|
|
|
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) |
|
|
|
setMapAreaCoordList(areaCoordList) |
|
|
|
}, [areaCoordList]); |
|
|
|
}, [areaCoordList]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ModeInit = () => { |
|
|
|
const ModeInit = () => { |
|
|
|
setMode(mapControl.drawType) |
|
|
|
setMode(mapControl.drawType) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const NaverMapInit = () => { |
|
|
|
const NaverMapInit = () => { |
|
|
|
const center = {}; |
|
|
|
|
|
|
|
const bufferzoom ={}; |
|
|
|
const bufferzoom ={}; |
|
|
|
if(areaCoordList){ |
|
|
|
if(areaCoordList){ |
|
|
|
center.lat = areaCoordList[0].coordList[0].lat === 0 ? 37.520357 : areaCoordList[0].coordList[0].lat; |
|
|
|
|
|
|
|
center.lon = areaCoordList[0].coordList[0].lon === 0 ? 126.610166 : areaCoordList[0].coordList[0].lon; |
|
|
|
|
|
|
|
if(areaCoordList[0].bufferZone>=0 && areaCoordList[0].bufferZone <2000){ |
|
|
|
if(areaCoordList[0].bufferZone>=0 && areaCoordList[0].bufferZone <2000){ |
|
|
|
bufferzoom.bufferzoom =13; |
|
|
|
bufferzoom.bufferzoom =13; |
|
|
|
} |
|
|
|
} |
|
|
@ -66,13 +68,10 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
bufferzoom.bufferzoom =10; |
|
|
|
bufferzoom.bufferzoom =10; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
console.log("bufferzoom>>",bufferzoom); |
|
|
|
const mapOptions = { |
|
|
|
console.log(center); |
|
|
|
|
|
|
|
const mapOptions2 = { |
|
|
|
|
|
|
|
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
|
|
|
// center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
|
|
|
|
center: new naver.maps.LatLng(center.lat, center.lon), |
|
|
|
center: new naver.maps.LatLng(37.520357, 126.610166), |
|
|
|
// zoom: 10,
|
|
|
|
zoom: !areaCoordList ? 13 : bufferzoom.bufferzoom, |
|
|
|
zoom: bufferzoom.bufferzoom, |
|
|
|
|
|
|
|
zoomControl: true, |
|
|
|
zoomControl: true, |
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAL, |
|
|
|
mapTypeId: naver.maps.MapTypeId.NORMAL, |
|
|
|
zoomControlOptions: { |
|
|
|
zoomControlOptions: { |
|
|
@ -80,7 +79,7 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
style: naver.maps.ZoomControlStyle.SMALL |
|
|
|
style: naver.maps.ZoomControlStyle.SMALL |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
setMap(new naver.maps.Map('map', mapOptions2)); |
|
|
|
setMap(new naver.maps.Map('map', mapOptions)); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const handlerDrawType = val => { |
|
|
|
const handlerDrawType = val => { |
|
|
@ -142,7 +141,6 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
handleCoordinates={handleCoordinates} |
|
|
|
handleCoordinates={handleCoordinates} |
|
|
|
handleInitCoordinates={handleInitCoordinates} |
|
|
|
handleInitCoordinates={handleInitCoordinates} |
|
|
|
handleConfirm={props.handleConfirm} |
|
|
|
handleConfirm={props.handleConfirm} |
|
|
|
isFlightDone={isFlightDone} |
|
|
|
|
|
|
|
/> : null} |
|
|
|
/> : null} |
|
|
|
|
|
|
|
|
|
|
|
{/* <Button.Ripple |
|
|
|
{/* <Button.Ripple |
|
|
@ -156,7 +154,6 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
color='primary' |
|
|
|
color='primary' |
|
|
|
className='area-button' |
|
|
|
className='area-button' |
|
|
|
onClick={e => handlerDrawType('RESET')}
|
|
|
|
onClick={e => handlerDrawType('RESET')}
|
|
|
|
{...(isFlightDone)? {disabled:true} : {} }
|
|
|
|
|
|
|
|
> |
|
|
|
> |
|
|
|
초기화 |
|
|
|
초기화 |
|
|
|
</Button.Ripple> |
|
|
|
</Button.Ripple> |
|
|
@ -173,7 +170,6 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
className='mr-1' |
|
|
|
className='mr-1' |
|
|
|
color='primary' |
|
|
|
color='primary' |
|
|
|
onClick={e => handlerDrawType('LINE')} |
|
|
|
onClick={e => handlerDrawType('LINE')} |
|
|
|
{...(isFlightDone)? {disabled:true} : {} } |
|
|
|
|
|
|
|
> |
|
|
|
> |
|
|
|
WayPoint |
|
|
|
WayPoint |
|
|
|
</Button.Ripple> |
|
|
|
</Button.Ripple> |
|
|
@ -181,14 +177,12 @@ const FlightPlanAreaMap = (props) => { |
|
|
|
className='mr-1' |
|
|
|
className='mr-1' |
|
|
|
color='primary' |
|
|
|
color='primary' |
|
|
|
onClick={e => handlerDrawType('CIRCLE')} |
|
|
|
onClick={e => handlerDrawType('CIRCLE')} |
|
|
|
{...(isFlightDone)? {disabled:true} : {} } |
|
|
|
|
|
|
|
> |
|
|
|
> |
|
|
|
Circle |
|
|
|
Circle |
|
|
|
</Button.Ripple> |
|
|
|
</Button.Ripple> |
|
|
|
<Button.Ripple |
|
|
|
<Button.Ripple |
|
|
|
color='primary' |
|
|
|
color='primary' |
|
|
|
onClick={e => handlerDrawType('POLYGON')} |
|
|
|
onClick={e => handlerDrawType('POLYGON')} |
|
|
|
{...(isFlightDone)? {disabled:true} : {} } |
|
|
|
|
|
|
|
> |
|
|
|
> |
|
|
|
Polygon |
|
|
|
Polygon |
|
|
|
</Button.Ripple> |
|
|
|
</Button.Ripple> |
|
|
|