diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index de4be8f..f0c10f5 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -5,11 +5,10 @@ import { Button, } from 'reactstrap'; import { useDispatch, useSelector } from 'react-redux'; -import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw'; -import { initFlight, initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; +import { initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction'; const FlightPlanAreaMap = (props) => { @@ -65,10 +64,6 @@ const FlightPlanAreaMap = (props) => { const handlerDrawType = val => { dispatch(drawTypeChangeAction(val)); }; - - // const handleBufferList = () => { - // dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); - // } const handleInitCoordinates = () => { const init = initFlightBas.initDetail.areaList.concat(); @@ -125,7 +120,6 @@ const FlightPlanAreaMap = (props) => { handleCoordinates={handleCoordinates} handleInitCoordinates={handleInitCoordinates} handleConfirm={props.handleConfirm} - // handleBufferList={handleBufferList} /> : null} {/* { 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,10 +61,16 @@ 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') { @@ -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, diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index fe746bd..617e58f 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -1,12 +1,8 @@ import React, { useEffect, useState } from 'react'; -import { useForm } from 'react-hook-form'; -import {useHistory} from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -import {Col, Row, Form } from 'reactstrap'; +import {Col, Row } from 'reactstrap'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap'; -import * as yup from 'yup'; -import { yupResolver } from '@hookform/resolvers/yup'; import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; import FlightPlanAreaDetailContainer from './FlightPlanAreaDetailContainer';