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
218decdb3f
commit
dd318874d9
1 changed files with 71 additions and 24 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. 95
      src/components/map/naver/draw/FlightPlanDraw.js

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

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