pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

비행 구역 설정 - 확인 버튼 기능 간소화

pull/2/head
junh_eee(이준희) 2 years ago
parent
bf835e03cc
commit
c2a9394725
4 changed files with 105 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
  2. 24
      src/components/basis/flight/plan/FlightPlanAreaMap.js
  3. 161
      src/components/map/naver/draw/FlightPlanDraw.js
  4. 22
      src/containers/basis/flight/plan/FlightPlanAreaContainer.js

4
src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
Unescape View File

@ -91,7 +91,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handl
id='bufferZone'
name='bufferZone'
bsSize='sm'
readOnly={coordList[0].lat && (mapControl.drawType===("LINE") || mapControl.drawType===("CIRCLE")) ? false : true }
readOnly={coordList[0].lat && (data[0].areaType && data[0].areaType != ("POLYGON")) ? false : true }
placeholder='반경'
value={data ? data[0].bufferZone : ''}
@ -109,7 +109,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handl
className='mr-1'
color='primary'
size='sm'
disabled={coordList[0].lat && (mapControl.drawType===("LINE") || mapControl.drawType===("CIRCLE")) ? false : true }
disabled={coordList[0].lat && (data[0].areaType && data[0].areaType != ("POLYGON")) ? false : true }
onClick={() => handleBufferList()}
>
적용

24
src/components/basis/flight/plan/FlightPlanAreaMap.js
Unescape View File

