From 831eac7bc3e36a25e24bc73fa806ac372348a547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Wed, 27 Jul 2022 17:30:24 +0900 Subject: [PATCH] =?UTF-8?q?[=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D=EC=84=9C]?= =?UTF-8?q?=20=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD=20merge?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/custom.css | 1 + .../flight/plan/FlightPlanAreaDetailForm.js | 207 +++++ .../flight/plan/FlightPlanAreaDetailModal.js | 31 + .../basis/flight/plan/FlightPlanAreaForm.js | 115 --- .../basis/flight/plan/FlightPlanAreaMap.js | 147 +++- .../basis/flight/plan/FlightPlanAreaModal.js | 49 -- .../basis/flight/plan/FlightPlanForm.js | 5 +- .../basis/flight/plan/FlightPlanPilot.js | 2 +- .../map/naver/draw/FlightPlanDraw.js | 652 ++++++++++++++++ .../map/naver/draw/FlightPlanDrawTest.js | 721 ++++++++++++++++++ .../flight/plan/FlightPlanAreaContainer.js | 58 +- .../plan/FlightPlanAreaDetailContainer.js | 29 + .../control/map/reducers/controlMapReducer.ts | 4 +- 13 files changed, 1793 insertions(+), 228 deletions(-) create mode 100644 src/components/basis/flight/plan/FlightPlanAreaDetailForm.js create mode 100644 src/components/basis/flight/plan/FlightPlanAreaDetailModal.js delete mode 100644 src/components/basis/flight/plan/FlightPlanAreaForm.js delete mode 100644 src/components/basis/flight/plan/FlightPlanAreaModal.js create mode 100644 src/components/map/naver/draw/FlightPlanDraw.js create mode 100644 src/components/map/naver/draw/FlightPlanDrawTest.js create mode 100644 src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 0f44874..70639f7 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -250,6 +250,7 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon .left-menu-nav .test .btn-use{margin-left:20px; width: 35px; height: 35px; display: block; border: 0px solid transparent; box-sizing: content-box !important; background-color: #009cad;} .measure-control{position:absolute; z-index:100;} +.area-button{position:relative; z-index:100; margin-top:10px; margin-left:10px;} .control-btn{margin-left: 7px; border-bottom: solid 1px #283046; margin-bottom:5px;} .buffer-input{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 70px; margin-left: 5px;} diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js new file mode 100644 index 0000000..65aeff3 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -0,0 +1,207 @@ +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 = ({ handleClose }) => { + 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 ( + // + + + + + + + + +
+ {/*
+
+

비행 구역 상세 정보

+
+
*/} + +
+
+
+

좌표 정보

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

기타 정보

+
+ +
+ + + +
+ + +
+
+ +
+ + + + + + + + + +
+
+
+
+ +
+ + 등록 + + handleClose()} + > + 닫기 + +
+ + + + + + + + + ) +} + +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..188b20c --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js @@ -0,0 +1,31 @@ +import { useEffect, useState } from 'react'; +import { Modal, ModalHeader, ModalBody } from 'reactstrap'; +import FlightPlanAreaDetailContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaDetailContainer'; + +export const FlightPlanAreaDetailModal = ({modal, handleModal}) => { + return ( +
+ + handleModal({isOpen: false, title: ''}) + } + className='modal-dialog-centered modal-xl' + > + + handleModal({isOpen: false, title: ''}) + } + > + {modal.title} + + + + + +
+ ); +}; diff --git a/src/components/basis/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js deleted file mode 100644 index 4e9f1c0..0000000 --- a/src/components/basis/flight/plan/FlightPlanAreaForm.js +++ /dev/null @@ -1,115 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import classnames from 'classnames'; -import { - Card, - CardBody, - Col, - FormGroup, - FormFeedback, - Input, - Label, - Row, - Button, - Form -} from 'reactstrap'; - - -const FlightPlanAreaForm = (props) => { - - return ( - - -
-
-
-

상세 정보

-
-
- {/* {props.type === 'update' ? ( - 최종 수정일자 : {props.updateDt} - ) : null} */} -
-
- -
-
-
- - - - - - - - -
-
- - - -
- - -
-
- -
- - - -
- - - 확인 - - - props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) - } - > - 취소 - -
-
-
- - - ) -} - -export default FlightPlanAreaForm; \ No newline at end of file diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index e424b12..0a632a1 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -2,74 +2,173 @@ import React, { useEffect, useState } from 'react'; import { Card, CardBody, - Button + Button, + Row, + Label, + Input, + Col, + FormGroup } from 'reactstrap'; +import { useDispatch, useSelector } from 'react-redux'; import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; +import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; +import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest'; 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 [mode, setMode] = useState(); useEffect(() => { + NaverMapInit(); }, []); - useEffect(() => { + + useEffect(() => { setIsMapLoad(true); }, [airArea]); + useEffect(() => { + ModeInit(); + }, [mapControl.drawType]) + + const ModeInit = () => { + setMode(mapControl.drawType) + } + const NaverMapInit = () => { const mapOptions = { - center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), - zoom: 10, + // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), + center: new naver.maps.LatLng(37.520357, 126.610166), + // zoom: 10, + zoom: 15, zoomControl: true, - mapTypeId: naver.maps.MapTypeId.HYBRID, + mapTypeId: naver.maps.MapTypeId.NORMAL, zoomControlOptions: { - position: naver.maps.Position.TOP_LEFT, - - style: naver.maps.ZoomControlStyle.SMALL + position: naver.maps.Position.LEFT_CENTER, + style: naver.maps.ZoomControlStyle.SMALL } - }; - - setMap(new naver.maps.Map('map', mapOptions)); + }; + + setMap(new naver.maps.Map('map', mapOptions)); + }; + + const handlerDrawType = val => { + dispatch(drawTypeChangeAction(val)); }; + const handlerDrawCheck = val => { + dispatch(drawCheckAction(val)); + }; return ( - +

