|
|
|
@ -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; |
|
|
|
|
}; |