@ -24,7 +24,7 @@ const FlightPlanAreaMap = (props) => {
const [mode, setMode] = useState();
const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList);
useEffect(() => {
useEffect(() => {
NaverMapInit();
}, []);
@ -36,12 +36,10 @@ const FlightPlanAreaMap = (props) => {
ModeInit();
}, [mapControl.drawType]);
useEffect(() => {
useEffect(() => {
setMapAreaCoordList(areaCoordList)
}, [areaCoordList]);
const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList);
const ModeInit = () => {
setMode(mapControl.drawType)
@ -73,9 +71,8 @@ const FlightPlanAreaMap = (props) => {
// }
const handleInitCoordinates = () => {
const init = initFlightBas.initDetail.areaList.concat();
console.log(init, '<<<<<<init')
dispatch(AREA_COORDINATE_LIST_SAVE(init))
const init = initFlightBas.initDetail.areaList.concat();
dispatch(AREA_COORDINATE_LIST_SAVE(init))
}
const handleCoordinates = (areaInfo) => {
@ -123,20 +120,21 @@ const FlightPlanAreaMap = (props) => {
{isMapLoad ? <FlightPlanDraw
map={map}
naver={naver}
mode={mode}
areaCoordList={mapAreaCoordList}
handleCoordinates={handleCoordinates}
mode={mode}
areaCoordList={mapAreaCoordList}
handleCoordinates={handleCoordinates}
handleInitCoordinates={handleInitCoordinates}
// handleBufferList={handleBufferList}
handleConfirm={props.handleConfirm}
// handleBufferList={handleBufferList}
/> : null}
<Button.Ripple
{/* <Button.Ripple
color='primary'
className='area-button'
onClick = {e => props.handleConfirm(mapAreaCoordList)}
>
확인
</Button.Ripple>
</Button.Ripple> */}
<Button.Ripple
color='primary'
className='area-button'

161
src/components/map/naver/draw/FlightPlanDraw.js
Unescape View File

@ -1,22 +1,26 @@
import $ from 'jquery';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
import {initFlightBas} from '../../../../modules/basis/flight/models/basisFlightModel';
export const FlightPlanDraw = props => {
const dispatch = useDispatch();
const mapControl = useSelector(state => state.controlMapReducer);
const { areaCoordList, detail } = useSelector(state => state.flightState);
const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList);
const [pastPolyline, setPolyline] = useState();
const [pastBuffer, setBuffer] = useState();
const [pastPolygon, setPolygon] = useState();
// const [pastCircle, setCircle] = useState();
const [pastCircle, setCircle] = useState([]);
const [pastClickEve, setClickEve] = useState();
const [pastDragCircle, setDragCircle] = useState([]);
const [pastClickEve, setClickEve] = useState();
const [pastMarker, setMarker] = useState([]);
const [figure, setFigure] = useState();
const naver = props.naver;
const map = props.map;
@ -43,20 +47,28 @@ export const FlightPlanDraw = props => {
let dragCircle = [];
let dragCircleEve = [];
let check;
let distanceMarker = [];
// const handleBufferList = () => {
// dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
// }
useEffect(() => {
drawInit();
}, [mapControl.drawType])
useEffect(() => {
handleDetailDrwa();
handleDetailDraw();
}, [props.areaCoordList])
useEffect(() => {
props.handleConfirm(props.areaCoordList);
// handleBufferList();
console.log(props.areaCoordList, '>>>>>>areaCoordList')
}, [figure])
const drawInit = () => {
console.log(mapControl.drawType);
if (mapControl.drawType === 'LINE') {
onClickButton('LINE');
} else if (mapControl.drawType === 'CIRCLE') {
@ -97,12 +109,11 @@ export const FlightPlanDraw = props => {
setDragCircle([]);
setBuffer();
}
if (pastCircle) {
if (pastCircle.length != 0) {
console.log('clear circle ', pastCircle)
pastCircle.forEach(prev => prev.setMap(null))
naver.maps.Event.removeListener(pastClickEve);
// setCircle();
setCircle([]);
}
if (pastPolygon) {
@ -113,7 +124,7 @@ export const FlightPlanDraw = props => {
setPolygon();
setDragCircle([]);
}
if (pastMarker) {
if (pastMarker.length != 0) {
console.log('clear marker ', pastMarker)
pastMarker.forEach(m => m.setMap(null));
}
@ -128,13 +139,14 @@ export const FlightPlanDraw = props => {
if (!mode) return;
if(pastClickEve) {
console.log('<>>')
naver.maps.Event.removeListener(pastClickEve);
}
if (mode === 'LINE') {
setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) }))
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) });
setClickEve(Eve.clickEve);
} else if (mode === 'POLYGON') {
setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) }))
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) });
setClickEve(Eve.clickEve);
} else if (mode === 'CIRCLE') {
setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
}
@ -144,10 +156,10 @@ export const FlightPlanDraw = props => {
console.log('removeListener')
naver.maps.Event.removeListener(Eve.clickEve);
naver.maps.Event.removeListener(pastClickEve);
naver.maps.Event.removeListener(Eve.mousedownEve);
naver.maps.Event.removeListener(Eve.rightclickEve);
if (!circle) $(document).off('mousemove.measure');
naver.maps.Event.removeListener(pastClickEve);
}
const finishDraw = () => {
@ -171,6 +183,8 @@ export const FlightPlanDraw = props => {
}
polyline.setMap(null)
setFigure(polyline)
} else if (polygon) {
let path = polygon.getPath();
path.pop();
@ -181,6 +195,7 @@ export const FlightPlanDraw = props => {
setAreaInfo(polygonpaths);
polygon.setMap(null)
setFigure(polygon)
}
}
@ -188,44 +203,42 @@ export const FlightPlanDraw = props => {
console.log('onClickPolyline')
var coord = e.coord;
// if (!check) {
if (!polyline) {
//가이드라인
guideline = new naver.maps.Polyline({
strokeColor: '#283046',
strokeWeight: 2,
strokeOpacity: 0.3,
path: [coord],
map: map
});
lastDistance = guideline.getDistance();
//실제 사용되는 라인
polyline = new naver.maps.Polyline({
strokeLineCap: 'round',
strokeLineJoin: 'round',
// strokeColor: '#283046',
strokeColor: '#ff0000',
strokeWeight: 3,
strokeOpacity: 1,
path: [coord],
map: map
});
if (!polyline) {
//가이드라인
guideline = new naver.maps.Polyline({
strokeColor: '#283046',
strokeWeight: 2,
strokeOpacity: 0.3,
path: [coord],
map: map
});
lastDistance = guideline.getDistance();
//실제 사용되는 라인
polyline = new naver.maps.Polyline({
strokeLineCap: 'round',
strokeLineJoin: 'round',
// strokeColor: '#283046',
strokeColor: '#ff0000',
strokeWeight: 3,
strokeOpacity: 1,
path: [coord],
map: map
});
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
$(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
$(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
lastDistance = polyline.getDistance();
addMileStone(coord, 'Start')
} else {
guideline.setPath([e.coord]);
polyline.getPath().push(coord);
lastDistance = polyline.getDistance();
addMileStone(coord, 'Start')
} else {
guideline.setPath([e.coord]);
polyline.getPath().push(coord);
var distance = polyline.getDistance();
addMileStone(coord, fromMetersToText(distance - lastDistance));
lastDistance = distance;
}
// }
var distance = polyline.getDistance();
addMileStone(coord, fromMetersToText(distance - lastDistance));
lastDistance = distance;
}
}
const onMouseMovePolyline = (e) => {
@ -309,15 +322,12 @@ export const FlightPlanDraw = props => {
// setCircle(circle);
setCircle(prev => ([...prev, circle]))
setAreaInfo('');
setFigure(circle)
}
const onMouseDownDrag = (index) => {
console.log('onMouseDownDrag')
if (circle) {
naver.maps.Event.removeListener(Eve.clickEve);
}
map.setOptions({
draggable: false,
pinchZoom: false,
@ -335,8 +345,6 @@ export const FlightPlanDraw = props => {
const onMouseMoveDrag = (e, index) => {
console.log('onMouseMoveDrag')
check = true;
var proj = map.getProjection(),
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY));
@ -407,33 +415,31 @@ export const FlightPlanDraw = props => {
var path = polyline.getPath()._array;
setPolyline(polyline);
setAreaInfo(path);
// props.handleBufferList();
setFigure(polyline);
}
if (polygon) {
var path = polygon.getPath()._array;
setPolygon(polygon);
setAreaInfo(path);
setFigure(polygon);
}
$(document).off('mousemove.measure');
$(document).off('mouseup.measure');
if (circle) {
// Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); })
setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
// setCircle(circle);
setCircle(prev => ([...prev, circle]))
setAreaInfo('');
setFigure(circle)
}
check = false;
}
const setAreaInfo = (path) => {
areaInfo = {
coordinates: [],
bufferZone: 0,
bufferZone: 100,
};
let prePath = [];
@ -465,7 +471,7 @@ export const FlightPlanDraw = props => {
areaInfo.bufferZone = circle.getRadius();
areaInfo.areaType = 'CIRCLE';
}
console.log(areaInfo, 'areaInfo')
// console.log(areaInfo, 'areaInfo')
props.handleCoordinates(areaInfo);
}
@ -476,14 +482,13 @@ export const FlightPlanDraw = props => {
}
}
const handleDetailDrwa = () => {
if (props.areaCoordList) {
console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
const handleDetailDraw = () => {
if (props.areaCoordList) {
console.log('handleDetailDraw')
const areas = props.areaCoordList[0];
const paths = [];
const paths = []; //coordList의 위경도 값 담길 배열
areas.coordList.forEach((coord) => {
const path = new naver.maps.LatLng(coord.lat, coord.lon)
@ -527,7 +532,7 @@ export const FlightPlanDraw = props => {
setDragCircle(dragCircle);
if (areas.bufferCoordList) {
if (areas.bufferCoordList) {
const bufferPaths = [];
areas.bufferCoordList.forEach((bfCoord) => {
@ -596,13 +601,12 @@ export const FlightPlanDraw = props => {
if (areas.areaType && areas.areaType === 'CIRCLE') {
//circle 생성
if(pastCircle) {
// pastCircle.setMap(null);
console.log(pastCircle)
pastCircle.forEach(prev => prev.setMap(null));
}
if(circle) {
circle.setMap(null);
}
// if(circle) {
// console.log(circle, '>>>circle')
// circle.setMap(null);
// }
// radiusline = new naver.maps.Polyline({
// strokeStyle: [4, 4],
// strokeOpacity: 0.6,
@ -672,8 +676,5 @@ export const FlightPlanDraw = props => {
return text;
}
return (
<>
</>
);
return null;
};

22
src/containers/basis/flight/plan/FlightPlanAreaContainer.js
Unescape View File

@ -16,11 +16,21 @@ const FlightPlanAreaContainer = ({handleModal}) => {
const { publicAreaList} = useSelector(state => state.flightState);
const [airArea, setAirArea] = useState(null);
useEffect(() => {
dispatch(drawTypeChangeAction(''));
getAirAreaList();
}, []);
useEffect(() => {
setAirArea(publicAreaList);
}, [publicAreaList])
const getAirAreaList = () => {
dispatch(Actions.PUBLIC_AREA_LIST.request());
}
const handleConfirm = (areaList) => {
const handleConfirm = (areaList) => {
if(areaList === undefined) {
alert('영역을 설정해주세요.')
return false;
@ -29,16 +39,6 @@ const FlightPlanAreaContainer = ({handleModal}) => {
dispatch(Actions.AREA_COORDINATE_LIST_SAVE(areaList))
}
useEffect(() => {
dispatch(drawTypeChangeAction(''));
getAirAreaList();
}, []);
useEffect(() => {
setAirArea(publicAreaList);
}, [publicAreaList])
return (
<Row>
<Col md={6} lg={6}>

Write Preview
Loading…
Cancel
Save