지도 영역

-
+
-
- - - {isMapLoad ? ( - +
+
+ + + props.handleModal({isOpen: true, title: '비행 구역 상세 정보'})} + > + 확인 + + handlerDrawType('RESET')} + > + 초기화 + + {/* + 적용 + */} + +
+
+ + + {isMapLoad ? ( + ) : null} - -
handlerDrawType('LINE')} > - Line + WayPoint - handlerDrawType('CIRCLE')} > Circle + handlerDrawType('POLYGON')} + > + Polygon +
+ + {mapControl.drawType === 'LINE' ? +
+ + + + + + + handlerDrawType('POLYGON')} + > + 적용 + + + +
+ : + null + } + ) diff --git a/src/components/basis/flight/plan/FlightPlanAreaModal.js b/src/components/basis/flight/plan/FlightPlanAreaModal.js deleted file mode 100644 index 3bcee8f..0000000 --- a/src/components/basis/flight/plan/FlightPlanAreaModal.js +++ /dev/null @@ -1,49 +0,0 @@ -import { useState } from 'react'; -import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; -import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; - -export const FlightPlanAreaModal = props => { - - const [onSubmit, setOnSubmit] = useState(false); - - 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/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 27f4a0e..1ee9f07 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -16,6 +16,7 @@ import {initFlight, initFlightBas} from '../../../../modules/basis/flight/models import FlightPlanPilotContainer from '../../../../containers/basis/flight/plan/FlightPlanPilotContainer'; import { FlightPlanModal } from './FlightPlanModal'; import FlightPlanArcrftContainer from '../../../../containers/basis/flight/plan/FlightPlanArcrftContainer'; +import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal}) => { @@ -347,7 +348,7 @@ const SelectModal = ({handleModal, modal}) => { isOpen = modal.pilot; title = '조종사 조회'; type = 'pilot'; - description = + description = } if(modal.arcrft) { @@ -361,7 +362,7 @@ const SelectModal = ({handleModal, modal}) => { isOpen = modal.area; title = '비행 구역 설정'; type = 'area'; - description = ''; + description = ; } return ( diff --git a/src/components/basis/flight/plan/FlightPlanPilot.js b/src/components/basis/flight/plan/FlightPlanPilot.js index 52089f5..9e4f114 100644 --- a/src/components/basis/flight/plan/FlightPlanPilot.js +++ b/src/components/basis/flight/plan/FlightPlanPilot.js @@ -58,7 +58,7 @@ const FlightPlanPilot = ({ pilotList, handleSelectPilot }) => { name='groupNm' // value={props.params.groupNm} // onChange={props.handlerInput} - size='sm' + size='sm' // onKeyPress={props.onKeyPress} placeholder='그룹명을 입력하세요' /> diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js new file mode 100644 index 0000000..e193de5 --- /dev/null +++ b/src/components/map/naver/draw/FlightPlanDraw.js @@ -0,0 +1,652 @@ +import $ from 'jquery'; +import '../../../../assets/css/custom.css'; +import { CustomInput } from 'reactstrap'; + +import buffer from '@turf/buffer' + +export const FlightPlanDraw = props => { + const {naver} = props; + const {map} = props; + + + var Measure = function(buttons) { + this.$btnLine = buttons.line; + this.$btnPolygon = buttons.polygon; + this.$btnCircle = buttons.circle; + this.$btnRectangle = buttons.rectangle; + + this._mode = null; + + this._bindDOMEvents(); + }; + + $.extend( + Measure.prototype,{ + constructor: Measure, + + setMap: function(map) { + console.log('setMap') + if (this.map) { + this._unbindMap(this.map); + } + + this.map = map; + + if (map) { + this._bindMap(map); + } + }, + + startMode: function(mode) { + console.log('startMode') + if (!mode) return; + + if (mode === 'line') { + this._startDistance(); + } if (mode === 'polygon') { + this._startArea(); + } if (mode === 'circle') { + this._startCircle(); + } if (mode === 'rectangle') { + this._startRectangle(); + } + }, + + _startDistance: function() { + console.log('startDistance') + var map = this.map; + this._distanceListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this)) + ]; + }, + + _startArea: function() { + console.log('startArea') + var map = this.map; + + this._areaListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this)) + ]; + + $(document).on('mousemove.measure', this._onMouseMoveArea.bind(this)); + }, + + _startCircle: function() { + console.log('startCircle') + var map = this.map; + this._circleListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)) + ]; + }, + + _startRectangle: function() { + console.log('startRectangle') + var map = this.map; + this._rectangleListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)) + ] + }, + + _finishDistance: function() { + console.log('finishDistance') + + naver.maps.Event.removeListener(this._distanceListeners); + delete this._distanceListeners; + + $(document).off('mousemove.measure'); + + if (this._guideline) { + this._guideline.setMap(null); + delete this._guideline; + } + + if (this._polyline) { + // console.log(this._polyline.getPath()._array, 'path') + let polypaths = this._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)); + } + console.log(polypathJSON, 'json polyline path') + + + //버퍼 생성에 필요한 coordinates 배열 변환 + let lineStringPaths = []; + for(let i = 0; i < this._polyline.getPath().length; i++) { + lineStringPaths.push([this._polyline.getPath()._array[i].x, this._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) + + //버퍼 객체 + const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); + + //버퍼 라인 생성 + let bufferPath = bufferObj.features[0].geometry.coordinates[0]; + console.log(bufferPath, 'buffer path') + + this.bufferPolyline = new naver.maps.Polyline({ + strokeColor: '#ff0000', + strokeWeight: 2, + strokeStyle: [4, 4], + strokeOpacity: 0.6, + path : bufferPath, + map: map + }); + + // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯 + // this._polyline.setMap(null) + delete this._polyline; + + } + //onfocus()의 반대기능 = blur() + this.$btnLine.removeClass('control-on').blur(); + + this._mode = null; + }, + + _finishArea: function() { + console.log('finishArea') + naver.maps.Event.removeListener(this._areaListeners); + delete this._areaListeners; + + $(document).off('mousemove.measure'); + + if (this._polygon) { + var path = this._polygon.getPath(); + path.pop(); + + delete this._polygon; + } + + this.$btnPolygon.removeClass('control-on').blur(); + + this._mode = null; + }, + + _finishCircle: function() { + console.log('finishCircle') + + naver.maps.Event.removeListener(this._circleListeners); + delete this._circleListeners; + + $(document).off('mousemove.measure'); + + if(this._guidecircle) { + this._guidecircle.setMap(null); + this._radius.setMap(null); + delete this._raidus; + delete this._guidecircle; + } + + if (this._circle) { + // this._circle.setMap(null); + delete this._circle; + } + + this.$btnCircle.removeClass('control-on').blur(); + + // delete this._lastDistance; + this._mode = null; + }, + + _finishRectangle: function() { + console.log('finishRectangle') + + naver.maps.Event.removeListener(this._rectangleListeners); + delete this._rectangleListeners; + + $(document).off('mousemove.measure'); + + if(this._rectangle) { + this._guiderectangle.setMap(null); + delete this._guiderectangle; + } + + this.$btnRectangle.removeClass('control-on').blur(); + + this._mode = null; + }, + + finishMode: function(mode) { + console.log('finishMode') + if (!mode) return; + + if (mode === 'line') { + this._finishDistance(); + } if (mode === 'polygon') { + this._finishArea(); + } if (mode === 'circle') { + this._finishCircle(); + } if (mode === 'rectangle') { + this._finishRectangle(); + } + }, + + _fromMetersToText: function(meters) { + meters = meters || 0; + + var km = 1000, + text = meters; + + if(meters >= km) { + text = parseFloat((meters / km).toFixed(1)) + 'km'; + } else { + text = parseFloat(meters.toFixed(1)) + 'm'; + } + + return text; + }, + + _addMileStone: function(coord, text, css) { + if(!this._ms) this._ms = []; + + let content; + if(text == 'Start') { + content = '
'+ text +'
' + } else { + content = '
'+ text +'
' + } + + var ms = new naver.maps.Marker({ + position: coord, + icon: { + content: content, + anchor: new naver.maps.Point(-5, -5) + }, + map: this.map + }); + + var msElement = $(ms.getElement()); + + if(css) { + msElement.css(css); + } else { + msElement.css('font-size', '13px'); + } + + this._ms.push(ms); + }, + + _onClickDistance: function(e) { + console.log('onClickDistance') + var map = this.map, + coord = e.coord; + + if (!this._polyline) { + // 임시로 보여줄 점선 폴리라인을 생성합니다. + this._guideline = new naver.maps.Polyline({ + strokeColor: '#0000ff', + strokeWeight: 3, + strokeStyle: [4, 4], + strokeOpacity: 0.2, + path: [coord], + map: map + }); + + // this._lastDistance = this._guideline.getDistance(); + + $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); + this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this))); + + // 실제 거리재기에 사용되는 폴리라인을 생성합니다. + this._polyline = new naver.maps.Polyline({ + strokeLineCap: 'round', + strokeLineJoin: 'round', + strokeColor: '#0000ff', + strokeWeight: 3, + strokeOpacity: 0.6, + path: [coord], + map: map + }); + + this._lastDistance = this._polyline.getDistance(); + this._addMileStone(coord, 'Start'); + + } else { + this._guideline.setPath([e.coord]); + this._polyline.getPath().push(coord); + + var distance = this._polyline.getDistance(); + this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); + this._lastDistance = distance; + } + }, + + _onMouseMoveDistance: function(e) { + console.log('onMouseMoveDistance') + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._guideline.getPath(); + + if (path.getLength() === 2) { + //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까 + path.pop(); + } + + // [기존 클릭 좌표, 실시간 좌표] + path.push(coord); + }, + + _onClickArea: function(e) { + console.log('onClickArea') + var map = this.map, + coord = e.coord; + + if (!this._polygon) { + this._polygon = new naver.maps.Polygon({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + paths: [coord], + map: map + }); + } else { + this._polygon.getPath().push(coord); + } + }, + + _onMouseMoveArea: function(e) { + console.log('onMouseMoveArea') + if (!this._polygon) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._polygon.getPath(); + + if (path.getLength() >= 2) { + path.pop(); + } + + path.push(coord); + }, + + _onClickCircle: function(e) { + console.log('onClickCircle') + var map = this.map, + coord = e.coord; + + if(!this._circle) { + + //가이드 라인 + this._radius = new naver.maps.Polyline({ + strokeStyle: [4, 4], + strokeOpacity: 0.6, + path: [coord], + map: map + }); + this._lastDistance = this._radius.getDistance(); + + // 임시로 보여줄 원형 + this._guidecircle = new naver.maps.Circle({ + strokeOpacity: 0.8, + strokeStyle: [4, 4], + fillColor: '#0000ff', + fillOpacity: 0.1, + center: coord, + radius: this._lastDistance, + map: map + }); + + $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this)); + this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))); + + // 실제 사용되는 원형 + this._circle = new naver.maps.Circle({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + center: coord, + radius: this._lastDistance, + map: map + }); + + } else { + // this._guidecircle.setCenter(e.coord); + // this._circle.setCenter(coord); + // if(this._radius.getPath().length() === 2) { + // this._radius.getPath().pop(); + // } + + // this._radius.getPath().push(coord); + + var distance = this._radius.getDistance(); + this._lastDistance = distance; + this._circle.setRadius(this._lastDistance); + + + } + }, + + _onMouseMoveCircle: function(e) { + console.log('onMouseMoveCircle') + if(!this._circle) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._radius.getPath(), + center = this._guidecircle.getCenter(), //LatLng으로 나옴 + r = proj.getDistance(coord, center); + + if(path.getLength() === 2) { + path.pop(); + } + path.push(coord); + this._guidecircle.setRadius(r); + }, + + _onClickRectangle: function(e) { + console.log('onClickRectangle') + var map = this.map, + coord = e.coord; + + this.max_x = 0; + this.max_y = 0; + + + if(!this._rectangle) { + //min = 고정값 + this.fixed = coord; + this.min = [this.fixed.x, this.fixed.y]; + this.max = [this.max_x, this.max_y]; + this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]]; + + // 임시로 보여줄 사각형 + this._guiderectangle = new naver.maps.Rectangle({ + strokeStyle: [4, 4], + strokeOpacity: 0.6, + bounds: this.boundscoord, + map: map + }); + + $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this)); + this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))); + + //실제 사용되는 사각형 + this._rectangle = new naver.maps.Rectangle({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + bounds: this.boundscoord, + map: map + }); + + } else { + this.max = [coord.x, coord.y]; + this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]]; + this._rectangle.setBounds(this.boundscoord); + } + }, + + _onMouseMoveRectangle: function(e) { + console.log('onMouseMoveRectangle') + if(!this._rectangle) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + bounds = this._guiderectangle.getBounds(), + max = [coord.x, coord.y]; + + this.boundscoord = [this.min[0], this.min[1],max[0], max[1]]; + this._guiderectangle.setBounds(this.boundscoord); + }, + + _bindMap: function(map) { + console.log('bindMap') + }, + + _unbindMap: function() { + console.log('unbindMap') + this.unbindAll(); + }, + + _bindDOMEvents: function() { + console.log('bindDOMEvents') + this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line')); + this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon')); + this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle')); + this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle')); + + }, + + _onClickButton: function(newMode, e) { + //newMode는 방금 클릭한 값(line, polygon, circle...) + console.log('onClickButton') + e.preventDefault(); + + var btn = $(e.target), + map = this.map, + mode = this._mode; + //this._mode는 클릭하기 전 값(첫 클릭이면 null) + + if (btn.hasClass('control-on')) { + console.log('remove') + btn.removeClass('control-on'); + } else { + console.log('add') + btn.addClass('control-on'); + } + + this._clearMode(mode); + + if (mode === newMode) { + this._mode = null; + return; + } + + this._mode = newMode; + + this.startMode(newMode); + }, + + _clearMode: function(mode) { + console.log('clearMode') + if (!mode) return; + + if (mode === 'line') { + if (this._polyline) { + this._polyline.setMap(null); + delete this._polyline; + } + + this._finishDistance(); + } else if (mode === 'polygon') { + if (this._polygon) { + this._polygon.setMap(null); + delete this._polygon; + } + + this._finishArea(); + } else if (mode === 'circle') { + if (this._circle) { + this._circle.setMap(null); + delete this._circle; + } + + this._finishCircle(); + } else if (mode === 'rectangle') { + if(this._rectangle) { + this._rectangle.setMap(null); + delete this._rectangle; + } + } + } + }); + + // id랑 매치시켜서 옵션 지정함 + var measures = new Measure({ + line: $('#line'), + polygon: $('#polygon'), + circle: $('#circle'), + rectangle: $('#rectangle') + }); + + measures.setMap(map); + + return( + <> +
+
    +
  • + + + + +
    • +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js new file mode 100644 index 0000000..c63d059 --- /dev/null +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -0,0 +1,721 @@ +import $ from 'jquery'; +import buffer from '@turf/buffer' +import { useEffect, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; + +import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader'; +import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory'; +import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer'; +import {DistanceOp} from 'jsts/org/locationtech/jts/operation/distance/DistanceOp'; + +import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader'; +import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter'; +import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp' +import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters'; + +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; + const openModal = props.openModal; + let mode = props.mode; + + let areaInfo; + let lastDistance; + + let polyline; + let guideline; + let bufferPolyline; + + let polygon; + + let circle; + let radiusline; + + let Eve = { + clickEve: '', + mousedownEve: '', + rightclickEve: '' + } + + let dragCircle = []; + let dragCircleEve = []; + + let check; + + useEffect(() => { + 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') { + onClickButton('LINE'); + } else if(mapControl.drawType==='CIRCLE') { + onClickButton('CIRCLE'); + } else if(mapControl.drawType==='POLYGON') { + onClickButton('POLYGON'); + } else if(mapControl.drawType==='RESET') { + onClickButton('RESET') + } + } + + const onClickButton = (newMode) => { + console.log('onClickButton'); + if(newMode === 'RESET') return false; + + zoomChange(); + + clearMode(mode); + + if(mode === newMode) { + mode = null; + return; + } + + mode = newMode; + + startMode(newMode); + } + + const clearMode = (mode) => { + console.log('clearMode') + + if(!mode) return; + + if (mode === 'LINE') { + if(pastPolyline) { + pastPolyline.setMap(null); + setPolyline(); + pastBuffer.setMap(null); + setBuffer(); + pastDragCircle.forEach(prev => prev.setMap(null)); + setDragCircle([]); + } + + } else if(mode === 'POLYGON') { + if(pastPolygon) { + pastPolygon.setMap(null); + setPolygon(); + pastDragCircle.forEach(prev => prev.setMap(null)); + setDragCircle([]); + } + } else if(mode === 'CIRCLE') { + if(pastCircle) { + pastCircle.setMap(null); + setCircle(); + naver.maps.Event.removeListener(pastEve); + } + } + finishDraw(); + } + + const startMode = (mode) => { + console.log('startMode') + + // 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 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 finishDraw = () => { + console.log('finishDraw') + removeListener(); + if(polyline) { + let polypaths = polyline.getPath()._array; + + if(guideline) { + guideline.setMap(null); + guideline = ''; + } + + 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); + + //파싱 + 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(); + bufferTest(); + } else { + polyline.setMap(null); + polyline = ''; + } + + } else if(polygon) { + let path = polygon.getPath(); + path.pop(); + + 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) })) + } + setDragCircle(dragCircle); + setPolygon(polygon); + setAreaInfo(polygonpaths, ''); + } + } + + const onClickPolyline = (e) => { + 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', + 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) => { + console.log('onMouseMovePolyline') + var proj = map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = guideline.getPath(); + + if(path.getLength() === 2) { + path.pop(); + } + + path.push(coord); + } + + const onClickPolygon = (e) => { + console.log('onClickPolygon') + var coord = e.coord; + + if(!polygon) { + polygon = new naver.maps.Polygon({ + 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); + } + } + + const onMouseMovePolygon = (e) => { + console.log('onMouseMovePolygon') + if(!polygon) return; + + var proj = map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = polygon.getPath(); + + if(path.getLength() >= 2) { + path.pop(); + } + + path.push(coord); + } + + const onClickCircle = (e) => { + console.log('onClickCircle') + var coord = e.coord; + + if(!check) { + if(!circle) { + //가이드라인 + radiusline = new naver.maps.Polyline({ + // strokeStyle: [4, 4], + // strokeOpacity: 0.6, + path: [coord], + // map: map + }); + lastDistance = radiusline.getDistance(); + + //실제 사용되는 원형 + circle = new naver.maps.Circle({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + center: coord, + radius: 100, + map: map, + clickable: true + }); + + Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); }) + } else { + circle.setRadius(100); + circle.setCenter(coord); + + radiusline.setPath([coord]) + } + setCircle(circle); + setAreaInfo('', ''); + } + + } + + const onMouseDownDrag = (index) => { + console.log('onMouseDownDrag') + + if(circle) { + naver.maps.Event.removeListener(Eve.clickEve); + } + + map.setOptions({ + draggable: false, + pinchZoom: false, + scrollWheel: false, + keyboardShortcuts: false, + disableDoubleTapZoom: true, + disableDoubleClickZoom: true, + disableTwoFingerTapZoom: true + }) + + $(document).on('mousemove.measure', function(e) { onMouseMoveDrag(e, index) }); + $(document).on('mouseup.measure', function() { onMouseUpDrag() }); + } + + const onMouseMoveDrag = (e, index) => { + console.log('onMouseMoveDrag') + + check = true; + + var proj = map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); + + 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); + } + } + + const onMouseUpDrag = () => { + console.log('onMouseUpDrag') + + map.setOptions({ + draggable: true, + pinchZoom: true, + scrollWheel: true, + keyboardShortcuts: true, + disableDoubleTapZoom: false, + disableDoubleClickZoom: false, + 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'); + + 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 bufferTest = () => { + let pol = polyline.getPath()._array; //latlng point 다 준건가? + // console.log(pol) + + let lineStringPaths = []; + for(let i = 0; i< pol.length; i++) { + // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i])) + // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i])) + // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i])) + // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToUTMK(pol[i])) + + // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToLatLng(naver.maps.Point(pol[i].x, pol[i].y))) + // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToNaver(naver.maps.Point(pol[i].x, pol[i].y))) + // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToTM128(naver.maps.Point(pol[i].x, pol[i].y))) + // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y))) + + + + lineStringPaths.push([pol[i].x, pol[i].y]); + } + // console.log(map.getProjection().getProjectionName()); + // console.log(map.getProjection()) + // console.log(map.getPrimitiveProjection()) + + // console.log(lineStringPaths) + + //옆에 화면에 라이브러리 활용해서 제발 성공하자.. + let bufferRadius = 100; + const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)' + let coords = { + "type": "LineString", + "coordinates" : lineStringPaths + }; + const bufferCenter = new JSTSWKTReader().read(wkt) + const bufferResult = JSTSBufferOp.bufferOp( + bufferCenter, + bufferRadius + ) + + const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) + // console.log(bufferResultGeoJSON) + + // bufferPolyline = new naver.maps.Polyline({ + // strokeColor: '#ff0000', + // strokeColor: '#283046', + // strokeWeight: 2, + // strokeStyle: [4, 4], + // strokeOpacity: 1, + // path : bufferPaths, + // // path: [ + + // // ], + // map: map + // }); + } + + const bufferMove = () => { + console.log('bufferMove') + + //버퍼 생성에 필요한 coordinates 배열 변환 + let pol = polyline.getPath()._array; + + let lineStringPaths = []; + for(let i = 0; i< polyline.getPath().length; i++) { + lineStringPaths.push([pol[i].x, pol[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 + // }); + + //------------------------ + + let coords = { + "type": "LineString", + "coordinates" : lineStringPaths + }; + + const reader = new GeoJSONReader(); + const writer = new GeoJSONWriter(); + + const distance = (100 * 0.001) / 111.12; //100미터 + const line = reader.read(coords); + // const buffer = BufferOp.bufferOp(line, distance); + const buffer = BufferOp.bufferOp(line, distance, 0, 3); + + let bufferpath = buffer._shell._points._coordinates; + + let bufferPaths = []; + for(let i = 0; i< bufferpath.length; i++) { + bufferPaths.push([bufferpath[i].x, bufferpath[i].y]); + } + console.log(bufferPaths, 'bufferPaths') + + bufferPolyline = new naver.maps.Polyline({ + strokeColor: '#ff0000', + strokeColor: '#283046', + strokeWeight: 2, + strokeStyle: [4, 4], + strokeOpacity: 1, + path : bufferPaths, + // path: [ + + // ], + map: map + }); + + + // setAreaInfo(polyline.getPath()._array, bufferPath); + setAreaInfo(polyline.getPath()._array, bufferPaths); + 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 ( + <> + {/* + 확인 + + 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 33ef2bd..b2d1c8b 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -2,46 +2,35 @@ 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 { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; +import { FlightPlanAreaDetailModal } from '../../../../components/basis/flight/plan/FlightPlanAreaDetailModal'; -const FlightPlanAreaContainer = (props) => { - const dispatch = useDispatch(); - const history = useHistory(); +const FlightPlanAreaContainer = () => { + const dispatch = useDispatch(); 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) - }); + const [modal, setModal] = useState({isOpen: false, title: ''}); const getAirAreaList = () => { dispatch(Actions.AREA_LIST.request()); - } + } - // const createAirArea = async data => { - // dispatch(Actions.FLIGHT_AREA.request(data)); - // - // props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); - // props.setOnSubmit(false); - // } + const handleModal = ({isOpen, title}) => { + setModal({ + isOpen: isOpen, + title: title + }); + } useEffect(() => { + dispatch(drawTypeChangeAction('RESET')); getAirAreaList(); }, []); @@ -49,24 +38,23 @@ const FlightPlanAreaContainer = (props) => { setAirArea(areaList); }, [areaList]) + 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..1e3d598 --- /dev/null +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -0,0 +1,29 @@ +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 = ({ modal, handleModal }) => { + const handleClose = () => { + handleModal({isOpen : false, title: ''}); + } + + + return ( + + + + + + + ) +} + +export default FlightPlanAreaDetailContainer; \ No newline at end of file diff --git a/src/modules/control/map/reducers/controlMapReducer.ts b/src/modules/control/map/reducers/controlMapReducer.ts index a454b86..b16dee2 100644 --- a/src/modules/control/map/reducers/controlMapReducer.ts +++ b/src/modules/control/map/reducers/controlMapReducer.ts @@ -11,9 +11,9 @@ const initialState = { area0006: true, // 초경량비행장치 sensor: 'dust', - drawType: '', + drawType: null, - drawCheck: false + drawCheck: '' }; const controlReducerReducer = (state = initialState, action) => {