diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js index 6ab7d89..57bc64e 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -91,7 +91,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handl id='bufferZone' name='bufferZone' bsSize='sm' - readOnly={coordList[0].lat && (mapControl.drawType===("LINE") || mapControl.drawType===("CIRCLE")) ? false : true } + readOnly={coordList[0].lat && (data[0].areaType && data[0].areaType != ("POLYGON")) ? false : true } placeholder='반경' value={data ? data[0].bufferZone : ''} @@ -109,7 +109,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handl className='mr-1' color='primary' size='sm' - disabled={coordList[0].lat && (mapControl.drawType===("LINE") || mapControl.drawType===("CIRCLE")) ? false : true } + disabled={coordList[0].lat && (data[0].areaType && data[0].areaType != ("POLYGON")) ? false : true } onClick={() => handleBufferList()} > 적용 diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 2fcc370..de4be8f 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -24,7 +24,7 @@ const FlightPlanAreaMap = (props) => { const [mode, setMode] = useState(); const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList); - useEffect(() => { + useEffect(() => { NaverMapInit(); }, []); @@ -36,12 +36,10 @@ const FlightPlanAreaMap = (props) => { ModeInit(); }, [mapControl.drawType]); - useEffect(() => { + useEffect(() => { setMapAreaCoordList(areaCoordList) }, [areaCoordList]); - const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList); - const ModeInit = () => { setMode(mapControl.drawType) @@ -73,9 +71,8 @@ const FlightPlanAreaMap = (props) => { // } const handleInitCoordinates = () => { - const init = initFlightBas.initDetail.areaList.concat(); - console.log(init, '<<<<< { @@ -123,20 +120,21 @@ const FlightPlanAreaMap = (props) => { {isMapLoad ? : null} - props.handleConfirm(mapAreaCoordList)} > 확인 - + */} { + 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(); - - // const [pastCircle, setCircle] = useState(); const [pastCircle, setCircle] = useState([]); - const [pastClickEve, setClickEve] = useState(); - const [pastDragCircle, setDragCircle] = useState([]); + const [pastClickEve, setClickEve] = useState(); const [pastMarker, setMarker] = useState([]); + + const [figure, setFigure] = useState(); const naver = props.naver; const map = props.map; @@ -43,20 +47,28 @@ export const FlightPlanDraw = props => { let dragCircle = []; let dragCircleEve = []; - let check; - let distanceMarker = []; + // const handleBufferList = () => { + // dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); + // } + useEffect(() => { drawInit(); }, [mapControl.drawType]) - + useEffect(() => { - handleDetailDrwa(); + handleDetailDraw(); }, [props.areaCoordList]) + useEffect(() => { + props.handleConfirm(props.areaCoordList); + // handleBufferList(); + + console.log(props.areaCoordList, '>>>>>>areaCoordList') + }, [figure]) + const drawInit = () => { - console.log(mapControl.drawType); if (mapControl.drawType === 'LINE') { onClickButton('LINE'); } else if (mapControl.drawType === 'CIRCLE') { @@ -97,12 +109,11 @@ export const FlightPlanDraw = props => { setDragCircle([]); setBuffer(); } - if (pastCircle) { + if (pastCircle.length != 0) { console.log('clear circle ', pastCircle) pastCircle.forEach(prev => prev.setMap(null)) naver.maps.Event.removeListener(pastClickEve); - // setCircle(); setCircle([]); } if (pastPolygon) { @@ -113,7 +124,7 @@ export const FlightPlanDraw = props => { setPolygon(); setDragCircle([]); } - if (pastMarker) { + if (pastMarker.length != 0) { console.log('clear marker ', pastMarker) pastMarker.forEach(m => m.setMap(null)); } @@ -128,13 +139,14 @@ export const FlightPlanDraw = props => { if (!mode) return; if(pastClickEve) { - console.log('<>>') naver.maps.Event.removeListener(pastClickEve); } if (mode === 'LINE') { - setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) })) + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) }); + setClickEve(Eve.clickEve); } else if (mode === 'POLYGON') { - setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) })) + 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) })) } @@ -144,10 +156,10 @@ export const FlightPlanDraw = props => { console.log('removeListener') naver.maps.Event.removeListener(Eve.clickEve); + naver.maps.Event.removeListener(pastClickEve); naver.maps.Event.removeListener(Eve.mousedownEve); naver.maps.Event.removeListener(Eve.rightclickEve); if (!circle) $(document).off('mousemove.measure'); - naver.maps.Event.removeListener(pastClickEve); } const finishDraw = () => { @@ -171,6 +183,8 @@ export const FlightPlanDraw = props => { } polyline.setMap(null) + setFigure(polyline) + } else if (polygon) { let path = polygon.getPath(); path.pop(); @@ -181,6 +195,7 @@ export const FlightPlanDraw = props => { setAreaInfo(polygonpaths); polygon.setMap(null) + setFigure(polygon) } } @@ -188,44 +203,42 @@ export const FlightPlanDraw = props => { console.log('onClickPolyline') var coord = e.coord; - // if (!check) { - if (!polyline) { - //가이드라인 - guideline = new naver.maps.Polyline({ - strokeColor: '#283046', - strokeWeight: 2, - strokeOpacity: 0.3, - path: [coord], - map: map - }); - lastDistance = guideline.getDistance(); - - //실제 사용되는 라인 - polyline = new naver.maps.Polyline({ - strokeLineCap: 'round', - strokeLineJoin: 'round', - // strokeColor: '#283046', - strokeColor: '#ff0000', - strokeWeight: 3, - strokeOpacity: 1, - path: [coord], - map: map - }); + if (!polyline) { + //가이드라인 + guideline = new naver.maps.Polyline({ + strokeColor: '#283046', + strokeWeight: 2, + strokeOpacity: 0.3, + path: [coord], + map: map + }); + lastDistance = guideline.getDistance(); + + //실제 사용되는 라인 + polyline = new naver.maps.Polyline({ + strokeLineCap: 'round', + strokeLineJoin: 'round', + // strokeColor: '#283046', + strokeColor: '#ff0000', + strokeWeight: 3, + strokeOpacity: 1, + path: [coord], + map: map + }); - Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) - $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); }); + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) + $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); }); - lastDistance = polyline.getDistance(); - addMileStone(coord, 'Start') - } else { - guideline.setPath([e.coord]); - polyline.getPath().push(coord); + lastDistance = polyline.getDistance(); + addMileStone(coord, 'Start') + } else { + guideline.setPath([e.coord]); + polyline.getPath().push(coord); - var distance = polyline.getDistance(); - addMileStone(coord, fromMetersToText(distance - lastDistance)); - lastDistance = distance; - } - // } + var distance = polyline.getDistance(); + addMileStone(coord, fromMetersToText(distance - lastDistance)); + lastDistance = distance; + } } const onMouseMovePolyline = (e) => { @@ -309,15 +322,12 @@ export const FlightPlanDraw = props => { // setCircle(circle); setCircle(prev => ([...prev, circle])) setAreaInfo(''); + setFigure(circle) } const onMouseDownDrag = (index) => { console.log('onMouseDownDrag') - if (circle) { - naver.maps.Event.removeListener(Eve.clickEve); - } - map.setOptions({ draggable: false, pinchZoom: false, @@ -335,8 +345,6 @@ export const FlightPlanDraw = props => { const onMouseMoveDrag = (e, index) => { console.log('onMouseMoveDrag') - check = true; - var proj = map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); @@ -407,33 +415,31 @@ export const FlightPlanDraw = props => { var path = polyline.getPath()._array; setPolyline(polyline); setAreaInfo(path); - // props.handleBufferList(); + setFigure(polyline); } if (polygon) { var path = polygon.getPath()._array; setPolygon(polygon); setAreaInfo(path); + setFigure(polygon); } $(document).off('mousemove.measure'); $(document).off('mouseup.measure'); if (circle) { - // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); }) setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) - // setCircle(circle); setCircle(prev => ([...prev, circle])) setAreaInfo(''); + setFigure(circle) } - - check = false; } const setAreaInfo = (path) => { areaInfo = { coordinates: [], - bufferZone: 0, + bufferZone: 100, }; let prePath = []; @@ -465,7 +471,7 @@ export const FlightPlanDraw = props => { areaInfo.bufferZone = circle.getRadius(); areaInfo.areaType = 'CIRCLE'; } - console.log(areaInfo, 'areaInfo') + // console.log(areaInfo, 'areaInfo') props.handleCoordinates(areaInfo); } @@ -476,14 +482,13 @@ export const FlightPlanDraw = props => { } } - const handleDetailDrwa = () => { - if (props.areaCoordList) { - console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>') + const handleDetailDraw = () => { + if (props.areaCoordList) { + console.log('handleDetailDraw') const areas = props.areaCoordList[0]; - const paths = []; - + const paths = []; //coordList의 위경도 값 담길 배열 areas.coordList.forEach((coord) => { const path = new naver.maps.LatLng(coord.lat, coord.lon) @@ -527,7 +532,7 @@ export const FlightPlanDraw = props => { setDragCircle(dragCircle); - if (areas.bufferCoordList) { + if (areas.bufferCoordList) { const bufferPaths = []; areas.bufferCoordList.forEach((bfCoord) => { @@ -596,13 +601,12 @@ export const FlightPlanDraw = props => { if (areas.areaType && areas.areaType === 'CIRCLE') { //circle 생성 if(pastCircle) { - // pastCircle.setMap(null); - console.log(pastCircle) pastCircle.forEach(prev => prev.setMap(null)); } - if(circle) { - circle.setMap(null); - } + // if(circle) { + // console.log(circle, '>>>circle') + // circle.setMap(null); + // } // radiusline = new naver.maps.Polyline({ // strokeStyle: [4, 4], // strokeOpacity: 0.6, @@ -672,8 +676,5 @@ export const FlightPlanDraw = props => { return text; } - return ( - <> - - ); + return null; }; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index 3ae27cb..fe746bd 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -16,11 +16,21 @@ const FlightPlanAreaContainer = ({handleModal}) => { const { publicAreaList} = useSelector(state => state.flightState); const [airArea, setAirArea] = useState(null); + useEffect(() => { + dispatch(drawTypeChangeAction('')); + getAirAreaList(); + }, []); + + useEffect(() => { + setAirArea(publicAreaList); + }, [publicAreaList]) + + const getAirAreaList = () => { dispatch(Actions.PUBLIC_AREA_LIST.request()); } - const handleConfirm = (areaList) => { + const handleConfirm = (areaList) => { if(areaList === undefined) { alert('영역을 설정해주세요.') return false; @@ -29,16 +39,6 @@ const FlightPlanAreaContainer = ({handleModal}) => { dispatch(Actions.AREA_COORDINATE_LIST_SAVE(areaList)) } - useEffect(() => { - dispatch(drawTypeChangeAction('')); - getAirAreaList(); - }, []); - - useEffect(() => { - setAirArea(publicAreaList); - }, [publicAreaList]) - - return (