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