|
|
|
@ -2,15 +2,11 @@ import $ from 'jquery';
|
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
|
import {initFlightBas} from '../../../../modules/basis/flight/models/basisFlightModel'; |
|
|
|
|
|
|
|
|
|
export const FlightPlanDraw = props => { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
|
|
|
|
|
|
const { areaCoordList, detail } = useSelector(state => state.flightState);
|
|
|
|
|
const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList); |
|
|
|
|
|
|
|
|
|
const [pastPolyline, setPolyline] = useState(); |
|
|
|
|
const [pastBuffer, setBuffer] = useState(); |
|
|
|
|
const [pastPolygon, setPolygon] = useState(); |
|
|
|
@ -22,6 +18,8 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
const [figure, setFigure] = useState(); |
|
|
|
|
|
|
|
|
|
const [areaDetail, setAreaDetail] = useState(); |
|
|
|
|
|
|
|
|
|
const naver = props.naver; |
|
|
|
|
const map = props.map; |
|
|
|
|
let mode = props.mode; |
|
|
|
@ -49,9 +47,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
let distanceMarker = []; |
|
|
|
|
|
|
|
|
|
// const handleBufferList = () => {
|
|
|
|
|
// dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
|
|
|
|
|
// }
|
|
|
|
|
const handleBufferList = () => { |
|
|
|
|
dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
drawInit(); |
|
|
|
@ -63,11 +61,17 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
props.handleConfirm(props.areaCoordList); |
|
|
|
|
// handleBufferList();
|
|
|
|
|
|
|
|
|
|
console.log(props.areaCoordList, '>>>>>>areaCoordList') |
|
|
|
|
setAreaDetail(props.areaCoordList); |
|
|
|
|
}, [figure]) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(pastPolyline) { |
|
|
|
|
console.log(">>>>>>>>>>>>>>>>>>>>") |
|
|
|
|
handleBufferList(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, [areaDetail]) |
|
|
|
|
|
|
|
|
|
const drawInit = () => { |
|
|
|
|
if (mapControl.drawType === 'LINE') { |
|
|
|
|
onClickButton('LINE'); |
|
|
|
@ -148,7 +152,8 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) }); |
|
|
|
|
setClickEve(Eve.clickEve); |
|
|
|
|
} else if (mode === 'CIRCLE') { |
|
|
|
|
setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) |
|
|
|
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }); |
|
|
|
|
setClickEve(Eve.clickEve); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -157,6 +162,8 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
naver.maps.Event.removeListener(Eve.clickEve); |
|
|
|
|
naver.maps.Event.removeListener(pastClickEve); |
|
|
|
|
setClickEve(); |
|
|
|
|
|
|
|
|
|
naver.maps.Event.removeListener(Eve.mousedownEve); |
|
|
|
|
naver.maps.Event.removeListener(Eve.rightclickEve); |
|
|
|
|
if (!circle) $(document).off('mousemove.measure'); |
|
|
|
@ -319,10 +326,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
circle.setCenter(coord); |
|
|
|
|
circle.setRadius(100); |
|
|
|
|
} |
|
|
|
|
// setCircle(circle);
|
|
|
|
|
setCircle(prev => ([...prev, circle])) |
|
|
|
|
setAreaInfo(''); |
|
|
|
|
setFigure(circle) |
|
|
|
|
setFigure(circle.center) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onMouseDownDrag = (index) => { |
|
|
|
@ -338,6 +344,10 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
disableTwoFingerTapZoom: true |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
if(circle) { |
|
|
|
|
removeListener(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); |
|
|
|
|
$(document).on('mouseup.measure', function () { onMouseUpDrag() }); |
|
|
|
|
} |
|
|
|
@ -429,7 +439,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
$(document).off('mouseup.measure'); |
|
|
|
|
|
|
|
|
|
if (circle) { |
|
|
|
|
setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) |
|
|
|
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }) |
|
|
|
|
setClickEve(Eve.clickEve); |
|
|
|
|
|
|
|
|
|
setCircle(prev => ([...prev, circle])) |
|
|
|
|
setAreaInfo(''); |
|
|
|
|
setFigure(circle) |
|
|
|
@ -471,7 +483,6 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
areaInfo.bufferZone = circle.getRadius(); |
|
|
|
|
areaInfo.areaType = 'CIRCLE'; |
|
|
|
|
} |
|
|
|
|
// console.log(areaInfo, 'areaInfo')
|
|
|
|
|
props.handleCoordinates(areaInfo); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -484,11 +495,11 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
const handleDetailDraw = () => { |
|
|
|
|
if (props.areaCoordList) { |
|
|
|
|
console.log('handleDetailDraw')
|
|
|
|
|
// console.log('handleDetailDraw')
|
|
|
|
|
|
|
|
|
|
const areas = props.areaCoordList[0]; |
|
|
|
|
|
|
|
|
|
const paths = []; //coordList의 위경도 값 담길 배열
|
|
|
|
|
const paths = []; |
|
|
|
|
areas.coordList.forEach((coord) => { |
|
|
|
|
const path = new naver.maps.LatLng(coord.lat, coord.lon) |
|
|
|
|
|
|
|
|
@ -603,10 +614,6 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
if(pastCircle) { |
|
|
|
|
pastCircle.forEach(prev => prev.setMap(null)); |
|
|
|
|
} |
|
|
|
|
// if(circle) {
|
|
|
|
|
// console.log(circle, '>>>circle')
|
|
|
|
|
// circle.setMap(null);
|
|
|
|
|
// }
|
|
|
|
|
// radiusline = new naver.maps.Polyline({
|
|
|
|
|
// strokeStyle: [4, 4],
|
|
|
|
|
// strokeOpacity: 0.6,
|
|
|
|
|