|
|
@ -2,6 +2,7 @@ import $ from 'jquery'; |
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
|
|
|
|
import { InfoModal } from '../../../modal/InfoModal'; |
|
|
|
|
|
|
|
|
|
|
|
export const FlightPlanDraw = props => { |
|
|
|
export const FlightPlanDraw = props => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
@ -20,6 +21,12 @@ export const FlightPlanDraw = props => { |
|
|
|
|
|
|
|
|
|
|
|
const [areaDetail, setAreaDetail] = useState(); |
|
|
|
const [areaDetail, setAreaDetail] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [alertModal, setAlertModal] = useState({ |
|
|
|
|
|
|
|
isOpen: false, |
|
|
|
|
|
|
|
title: '', |
|
|
|
|
|
|
|
desc: '' |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const naver = props.naver; |
|
|
|
const naver = props.naver; |
|
|
|
const map = props.map; |
|
|
|
const map = props.map; |
|
|
|
let mode = props.mode; |
|
|
|
let mode = props.mode; |
|
|
@ -188,6 +195,11 @@ export const FlightPlanDraw = props => { |
|
|
|
setPolyline(polyline); |
|
|
|
setPolyline(polyline); |
|
|
|
setAreaInfo(polypaths); |
|
|
|
setAreaInfo(polypaths); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
|
|
|
|
setAlertModal({ |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
|
|
|
|
title: '우회 여부 확인', |
|
|
|
|
|
|
|
desc: '좌표를 두 개 점으로 이어주세요.' |
|
|
|
|
|
|
|
}) |
|
|
|
polyline.setMap(null); |
|
|
|
polyline.setMap(null); |
|
|
|
polyline = ''; |
|
|
|
polyline = ''; |
|
|
|
} |
|
|
|
} |
|
|
@ -204,7 +216,7 @@ export const FlightPlanDraw = props => { |
|
|
|
lastDistance = guideline.getDistance(); |
|
|
|
lastDistance = guideline.getDistance(); |
|
|
|
guideline.getPath().push(polygonpaths[0]); |
|
|
|
guideline.getPath().push(polygonpaths[0]); |
|
|
|
var distance = guideline.getDistance(); |
|
|
|
var distance = guideline.getDistance(); |
|
|
|
addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance)); |
|
|
|
// addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance));
|
|
|
|
|
|
|
|
|
|
|
|
setMarker(distanceMarker); |
|
|
|
setMarker(distanceMarker); |
|
|
|
distanceMarker.forEach(c => c.setMap(null)) |
|
|
|
distanceMarker.forEach(c => c.setMap(null)) |
|
|
@ -254,7 +266,8 @@ export const FlightPlanDraw = props => { |
|
|
|
polyline.getPath().push(coord); |
|
|
|
polyline.getPath().push(coord); |
|
|
|
|
|
|
|
|
|
|
|
var distance = polyline.getDistance(); |
|
|
|
var distance = polyline.getDistance(); |
|
|
|
addMileStone(coord, fromMetersToText(distance - lastDistance)); |
|
|
|
// addMileStone(coord, fromMetersToText(distance - lastDistance));
|
|
|
|
|
|
|
|
addMileStone(polyline.getPath()._array, fromMetersToText(distance - lastDistance)); |
|
|
|
lastDistance = distance; |
|
|
|
lastDistance = distance; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -303,8 +316,13 @@ export const FlightPlanDraw = props => { |
|
|
|
polygon.getPath().push(coord); |
|
|
|
polygon.getPath().push(coord); |
|
|
|
guideline.getPath().push(coord); |
|
|
|
guideline.getPath().push(coord); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(polygon.getPath()._array, 'polygon')
|
|
|
|
|
|
|
|
// console.log(guideline.getPath()._array.length, 'guide')
|
|
|
|
|
|
|
|
// console.log(polygon.getPath()._array.length)
|
|
|
|
|
|
|
|
|
|
|
|
var distance = guideline.getDistance(); |
|
|
|
var distance = guideline.getDistance(); |
|
|
|
addMileStone(coord, fromMetersToText(distance - lastDistance)); |
|
|
|
// addMileStone(coord, fromMetersToText(distance - lastDistance));
|
|
|
|
|
|
|
|
addMileStone(guideline.getPath()._array, fromMetersToText(distance - lastDistance)); |
|
|
|
lastDistance = distance; |
|
|
|
lastDistance = distance; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -638,7 +656,7 @@ export const FlightPlanDraw = props => { |
|
|
|
position: paths[i], |
|
|
|
position: paths[i], |
|
|
|
icon: { |
|
|
|
icon: { |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ 'Start' +'</span></div>', |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ 'Start' +'</span></div>', |
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
|
anchor: new naver.maps.Point(45, 35) |
|
|
|
}, map: map |
|
|
|
}, map: map |
|
|
|
}) |
|
|
|
}) |
|
|
|
) |
|
|
|
) |
|
|
@ -648,9 +666,14 @@ export const FlightPlanDraw = props => { |
|
|
|
|
|
|
|
|
|
|
|
let text = fromMetersToText(r);
|
|
|
|
let text = fromMetersToText(r);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let dis1 = paths[i-1] |
|
|
|
|
|
|
|
let dis2 = paths[i] |
|
|
|
|
|
|
|
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
|
|
|
|
|
|
|
|
|
|
|
distanceMarker.push( |
|
|
|
distanceMarker.push( |
|
|
|
new naver.maps.Marker({ |
|
|
|
new naver.maps.Marker({ |
|
|
|
position: paths[i], |
|
|
|
// position: paths[i],
|
|
|
|
|
|
|
|
position: midPoint, |
|
|
|
icon: { |
|
|
|
icon: { |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
@ -705,48 +728,58 @@ export const FlightPlanDraw = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
for(let i = 0; i < paths.length+1; i++) { |
|
|
|
for(let i = 0; i < paths.length+1; i++) { |
|
|
|
|
|
|
|
//start
|
|
|
|
if(i == 0) { |
|
|
|
if(i == 0) { |
|
|
|
distanceMarker.push( |
|
|
|
distanceMarker.push( |
|
|
|
new naver.maps.Marker({ |
|
|
|
new naver.maps.Marker({ |
|
|
|
position: paths[i], |
|
|
|
position: paths[0], |
|
|
|
icon: { |
|
|
|
icon: { |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ 'Start' +'</span></div>', |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ 'Start' +'</span></div>', |
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
|
anchor: new naver.maps.Point(45, 35) |
|
|
|
}, |
|
|
|
}, |
|
|
|
map: map |
|
|
|
map: map |
|
|
|
}) |
|
|
|
}) |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
//첫좌표이자 마지막 좌표
|
|
|
|
} else if(i == paths.length) { |
|
|
|
} else if(i == paths.length) { |
|
|
|
var proj = map.getProjection(), |
|
|
|
var proj = map.getProjection(), |
|
|
|
r = proj.getDistance(paths[0], paths[i-1]); |
|
|
|
r = proj.getDistance(paths[0], paths[i-1]); |
|
|
|
|
|
|
|
|
|
|
|
let text = fromMetersToText(r); |
|
|
|
let text = fromMetersToText(r); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let dis1 = paths[0] |
|
|
|
|
|
|
|
let dis2 = paths[i-1] |
|
|
|
|
|
|
|
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
|
|
|
|
|
|
|
|
|
|
|
distanceMarker.push( |
|
|
|
distanceMarker.push( |
|
|
|
new naver.maps.Marker({ |
|
|
|
new naver.maps.Marker({ |
|
|
|
position: paths[0], |
|
|
|
// position: paths[0],
|
|
|
|
|
|
|
|
position: midPoint, |
|
|
|
icon: { |
|
|
|
icon: { |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
|
|
|
anchor: new naver.maps.Point(45, 35) |
|
|
|
anchor: new naver.maps.Point(0, 35) |
|
|
|
}, |
|
|
|
}, |
|
|
|
map: map |
|
|
|
map: map |
|
|
|
}) |
|
|
|
}) |
|
|
|
) |
|
|
|
) |
|
|
|
} else if(i == paths.length-1) { |
|
|
|
//그 외 나머지
|
|
|
|
// let tt = new naver.maps.EPSG3857.getDistance(paths[i], paths[])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
} else { |
|
|
|
var proj = map.getProjection(), |
|
|
|
var proj = map.getProjection(), |
|
|
|
r = proj.getDistance(paths[i-1], paths[i]); |
|
|
|
r = proj.getDistance(paths[i-1], paths[i]); |
|
|
|
|
|
|
|
|
|
|
|
let text = fromMetersToText(r);
|
|
|
|
let text = fromMetersToText(r);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let dis1 = paths[i-1] |
|
|
|
|
|
|
|
let dis2 = paths[i] |
|
|
|
|
|
|
|
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
|
|
|
|
|
|
|
|
|
|
|
distanceMarker.push( |
|
|
|
distanceMarker.push( |
|
|
|
new naver.maps.Marker({ |
|
|
|
new naver.maps.Marker({ |
|
|
|
position: paths[i], |
|
|
|
// position: paths[i],
|
|
|
|
|
|
|
|
position: midPoint, |
|
|
|
icon: { |
|
|
|
icon: { |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
|
anchor: new naver.maps.Point(20, 35) |
|
|
|
}, |
|
|
|
}, |
|
|
|
map: map |
|
|
|
map: map |
|
|
|
}) |
|
|
|
}) |
|
|
@ -801,17 +834,25 @@ export const FlightPlanDraw = props => { |
|
|
|
//div로 보여주기
|
|
|
|
//div로 보여주기
|
|
|
|
const addMileStone = (coord, text) => { |
|
|
|
const addMileStone = (coord, text) => { |
|
|
|
let content; |
|
|
|
let content; |
|
|
|
|
|
|
|
let midPoint; |
|
|
|
|
|
|
|
let anchor; |
|
|
|
if(text == 'Start') { |
|
|
|
if(text == 'Start') { |
|
|
|
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>' |
|
|
|
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ text +'</span></div>' |
|
|
|
|
|
|
|
midPoint = coord |
|
|
|
|
|
|
|
anchor = new naver.maps.Point(45, 35) |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ text +'</span></div>' |
|
|
|
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ text +'</span></div>' |
|
|
|
|
|
|
|
let dis1 = coord[coord.length-2]; |
|
|
|
|
|
|
|
let dis2 = coord[coord.length-1]; |
|
|
|
|
|
|
|
midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
|
|
|
|
|
|
|
anchor = new naver.maps.Point(20, 35) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var marker = new naver.maps.Marker({ |
|
|
|
var marker = new naver.maps.Marker({ |
|
|
|
position: coord, |
|
|
|
position: midPoint, |
|
|
|
icon: { |
|
|
|
icon: { |
|
|
|
content: content, |
|
|
|
content: content, |
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
|
anchor: anchor |
|
|
|
}, |
|
|
|
}, |
|
|
|
// map: map
|
|
|
|
// map: map
|
|
|
|
}); |
|
|
|
}); |
|
|
@ -833,13 +874,19 @@ export const FlightPlanDraw = props => { |
|
|
|
var km = 1000, |
|
|
|
var km = 1000, |
|
|
|
text = meters; |
|
|
|
text = meters; |
|
|
|
|
|
|
|
|
|
|
|
if(meters >= km) { |
|
|
|
|
|
|
|
text = parseFloat((meters / km).toFixed(1)) + 'km'; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
text = parseFloat(meters.toFixed(1)) + 'm'; |
|
|
|
text = parseFloat(meters.toFixed(1)) + 'm'; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if(meters >= km) {
|
|
|
|
|
|
|
|
// text = parseFloat((meters / km).toFixed(1)) + 'km';
|
|
|
|
|
|
|
|
// } else {
|
|
|
|
|
|
|
|
// text = parseFloat(meters.toFixed(1)) + 'm';
|
|
|
|
|
|
|
|
// }
|
|
|
|
return text; |
|
|
|
return text; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return null; |
|
|
|
// return null;
|
|
|
|
|
|
|
|
return( |
|
|
|
|
|
|
|
<InfoModal modal={alertModal} setModal={setAlertModal} /> |
|
|
|
|
|
|
|
) |
|
|
|
}; |
|
|
|
}; |