|
|
|
@ -69,7 +69,6 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
console.log(">>>>>>>>>>>>>>>>>>>>") |
|
|
|
|
handleBufferList(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, [areaDetail]) |
|
|
|
|
|
|
|
|
|
const drawInit = () => { |
|
|
|
@ -130,7 +129,8 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
} |
|
|
|
|
if (pastMarker.length != 0) { |
|
|
|
|
console.log('clear marker ', pastMarker) |
|
|
|
|
pastMarker.forEach(m => m.setMap(null)); |
|
|
|
|
pastMarker.forEach(m => m.setMap(null)) |
|
|
|
|
setMarker([]); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
finishDraw(); |
|
|
|
@ -181,11 +181,14 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
let polypaths = polyline.getPath()._array; |
|
|
|
|
|
|
|
|
|
setMarker(distanceMarker) |
|
|
|
|
distanceMarker.forEach(c => c.setMap(null)) |
|
|
|
|
|
|
|
|
|
if (polypaths.length >= 2) { |
|
|
|
|
setPolyline(polyline); |
|
|
|
|
setAreaInfo(polypaths); |
|
|
|
|
} else { |
|
|
|
|
polyline.setMap(null); |
|
|
|
|
// polyline.setMap(null);
|
|
|
|
|
polyline = ''; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -198,6 +201,15 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
let polygonpaths = polygon.getPath()._array; |
|
|
|
|
|
|
|
|
|
//마지막 path와 시작점을 이어주는 라인 생성
|
|
|
|
|
lastDistance = guideline.getDistance(); |
|
|
|
|
guideline.getPath().push(polygonpaths[0]); |
|
|
|
|
var distance = guideline.getDistance(); |
|
|
|
|
addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance)); |
|
|
|
|
|
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
distanceMarker.forEach(c => c.setMap(null)) |
|
|
|
|
|
|
|
|
|
setPolygon(polygon); |
|
|
|
|
setAreaInfo(polygonpaths); |
|
|
|
|
|
|
|
|
@ -219,7 +231,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
path: [coord], |
|
|
|
|
map: map |
|
|
|
|
}); |
|
|
|
|
lastDistance = guideline.getDistance(); |
|
|
|
|
// lastDistance = guideline.getDistance();
|
|
|
|
|
|
|
|
|
|
//실제 사용되는 라인
|
|
|
|
|
polyline = new naver.maps.Polyline({ |
|
|
|
@ -227,7 +239,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
strokeLineJoin: 'round', |
|
|
|
|
// strokeColor: '#283046',
|
|
|
|
|
strokeColor: '#ff0000', |
|
|
|
|
strokeWeight: 3, |
|
|
|
|
// strokeWeight: 3,
|
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
path: [coord], |
|
|
|
|
map: map |
|
|
|
@ -264,6 +276,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
const onClickPolygon = (e) => { |
|
|
|
|
console.log('onClickPolygon') |
|
|
|
|
var coord = e.coord; |
|
|
|
|
// let guide;
|
|
|
|
|
|
|
|
|
|
if (!polygon) { |
|
|
|
|
polygon = new naver.maps.Polygon({ |
|
|
|
@ -275,10 +288,25 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
map: map |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
//거리재기를 위한 가이드
|
|
|
|
|
guideline = new naver.maps.Polyline({ |
|
|
|
|
path: [coord], |
|
|
|
|
map: map |
|
|
|
|
}); |
|
|
|
|
guideline.setVisible(false); |
|
|
|
|
|
|
|
|
|
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) |
|
|
|
|
$(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) }); |
|
|
|
|
|
|
|
|
|
lastDistance = guideline.getDistance(); |
|
|
|
|
addMileStone(coord, 'Start') |
|
|
|
|
} else { |
|
|
|
|
polygon.getPath().push(coord); |
|
|
|
|
guideline.getPath().push(coord); |
|
|
|
|
|
|
|
|
|
var distance = guideline.getDistance(); |
|
|
|
|
addMileStone(coord, fromMetersToText(distance - lastDistance)); |
|
|
|
|
lastDistance = distance; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -306,7 +334,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
strokeStyle: [4, 4], |
|
|
|
|
strokeOpacity: 0.6, |
|
|
|
|
path: [coord], |
|
|
|
|
map: map |
|
|
|
|
// map: map
|
|
|
|
|
}) |
|
|
|
|
lastDistance = radiusline.getDistance(); |
|
|
|
|
|
|
|
|
@ -317,18 +345,22 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
fillOpacity: 0.1, |
|
|
|
|
center: coord, |
|
|
|
|
radius: 100, |
|
|
|
|
// map: map,
|
|
|
|
|
map: map, |
|
|
|
|
clickable: true |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) |
|
|
|
|
|
|
|
|
|
addMileStone(coord, fromMetersToText(100)); |
|
|
|
|
} else { |
|
|
|
|
circle.setCenter(coord); |
|
|
|
|
circle.setRadius(100); |
|
|
|
|
distanceMarker.setPosition(coord) |
|
|
|
|
} |
|
|
|
|
setCircle(prev => ([...prev, circle])) |
|
|
|
|
setAreaInfo(''); |
|
|
|
|
setFigure(circle.center) |
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
setFigure(circle.center); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onMouseDownDrag = (index) => { |
|
|
|
@ -349,7 +381,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); |
|
|
|
|
$(document).on('mouseup.measure', function () { onMouseUpDrag() }); |
|
|
|
|
$(document).on('mouseup.measure', function () { onMouseUpDrag(index) }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onMouseMoveDrag = (e, index) => { |
|
|
|
@ -390,16 +422,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
polygon.setPaths(movepath) |
|
|
|
|
|
|
|
|
|
} else if (circle) { |
|
|
|
|
// var circlepath = radiusline.getPath(),
|
|
|
|
|
// center = circle.getCenter(),
|
|
|
|
|
// r = proj.getDistance(coord, center);
|
|
|
|
|
var center = circle.getCenter(), |
|
|
|
|
r = proj.getDistance(coord, center); |
|
|
|
|
|
|
|
|
|
// if (circlepath.getLength() === 2) {
|
|
|
|
|
// circlepath.pop();
|
|
|
|
|
// }
|
|
|
|
|
// circlepath.push(coord);
|
|
|
|
|
circle.setRadius(r); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -408,7 +433,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onMouseUpDrag = () => { |
|
|
|
|
const onMouseUpDrag = (index) => { |
|
|
|
|
console.log('onMouseUpDrag') |
|
|
|
|
|
|
|
|
|
map.setOptions({ |
|
|
|
@ -433,6 +458,40 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
setPolygon(polygon); |
|
|
|
|
setAreaInfo(path); |
|
|
|
|
setFigure(polygon); |
|
|
|
|
|
|
|
|
|
// if(pastMarker.length !=0) {
|
|
|
|
|
// //마커 위치 변경
|
|
|
|
|
// pastMarker[index].setPosition(path[index]);
|
|
|
|
|
|
|
|
|
|
// //마커 content 변경
|
|
|
|
|
// if(index == 0) {
|
|
|
|
|
// //시작 지점 이동
|
|
|
|
|
// pastMarker[index].setIcon({
|
|
|
|
|
// 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)
|
|
|
|
|
// })
|
|
|
|
|
// } else {
|
|
|
|
|
// let isLastIndex;
|
|
|
|
|
// if(pastMarker.length === index+1) {
|
|
|
|
|
// //종료 지점 이동(index 마커만 변경)
|
|
|
|
|
// isLastIndex = 1;
|
|
|
|
|
// } else {
|
|
|
|
|
// //사이 지점 이동(index+1 마커도 변경)
|
|
|
|
|
// isLastIndex = 2;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// for(let i = index; i < index+isLastIndex; i++) {
|
|
|
|
|
// var proj = map.getProjection(),
|
|
|
|
|
// r = proj.getDistance(pastMarker[i-1].position, pastMarker[i].position);
|
|
|
|
|
|
|
|
|
|
// let text = fromMetersToText(r);
|
|
|
|
|
// pastMarker[i].setIcon({
|
|
|
|
|
// 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)
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$(document).off('mousemove.measure'); |
|
|
|
@ -495,7 +554,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
const handleDetailDraw = () => { |
|
|
|
|
if (props.areaCoordList) { |
|
|
|
|
// console.log('handleDetailDraw')
|
|
|
|
|
console.log('handleDetailDraw')
|
|
|
|
|
|
|
|
|
|
const areas = props.areaCoordList[0]; |
|
|
|
|
|
|
|
|
@ -516,7 +575,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
strokeLineCap: 'round', |
|
|
|
|
strokeLineJoin: 'round', |
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
strokeWeight: 3, |
|
|
|
|
strokeWeight: 1, |
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
path: paths, |
|
|
|
|
map: map |
|
|
|
@ -543,6 +602,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
setDragCircle(dragCircle); |
|
|
|
|
|
|
|
|
|
//bufferline 생성
|
|
|
|
|
if (areas.bufferCoordList) { |
|
|
|
|
const bufferPaths = []; |
|
|
|
|
|
|
|
|
@ -557,19 +617,50 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
pastBuffer.setMap(null); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// console.log(bufferPaths)
|
|
|
|
|
//bufferline 생성
|
|
|
|
|
bufferPolygon = new naver.maps.Polyline({ |
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
// fillColor: '#7367F0',
|
|
|
|
|
// fillOpacity: 0.1,
|
|
|
|
|
strokeStyle: [2, 3], |
|
|
|
|
path: bufferPaths, |
|
|
|
|
map: map |
|
|
|
|
}); |
|
|
|
|
// console.log(bufferPolygon);
|
|
|
|
|
setBuffer(bufferPolygon); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//marker 생성
|
|
|
|
|
if(pastMarker) { |
|
|
|
|
pastMarker.forEach(c => c.setMap(null)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
for(let i = 0; i < paths.length; i++) { |
|
|
|
|
if(i == 0) { |
|
|
|
|
distanceMarker.push( |
|
|
|
|
new naver.maps.Marker({ |
|
|
|
|
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) |
|
|
|
|
}, map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
} else { |
|
|
|
|
var proj = map.getProjection(), |
|
|
|
|
r = proj.getDistance(paths[i-1], paths[i]); |
|
|
|
|
|
|
|
|
|
let text = fromMetersToText(r);
|
|
|
|
|
|
|
|
|
|
distanceMarker.push( |
|
|
|
|
new naver.maps.Marker({ |
|
|
|
|
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>'+ text +'</span></div>', |
|
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
|
|
}, map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (areas.areaType && areas.areaType === 'POLYGON') { |
|
|
|
@ -607,19 +698,70 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setDragCircle(dragCircle); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//marker 생성
|
|
|
|
|
if(pastMarker) { |
|
|
|
|
pastMarker.forEach(c => c.setMap(null)) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
for(let i = 0; i < paths.length+1; i++) { |
|
|
|
|
if(i == 0) { |
|
|
|
|
distanceMarker.push( |
|
|
|
|
new naver.maps.Marker({ |
|
|
|
|
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) |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
} else if(i == paths.length) { |
|
|
|
|
var proj = map.getProjection(), |
|
|
|
|
r = proj.getDistance(paths[0], paths[i-1]); |
|
|
|
|
|
|
|
|
|
let text = fromMetersToText(r); |
|
|
|
|
|
|
|
|
|
distanceMarker.push( |
|
|
|
|
new naver.maps.Marker({ |
|
|
|
|
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>'+ text +'</span></div>', |
|
|
|
|
anchor: new naver.maps.Point(45, 35) |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
} else { |
|
|
|
|
var proj = map.getProjection(), |
|
|
|
|
r = proj.getDistance(paths[i-1], paths[i]); |
|
|
|
|
|
|
|
|
|
let text = fromMetersToText(r);
|
|
|
|
|
|
|
|
|
|
distanceMarker.push( |
|
|
|
|
new naver.maps.Marker({ |
|
|
|
|
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>'+ text +'</span></div>', |
|
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (areas.areaType && areas.areaType === 'CIRCLE') { |
|
|
|
|
//circle 생성
|
|
|
|
|
if(pastCircle) { |
|
|
|
|
pastCircle.forEach(prev => prev.setMap(null)); |
|
|
|
|
} |
|
|
|
|
// radiusline = new naver.maps.Polyline({
|
|
|
|
|
// strokeStyle: [4, 4],
|
|
|
|
|
// strokeOpacity: 0.6,
|
|
|
|
|
// path: [coord],
|
|
|
|
|
// map: map
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
circle = new naver.maps.Circle({ |
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
strokeOpacity: 1, |
|
|
|
@ -634,41 +776,55 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) |
|
|
|
|
|
|
|
|
|
setCircle([circle]); |
|
|
|
|
|
|
|
|
|
//marker 생성
|
|
|
|
|
if(pastMarker) { |
|
|
|
|
pastMarker.forEach(c => c.setMap(null)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let text = fromMetersToText(areas.bufferZone); |
|
|
|
|
distanceMarker = new naver.maps.Marker({ |
|
|
|
|
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>'+ text +'</span></div>', |
|
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
setMarker([distanceMarker]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const addMileStone = (coord, text, css) => { |
|
|
|
|
if(distanceMarker) distanceMarker = []; |
|
|
|
|
|
|
|
|
|
//div로 보여주기
|
|
|
|
|
const addMileStone = (coord, text) => { |
|
|
|
|
let content; |
|
|
|
|
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>' |
|
|
|
|
} else { |
|
|
|
|
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;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:#ff0000;"><span>'+ text +'</span></div>' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var _ms = new naver.maps.Marker({ |
|
|
|
|
var marker = new naver.maps.Marker({ |
|
|
|
|
position: coord, |
|
|
|
|
icon: { |
|
|
|
|
content: content, |
|
|
|
|
anchor: new naver.maps.Point(-5, -5) |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
// map: map
|
|
|
|
|
}); |
|
|
|
|
// marker.setVisible(false)
|
|
|
|
|
|
|
|
|
|
var msElement = $(_ms.getElement()); |
|
|
|
|
|
|
|
|
|
if(css) { |
|
|
|
|
msElement.css(css); |
|
|
|
|
|
|
|
|
|
if(circle) { |
|
|
|
|
distanceMarker = marker; |
|
|
|
|
} else { |
|
|
|
|
msElement.css('font-size', '13px'); |
|
|
|
|
marker.setMap(map); |
|
|
|
|
distanceMarker.push(marker); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
distanceMarker.push(_ms); |
|
|
|
|
setMarker(prev => ([...prev, _ms])) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//거리 재기
|
|
|
|
|
const fromMetersToText = (meters) => { |
|
|
|
|
meters = meters || 0; |
|
|
|
|
|
|
|
|
|