From 365dceb4843568d3b988b6858d1a7083a0def6bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Tue, 19 Jul 2022 18:03:34 +0900 Subject: [PATCH] =?UTF-8?q?=EC=97=B0=EA=B2=B0=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/plan/FlightPlanAreaDetailForm.js | 193 +++++ .../flight/plan/FlightPlanAreaDetailModal.js | 40 ++ .../basis/flight/plan/FlightPlanAreaMap.js | 39 +- .../basis/flight/plan/FlightPlanAreaModal.js | 30 +- .../basis/flight/plan/FlightPlanForm.js | 75 +- .../map/naver/draw/FlightPlanDrawTest.js | 671 +++++++++++------- .../flight/plan/FlightPlanAreaContainer.js | 72 +- .../plan/FlightPlanAreaDetailContainer.js | 45 ++ 8 files changed, 809 insertions(+), 356 deletions(-) create mode 100644 src/components/basis/flight/plan/FlightPlanAreaDetailForm.js create mode 100644 src/components/basis/flight/plan/FlightPlanAreaDetailModal.js create mode 100644 src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js new file mode 100644 index 0000000..3c4cecd --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -0,0 +1,193 @@ +import React, { useEffect, useState } from 'react'; +import { + Card, + CardBody, + Col, + FormGroup, + Input, + Label, + Row, + Button +} from 'reactstrap'; +import { useDispatch, useSelector } from 'react-redux'; +import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; +import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw'; +import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; +import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest'; + +const FlightPlanAreaDetailForm = (props) => { + const dispatch = useDispatch(); + const naver = window.naver; + // const airArea = props.airArea; + + const mapControl = useSelector(state => state.controlMapReducer); + + const [map, setMap] = useState(); + const [isMapLoad, setIsMapLoad] = useState(false); + const [mode, setMode] = useState(); + + // useEffect(() => { + // setIsMapLoad(true); + // }, [airArea]); + + // useEffect(() => { + // ModeInit(); + // }, [mapControl.drawType]) + + // const ModeInit = () => { + // setMode(mapControl.drawType) + // } + + return ( + + +
+
+
+

비행 구역 상세 정보

+
+
+ +
+
+
+

좌표

+
+ +
+ + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + +
+
+ +
+
+

기타정보

+
+ +
+ + + +
+ + +
+
+ +
+ + + + + + + + + +
+
+
+
+ +
+ + 등록 + + + 닫기 + +
+ + + ) +} + +export default FlightPlanAreaDetailForm; \ No newline at end of file diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js b/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js new file mode 100644 index 0000000..5b62a6d --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js @@ -0,0 +1,40 @@ +import { useEffect, useState } from 'react'; +import { Modal, ModalHeader, ModalBody } from 'reactstrap'; +import FlightPlanAreaDetailContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaDetailContainer'; + +export const FlightPlanAreaDetailModal = props => { + + const [onSubmit, setOnSubmit] = useState(false); + + useEffect(() => { + console.log('비행구역 상세정보 모달') + }, []) + + return ( +
+ + // props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) + // } + className='modal-dialog-centered modal-xl' + > + + props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) + } + > + {props.modal.title} + + + + + +
+ ); +}; diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index e512252..6750814 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -6,20 +6,20 @@ import { } from 'reactstrap'; import { useDispatch, useSelector } from 'react-redux'; import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; -import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw'; +import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest'; -import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; const FlightPlanAreaMap = (props) => { const dispatch = useDispatch(); const naver = window.naver; const airArea = props.airArea; + const openModal = props.openModal; const mapControl = useSelector(state => state.controlMapReducer); const [map, setMap] = useState(); const [isMapLoad, setIsMapLoad] = useState(false); - const [test, setTest] = useState(); + const [mode, setMode] = useState(); useEffect(() => { NaverMapInit(); @@ -30,12 +30,11 @@ const FlightPlanAreaMap = (props) => { }, [airArea]); useEffect(() => { - testt(); - }, [mapControl]) + ModeInit(); + }, [mapControl.drawType]) - const testt = () => { - setTest(mapControl.drawType) - // console.log(test, 'test'); + const ModeInit = () => { + setMode(mapControl.drawType) } const NaverMapInit = () => { @@ -43,7 +42,7 @@ const FlightPlanAreaMap = (props) => { // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), center: new naver.maps.LatLng(37.520357, 126.610166), // zoom: 10, - zoom:17, + zoom:15, zoomControl: true, mapTypeId: naver.maps.MapTypeId.NORMAL, zoomControlOptions: { @@ -60,6 +59,10 @@ const FlightPlanAreaMap = (props) => { dispatch(drawTypeChangeAction(val)); }; + const handlerDrawCheck = val => { + dispatch(drawCheckAction(val)); + }; + return ( @@ -76,21 +79,24 @@ const FlightPlanAreaMap = (props) => { - {/* 확인 handlerDrawType('RESET')} > 초기화 - */} + @@ -103,7 +109,6 @@ const FlightPlanAreaMap = (props) => { handlerDrawType('LINE')} > WayPoint @@ -116,8 +121,8 @@ const FlightPlanAreaMap = (props) => { Circle handlerDrawType('POLYGON')} + color='primary' + onClick={e => handlerDrawType('POLYGON')} > Polygon diff --git a/src/components/basis/flight/plan/FlightPlanAreaModal.js b/src/components/basis/flight/plan/FlightPlanAreaModal.js index 49ce4e4..08d4d00 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaModal.js +++ b/src/components/basis/flight/plan/FlightPlanAreaModal.js @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; @@ -6,13 +6,18 @@ export const FlightPlanAreaModal = props => { const [onSubmit, setOnSubmit] = useState(false); + useEffect(() => { + console.log('비행구역설정 모달') + }, []) + return (
- props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) - } + //없어도 문제되는거 없는더 왜 있지 + // toggle={() => + // props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) + // } className='modal-dialog-centered modal-xl' > { - {/* - - */}
); diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 555fbd1..9b7891e 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -49,7 +49,8 @@ const FlightPlanForm = (props) => { type='text' id='applicantNm' name='applicantNm' - size='sm' + // size='sm' + bsSize='sm' // innerRef={props.data} placeholder='' /> @@ -62,7 +63,8 @@ const FlightPlanForm = (props) => { type='text' id='applicantBirthDt' name='applicantBirthDt' - size='sm' + // size='sm' + bsSize='sm' // innerRef={props.data} placeholder='' /> @@ -79,7 +81,8 @@ const FlightPlanForm = (props) => { type='text' id='applicantPhone' name='applicantPhone' - size='sm' + // size='sm' + bsSize='sm' // innerRef={props.data} placeholder='' /> @@ -92,7 +95,8 @@ const FlightPlanForm = (props) => { type='text' id='applicantPhone' name='applicantPhone' - size='sm' + // size='sm' + bsSize='sm' // innerRef={props.data} placeholder='' /> @@ -145,7 +149,8 @@ const FlightPlanForm = (props) => { - + {/* */} + @@ -153,7 +158,8 @@ const FlightPlanForm = (props) => { - + {/* */} + @@ -165,7 +171,8 @@ const FlightPlanForm = (props) => { type='select' name='arcrftTypeCd' id='arcrftTypeCd' - size='sm' + // size='sm' + bsSize='sm' // innerRef={props.data} // className={classnames({ // 'is-invalid': props.errors.arcrftTypeCd @@ -276,7 +283,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -292,7 +300,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='반경' readOnly /> @@ -302,7 +311,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='고도' readOnly /> @@ -322,7 +332,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -337,7 +348,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -352,7 +364,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -383,7 +396,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -398,7 +412,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -418,7 +433,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='+82' readOnly /> @@ -428,7 +444,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='010-0000-0000' readOnly @@ -445,7 +462,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -475,7 +493,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -490,7 +509,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -509,7 +529,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='' readOnly /> @@ -525,7 +546,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='m' readOnly /> @@ -535,7 +557,8 @@ const FlightPlanForm = (props) => { type='text' id='ownerNm' name='ownerNm' - size='sm' + // size='sm' + bsSize='sm' placeholder='ft' readOnly /> @@ -551,7 +574,8 @@ const FlightPlanForm = (props) => { { 삭제 diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 5274f16..2312215 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -1,36 +1,50 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; +import { Button } from 'reactstrap'; import { useDispatch, useSelector } from 'react-redux'; import $ from 'jquery'; -import { - Button -} from 'reactstrap'; - +import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; import buffer from '@turf/buffer' export const FlightPlanDrawTest = props => { + const dispatch = useDispatch(); const mapControl = useSelector(state => state.controlMapReducer); + const draw = useSelector(state => state.basisFlightDrawReducer); + + const [pastPolyline, setPolyline] = useState(); + const [pastBuffer, setBuffer] = useState(); + + const [pastPolygon, setPolygon] = useState(); + + const [pastCircle, setCircle] = useState(); + const [pastEve, setEve] = useState(); + + const [pastDragCircle, setDragCircle] = useState([]); + const naver = props.naver; const map = props.map; - let mode = props.type; + const openModal = props.openModal; + let mode = props.mode; + + let areaInfo; + let lastDistance; - let polylineListeners; let polyline; let guideline; - let lastDistance; let bufferPolyline; - let polygonListeners; let polygon; - let circleListeners; let circle; - let guidecircle; let radiusline; - let circleInfo; - let mousedownEve; - let clickEve; - let mouseupEve; + let Eve = { + clickEve: '', + mousedownEve: '', + rightclickEve: '' + } + + let dragCircle = []; + let dragCircleEve = []; let check; @@ -38,22 +52,43 @@ export const FlightPlanDrawTest = props => { drawInit(); }, [mapControl.drawType]) + const handlerDrawType = val => { + dispatch(drawTypeChangeAction(val)); + }; + + // useEffect(() => { + // onClickCheck(); + // }, [mapControl.drawCheck]) + + const zoomChange = () => { + let change; + if(change) { + naver.maps.Event.removeListener(change); + } else { + change = naver.maps.Event.addListener(map, 'zoom_changed', function() { + if(dragCircle) { + // dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5)); + // dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25)); + } + }) + } + } + const drawInit = () => { if(mapControl.drawType==='LINE') { - console.log('line') - onClickButton('line'); + onClickButton('LINE'); } else if(mapControl.drawType==='CIRCLE') { - console.log('circle') - onClickButton('circle'); + onClickButton('CIRCLE'); } else if(mapControl.drawType==='POLYGON') { - console.log('polygon') - onClickButton('polygon'); + onClickButton('POLYGON'); + } else if(mapControl.drawType==='RESET') { + onClickButton('RESET') } - } const onClickButton = (newMode) => { console.log('onClickButton'); + zoomChange(); clearMode(mode); @@ -67,203 +102,139 @@ export const FlightPlanDrawTest = props => { startMode(newMode); } - const clearMode = (mode) => { + const clearMode = (mode) => { console.log('clearMode') if(!mode) return; - if (mode === 'line') { - if(polyline) { - polyline.setMap(null); - polyline = ''; + if (mode === 'LINE') { + if(pastPolyline) { + pastPolyline.setMap(null); + setPolyline(); + pastBuffer.setMap(null); + setBuffer(); + pastDragCircle.forEach(prev => prev.setMap(null)); + setDragCircle([]); } - finishPolyline(); - } else if(mode === 'polygon') { - if(polygon) { - polygon.setMap(null); - polygon = ''; + + } else if(mode === 'POLYGON') { + if(pastPolygon) { + pastPolygon.setMap(null); + setPolygon(); + pastDragCircle.forEach(prev => prev.setMap(null)); + setDragCircle([]); } - finishPolygon(); - } else if(mode === 'circle') { - if(circle) { - circle.setMap(null); - circle = ''; + } else if(mode === 'CIRCLE') { + if(pastCircle) { + pastCircle.setMap(null); + setCircle(); + naver.maps.Event.removeListener(pastEve); } - finishCircle(); } + finishDraw(); } const startMode = (mode) => { console.log('startMode') - if (!mode) return; - if (mode === 'line') { - startPolyline(); - } if (mode === 'polygon') { - startPolygon(); - } if (mode === 'circle') { - startCircle(); + console.log(polyline, 'polyline', pastPolyline, 'pastPolyline'); + console.log(polygon, 'polygon', pastPolygon, 'pastPolygon'); + console.log(circle, 'circle', pastCircle, 'pastCircle'); + if (!mode) return; + + if (mode === 'LINE') { + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolyline(e) }); + } else if (mode === 'POLYGON') { + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolygon(e) }); + } else if (mode === 'CIRCLE') { + setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) })) } } - const startPolyline = () => { - console.log('startPolyline') - // var map = this.map; - polylineListeners = [ - naver.maps.Event.addListener(map, 'click', function(e) { - onClickPolyline(e); - }) - ]; - } - - const startPolygon = () => { - console.log('startPolygon') - - polygonListeners = [ - naver.maps.Event.addListener(map, 'click', function(e) { - onClickPolygon(e); - }), - naver.maps.Event.addListener(map, 'rightclick', function(e) { - finishPolygon(); - }) - ]; - - $(document).on('mousemove.measure', function(e) { - onMouseMovePolygon(e); - }) - } - - const startCircle = () => { - console.log('startCircle') - - clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) }) + const removeListener = () => { + console.log('removeListener') + + naver.maps.Event.removeListener(Eve.clickEve); + naver.maps.Event.removeListener(Eve.mousedownEve); + naver.maps.Event.removeListener(Eve.rightclickEve); + if(!circle) $(document).off('mousemove.measure'); + // if(pastCircle) naver.maps.Event.removeListener(pastEve); + naver.maps.Event.removeListener(pastEve); } - const finishPolyline = () => { - console.log('finishPolyline') - - naver.maps.Event.removeListener(polylineListeners); - polylineListeners = []; - - $(document).off('mousemove.measure'); - - if(guideline) { - guideline.setMap(null); - guideline = ''; - } - + const finishDraw = () => { + console.log('finishDraw') + removeListener(); if(polyline) { let polypaths = polyline.getPath()._array; - - //파싱 - let polypathJSON = new Array(); - for(let i = 0; i< polypaths.length; i++) { - //파싱 - let obj = new Object(); - - obj.x = '' + polypaths[i]._lng + ''; - obj.y = '' + polypaths[i]._lat + ''; - - obj = JSON.stringify(obj); - polypathJSON.push(JSON.parse(obj)); + + if(guideline) { + guideline.setMap(null); + guideline = ''; } - console.log(polypathJSON, 'json polyline path'); + + if(polypaths.length >= 2) { + //꼭짓점 circle 생성 + for(let index = 0; index < polypaths.length; index++) { + dragCircle.push( + new naver.maps.Circle({ + strokeOpacity: 1, + strokeColor: '#000000', + fillColor: '#ffffff', + fillOpacity: 1, + center: polypaths[index], + radius: 10, + map: map, + clickable: true + }) + ) + + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) + } + setDragCircle(dragCircle); - //버퍼 생성에 필요한 coordinates 배열 변환 - let lineStringPaths = []; - for(let i = 0; i< polyline.getPath().length; i++) { - lineStringPaths.push([polyline.getPath()._array[i].x, polyline.getPath()._array[i].y]); + //파싱 + let polypathJSON = new Array(); + for(let i = 0; i< polypaths.length; i++) { + let obj = new Object(); + + obj.x = '' + polypaths[i]._lng + ''; + obj.y = '' + polypaths[i]._lat + ''; + + obj = JSON.stringify(obj); + polypathJSON.push(JSON.parse(obj)); + } + // console.log(polypathJSON, 'json polyline path'); + bufferMove(); + } else { + polyline.setMap(null); + polyline = ''; } - console.log(lineStringPaths, 'polyline path') - - //버퍼 생성을 위한 line 객체 - const originalGeojson = { - type: "FeatureCollection", - features: [ - { - type: "Feature", - properties: {}, - geometry: { - type: "LineString", - coordinates: lineStringPaths - } - } - ] - }; - console.log(originalGeojson) - //버퍼 객체 - const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); - - //버퍼 라인 생성 - let bufferPath = bufferObj.features[0].geometry.coordinates[0]; - console.log(bufferPath, 'buffer path') - - bufferPolyline = new naver.maps.Polyline({ - strokeColor: '#ff0000', - strokeWeight: 2, - strokeStyle: [4, 4], - strokeOpacity: 0.6, - path : bufferPath, - map: map - }); - - polyline = ''; - } - - mode = null; - } - - const finishPolygon = () => { - console.log('finishPolygon') - naver.maps.Event.removeListener(polygonListeners); - polygonListeners = []; - - $(document).off('mousemove.measure'); - - if(polygon) { - var path = polygon.getPath(); + } else if(polygon) { + let path = polygon.getPath(); path.pop(); - polygon = ''; - } - - mode = null; - } - - const finishCircle = () => { - console.log('finishCircle') - - naver.maps.Event.removeListener(clickEve); - naver.maps.Event.removeListener(onmousedown); - naver.maps.Event.removeListener(onmouseup); - - if(circle) { - circleInfo = { - center: circle.getCenter(), - radius: circle.getRadius() + let polygonpaths = polygon.getPath()._array; + //꼭짓점 circle 생성 + for(let index = 0; index < polygonpaths.length; index++) { + dragCircle.push( + new naver.maps.Circle({ + strokeOpacity: 1, + strokeColor: '#000000', + fillColor: '#ffffff', + fillOpacity: 1, + center: polygonpaths[index], + radius: 10, + map: map, + clickable: true + }) + ) + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) } - - circle.setMap(null); - circle = ''; - radiusline.setMap(null); - radiusline = ''; - } - - mode = null; - console.log(circleInfo); - } - - const finishMode = () => { - console.log('finishMode') - if(!mode) return; - - if(mode === 'LINE') { - finishPolyline(); - } else if(mode === 'POLYGON') { - finishPolygon(); - } else if(mode === 'CIRCLE') { - finishCircle(); + setDragCircle(dragCircle); + setPolygon(polygon); + setAreaInfo(polygonpaths, ''); } } @@ -271,49 +242,43 @@ export const FlightPlanDrawTest = props => { console.log('onClickPolyline') var coord = e.coord; - if(!polyline) { - guideline = new naver.maps.Polyline({ - strokeColor: '#0000ff', - strokeWeight: 5, - strokeStyle: [4, 4], - strokeOpacity: 0.2, - path: [coord], - // path: [0], - map: map - }); - - // lastDistance = guideline.getDistance(); - - // distanceListeners.push(naver.maps.Event.addListener(map, 'mousemove', onMouseMoveDistance(e))); - $(document).on('mousemove.measure', function(e) { - onMouseMovePolyline(e); - }); - polylineListeners.push(naver.maps.Event.addListener(map, 'rightclick', function() { - finishPolyline(); - })); - - polyline = new naver.maps.Polyline({ - strokeLineCap: 'round', - strokeLineJoin: 'round', - strokeColor: '#0000ff', - strokeWeight: 5, - strokeOpacity: 0.6, - path: [coord], - // path: [0], - map: map - }); - - lastDistance = polyline.getDistance(); - // this._addMileStone(coord, 'Start'); - } else { - guideline.setPath([e.coord]); - polyline.getPath().push(coord); - - var distance = polyline.getDistance(); - // addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); - lastDistance = distance; - } - + 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', + 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); }); + + lastDistance = polyline.getDistance(); + // this._addMileStone(coord, 'Start'); + } else { + guideline.setPath([e.coord]); + polyline.getPath().push(coord); + + var distance = polyline.getDistance(); + // addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); + lastDistance = distance; + } + } } const onMouseMovePolyline = (e) => { @@ -335,12 +300,16 @@ export const FlightPlanDrawTest = props => { if(!polygon) { polygon = new naver.maps.Polygon({ - strokeOpacity: 0.8, - fillColor: '#0000ff', + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', fillOpacity: 0.1, paths: [coord], map: map }); + + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) + $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) }); } else { polygon.getPath().push(coord); } @@ -369,17 +338,18 @@ export const FlightPlanDrawTest = props => { if(!circle) { //가이드라인 radiusline = new naver.maps.Polyline({ - strokeStyle: [4, 4], - strokeOpacity: 0.6, + // strokeStyle: [4, 4], + // strokeOpacity: 0.6, path: [coord], - map: map + // map: map }); lastDistance = radiusline.getDistance(); //실제 사용되는 원형 circle = new naver.maps.Circle({ - strokeOpacity: 0.8, - fillColor: '#0000ff', + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', fillOpacity: 0.1, center: coord, radius: 100, @@ -387,22 +357,25 @@ export const FlightPlanDrawTest = props => { clickable: true }); - mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function(e) { onMouseDownCircle(e); }) + Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); }) } else { circle.setRadius(100); circle.setCenter(coord); radiusline.setPath([coord]) } - } else { - + setCircle(circle); + setAreaInfo('', ''); } + } - const onMouseDownCircle = (e) => { - console.log('onMouseDownCircle') - - naver.maps.Event.removeListener(clickEve); + const onMouseDownDrag = (index) => { + console.log('onMouseDownDrag') + + if(circle) { + naver.maps.Event.removeListener(Eve.clickEve); + } map.setOptions({ draggable: false, @@ -414,30 +387,68 @@ export const FlightPlanDrawTest = props => { disableTwoFingerTapZoom: true }) - $(document).on('mousemove.measure', function(e) { onMouseMoveCircle(e); }); - $(document).on('mouseup.measure', function(e) { onMouseUpCircle(e); }); + $(document).on('mousemove.measure', function(e) { onMouseMoveDrag(e, index) }); + $(document).on('mouseup.measure', function() { onMouseUpDrag() }); } - const onMouseMoveCircle = (e) => { - console.log('onMouseMoveCircle') + const onMouseMoveDrag = (e, index) => { + console.log('onMouseMoveDrag') check = true; var proj = map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - path = radiusline.getPath(), - center = circle.getCenter(), - r = proj.getDistance(coord, center); + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); - if(path.getLength() === 2) { - path.pop(); + if(polyline) { + var polypaths = polyline.getPath()._array; + + let movepath = []; + for(let i = 0; i < polypaths.length; i++) { + let path; + if(i === index) { + path = coord; + } else { + path = polypaths[i] + } + movepath.push(path); + } + + polyline.setPath(movepath); + + } else if(polygon) { + var polygonpaths = polygon.getPath()._array; + + let movepath = []; + for(let i = 0; i < polygonpaths.length; i++) { + let path; + if(i === index) { + path = coord; + } else { + path = polygonpaths[i] + } + movepath.push(path); + } + polygon.setPaths(movepath) + + } else if(circle) { + var circlepath = radiusline.getPath(), + center = circle.getCenter(), + r = proj.getDistance(coord, center); + + if(circlepath.getLength() === 2) { + circlepath.pop(); + } + circlepath.push(coord); + circle.setRadius(r); + } + + if(!circle) { + dragCircle[index].setCenter(coord); } - path.push(coord); - circle.setRadius(r); } - const onMouseUpCircle = (e) => { - console.log('onMouseUpCircle') + const onMouseUpDrag = () => { + console.log('onMouseUpDrag') map.setOptions({ draggable: true, @@ -449,28 +460,154 @@ export const FlightPlanDrawTest = props => { disableTwoFingerTapZoom: false }) + if(polyline) { + bufferPolyline.setMap(null); + bufferMove(); + } + + if(polygon) { + var path = polygon.getPath()._array; + setPolygon(polygon); + setAreaInfo(path, ''); + } + $(document).off('mousemove.measure'); $(document).off('mouseup.measure'); - clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); }) + if(circle) { + // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); }) + setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) })) + setCircle(circle); + setAreaInfo('', ''); + } + check = false; } + const setAreaInfo = (path, bufferpath) => { + areaInfo = ''; + + let prePath = []; + path.forEach(prev=> prePath.push([prev.x, prev.y])) + + if(polyline) { + areaInfo = { + linepath: prePath, + linebuffer: 50, + bufferpath: bufferpath + } + } else if(polygon) { + areaInfo = { + polygonpath: prePath + } + } else if(circle) { + areaInfo = { + center: circle.getCenter(), + radius: circle.getRadius() + } + } + console.log(areaInfo, 'areaInfo') + } + + const bufferMove = () => { + console.log('bufferMove') + + //버퍼 생성에 필요한 coordinates 배열 변환 + let lineStringPaths = []; + for(let i = 0; i< polyline.getPath().length; i++) { + lineStringPaths.push([polyline.getPath()._array[i].x, polyline.getPath()._array[i].y]); + } + // console.log(lineStringPaths, 'polyline path') + + //버퍼 생성을 위한 line 객체 + const originalGeojson = { + type: "FeatureCollection", + features: [ + { + type: "Feature", + properties: {}, + geometry: { + type: "LineString", + coordinates: lineStringPaths + } + } + ] + }; + // console.log(originalGeojson, 'Feature type Object') + + //버퍼 객체 + const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); + + //버퍼 라인 생성 + let bufferPath = bufferObj.features[0].geometry.coordinates[0]; + // console.log(bufferPath, 'buffer path') + + bufferPolyline = new naver.maps.Polyline({ + // strokeColor: '#ff0000', + strokeColor: '#283046', + strokeWeight: 2, + strokeStyle: [4, 4], + strokeOpacity: 1, + path : bufferPath, + map: map + }); + + setAreaInfo(polyline.getPath()._array, bufferPath); + setPolyline(polyline); + setBuffer(bufferPolyline) + } + + const onClickCheck = () => { + console.log('onClickReset') + // if(!mapControl.drawType) return; + + if(mapControl.drawCheck === 'RESET') { + clearMode(mode); + mode = newMode; + + startMode(newMode); + // removeListener(); + // if(polyline) { + // polyline.setMap(null); + // polyline = ''; + // guideline.setMap(null); + // guideline = ''; + // bufferPolyline.setMap(null); + // bufferPolyline = ''; + // } + // if(polygon) { + // console.log(polygon) + // polygon.setMap(null); + // polygon = ''; + // } + // if(circle) { + // circle.setMap(null); + // circle = ''; + // radiusline.setMap(null); + // radiusline = ''; + // } + + } + + } + return ( <> - finishMode(e)} + onClick = {props.openModal} > 확인 handlerDrawCheck('RESET')} + onClick={e => handlerDrawType('RESET')} > 초기화 - + */} ); }; \ 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 b182d37..d653ee9 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -2,12 +2,13 @@ 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 FlightPlanAreaForm from '../../../../components/basis/flight/plan/FlightPlanAreaForm'; import {Col, Row, Form } 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 FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap'; +import FlightPlanAreaDetailContainer from './FlightPlanAreaDetailContainer'; +import { FlightPlanAreaDetailModal } from '../../../../components/basis/flight/plan/FlightPlanAreaDetailModal'; const FlightPlanAreaContainer = (props) => { const dispatch = useDispatch(); @@ -15,6 +16,11 @@ const FlightPlanAreaContainer = (props) => { const { areaList } = useSelector(state => state.flightState); const [airArea, setAirArea] = useState(null); + const [modal, setModal] = useState({ + isOpen: false, + title: '', + body: + }); const validSchema = yup.object().shape({ }); @@ -29,17 +35,29 @@ const FlightPlanAreaContainer = (props) => { resolver: yupResolver(validSchema) }); + const saveFlightPlanAreaDetail = () => { + console.log("비행 구역 상세정보 저장") + } + + const openModal = () => { + setModal({ + isOpen: true, + title: '비행 구역 상세 정보' + }); + } + + //이거 실행하면 Network탭에 area생김 const getAirAreaList = () => { dispatch(Actions.AREA_LIST.request()); } - const createAirArea = async data => { - dispatch(Actions.FLIGHT_PLAN_AREA.request(data)); + // const createAirArea = async data => { + // dispatch(Actions.FLIGHT_PLAN_AREA.request(data)); - props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); - props.setOnSubmit(false); - } + // props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); + // props.setOnSubmit(false); + // } useEffect(() => { getAirAreaList(); @@ -49,27 +67,25 @@ const FlightPlanAreaContainer = (props) => { setAirArea(areaList); }, [areaList]) - return ( - - {/* */} - - {airArea != null ? ( - - ) : null} - - {/* - - */} - - + return ( + + + {airArea != null ? ( + + ) : null} + {modal.isOpen ? ( + + ) : null + } + + ) } diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js new file mode 100644 index 0000000..70ca498 --- /dev/null +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -0,0 +1,45 @@ +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 * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; +import * as yup from 'yup'; +import { yupResolver } from '@hookform/resolvers/yup'; +import FlightPlanAreaDetailForm from '../../../../components/basis/flight/plan/FlightPlanAreaDetailForm'; + +const FlightPlanAreaDetailContainer = (props) => { + const dispatch = useDispatch(); + const history = useHistory(); + + // const { areaList } = useSelector(state => state.flightState); + const [airArea, setAirArea] = useState(null); + + + const validSchema = yup.object().shape({ + }); + + const { register, getValues, setValue, errors, handleSubmit } = useForm({ + defaultValues: { + coodinates: [], + radius: '', + altitude_m: '', + altitude_ft: '', + }, + resolver: yupResolver(validSchema) + }); + + + return ( + + + + + + + ) +} + +export default FlightPlanAreaDetailContainer; \ No newline at end of file