|
|
|
@ -26,7 +26,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
isOpen: false, |
|
|
|
|
title: '', |
|
|
|
|
desc: '' |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const naver = props.naver; |
|
|
|
|
const map = props.map; |
|
|
|
@ -49,7 +49,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
clickEve: '', |
|
|
|
|
mousedownEve: '', |
|
|
|
|
rightclickEve: '' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
let dragCircle = []; |
|
|
|
|
let dragCircleEve = []; |
|
|
|
@ -58,28 +58,28 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
const handleBufferList = () => { |
|
|
|
|
dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
drawInit(); |
|
|
|
|
}, [mapControl.drawType]) |
|
|
|
|
}, [mapControl.drawType]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
handleDetailDraw(); |
|
|
|
|
}, [props.areaCoordList]) |
|
|
|
|
}, [props.areaCoordList]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(figure) { |
|
|
|
|
if (figure) { |
|
|
|
|
props.handleConfirm(props.areaCoordList); |
|
|
|
|
setAreaDetail(props.areaCoordList); |
|
|
|
|
} |
|
|
|
|
}, [figure]) |
|
|
|
|
}, [figure]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(pastPolyline) { |
|
|
|
|
if (pastPolyline) { |
|
|
|
|
handleBufferList(); |
|
|
|
|
} |
|
|
|
|
}, [areaDetail]) |
|
|
|
|
}, [areaDetail]); |
|
|
|
|
|
|
|
|
|
const drawInit = () => { |
|
|
|
|
if (mapControl.drawType === 'LINE') { |
|
|
|
@ -89,13 +89,11 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
} else if (mapControl.drawType === 'POLYGON') { |
|
|
|
|
onClickButton('POLYGON'); |
|
|
|
|
} else if (mapControl.drawType === 'RESET') { |
|
|
|
|
onClickReset('RESET') |
|
|
|
|
onClickReset('RESET'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onClickButton = (newMode) => { |
|
|
|
|
//console.log('onClickButton');
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onClickButton = newMode => { |
|
|
|
|
clearMode(mode); |
|
|
|
|
|
|
|
|
|
if (mode === newMode) { |
|
|
|
@ -106,15 +104,12 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
// mode = newMode;
|
|
|
|
|
|
|
|
|
|
startMode(newMode); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const clearMode = (mode) => { |
|
|
|
|
//console.log('clearMode')
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const clearMode = mode => { |
|
|
|
|
// if(!mode) return;
|
|
|
|
|
|
|
|
|
|
if (pastPolyline) { |
|
|
|
|
// console.log('clear polyline ', pastPolyline)
|
|
|
|
|
pastPolyline.setMap(null); |
|
|
|
|
pastDragCircle.forEach(c => c.setMap(null)); |
|
|
|
|
pastBuffer.setMap(null); |
|
|
|
@ -123,14 +118,12 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
setBuffer(); |
|
|
|
|
} |
|
|
|
|
if (pastCircle.length != 0) { |
|
|
|
|
//console.log('clear circle ', pastCircle)
|
|
|
|
|
pastCircle.forEach(prev => prev.setMap(null)) |
|
|
|
|
pastCircle.forEach(prev => prev.setMap(null)); |
|
|
|
|
naver.maps.Event.removeListener(pastClickEve); |
|
|
|
|
|
|
|
|
|
setCircle([]); |
|
|
|
|
} |
|
|
|
|
if (pastPolygon) { |
|
|
|
|
// console.log('clear polygon ', pastPolygon)
|
|
|
|
|
pastPolygon.setMap(null); |
|
|
|
|
pastDragCircle.forEach(c => c.setMap(null)); |
|
|
|
|
|
|
|
|
@ -138,38 +131,39 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
setDragCircle([]); |
|
|
|
|
} |
|
|
|
|
if (pastMarker.length != 0) { |
|
|
|
|
// console.log('clear marker ', pastMarker)
|
|
|
|
|
pastMarker.forEach(m => m.setMap(null)) |
|
|
|
|
pastMarker.forEach(m => m.setMap(null)); |
|
|
|
|
setMarker([]); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
finishDraw(); |
|
|
|
|
props.handleInitCoordinates(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const startMode = (mode) => { |
|
|
|
|
// console.log('startMode')
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const startMode = mode => { |
|
|
|
|
if (!mode) return; |
|
|
|
|
|
|
|
|
|
if(pastClickEve) { |
|
|
|
|
if (pastClickEve) { |
|
|
|
|
naver.maps.Event.removeListener(pastClickEve); |
|
|
|
|
} |
|
|
|
|
if (mode === 'LINE') { |
|
|
|
|
Eve.clickEve = 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') { |
|
|
|
|
Eve.clickEve = 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') { |
|
|
|
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }); |
|
|
|
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { |
|
|
|
|
onClickCircle(e); |
|
|
|
|
}); |
|
|
|
|
setClickEve(Eve.clickEve); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const removeListener = () => { |
|
|
|
|
// console.log('removeListener')
|
|
|
|
|
|
|
|
|
|
naver.maps.Event.removeListener(Eve.clickEve); |
|
|
|
|
naver.maps.Event.removeListener(pastClickEve); |
|
|
|
|
setClickEve(); |
|
|
|
@ -177,10 +171,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
naver.maps.Event.removeListener(Eve.mousedownEve); |
|
|
|
|
naver.maps.Event.removeListener(Eve.rightclickEve); |
|
|
|
|
if (!circle) $(document).off('mousemove.measure'); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const finishDraw = () => { |
|
|
|
|
//console.log('finishDraw')
|
|
|
|
|
removeListener(); |
|
|
|
|
|
|
|
|
|
if (polyline) { |
|
|
|
@ -191,8 +184,8 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
let polypaths = polyline.getPath()._array; |
|
|
|
|
|
|
|
|
|
setMarker(distanceMarker) |
|
|
|
|
distanceMarker.forEach(c => c.setMap(null)) |
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
distanceMarker.forEach(c => c.setMap(null)); |
|
|
|
|
|
|
|
|
|
if (polypaths.length >= 2) { |
|
|
|
|
setPolyline(polyline); |
|
|
|
@ -202,14 +195,13 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
isOpen: true, |
|
|
|
|
title: '좌표 최소 개수', |
|
|
|
|
desc: '좌표를 두 개 점으로 이어주세요.' |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
polyline.setMap(null); |
|
|
|
|
polyline = ''; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setFigure(polyline) |
|
|
|
|
|
|
|
|
|
setFigure(polyline); |
|
|
|
|
} else if (polygon) { |
|
|
|
|
let path = polygon.getPath(); |
|
|
|
|
path.pop(); |
|
|
|
@ -223,9 +215,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
// addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance));
|
|
|
|
|
|
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
distanceMarker.forEach(c => c.setMap(null)) |
|
|
|
|
distanceMarker.forEach(c => c.setMap(null)); |
|
|
|
|
|
|
|
|
|
if(polygonpaths.length >= 3) { |
|
|
|
|
if (polygonpaths.length >= 3) { |
|
|
|
|
setPolygon(polygon); |
|
|
|
|
setAreaInfo(polygonpaths); |
|
|
|
|
} else { |
|
|
|
@ -233,17 +225,16 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
isOpen: true, |
|
|
|
|
title: '좌표 최소 개수', |
|
|
|
|
desc: '좌표를 세 개 점으로 이어주세요.' |
|
|
|
|
}) |
|
|
|
|
polygon.setMap(null) |
|
|
|
|
}); |
|
|
|
|
polygon.setMap(null); |
|
|
|
|
polygon = ''; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setFigure(polygon) |
|
|
|
|
setFigure(polygon); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onClickPolyline = (e) => { |
|
|
|
|
//console.log('onClickPolyline')
|
|
|
|
|
const onClickPolyline = e => { |
|
|
|
|
var coord = e.coord; |
|
|
|
|
|
|
|
|
|
if (!polyline) { |
|
|
|
@ -269,24 +260,34 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
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') |
|
|
|
|
addMileStone(coord, 'Start'); |
|
|
|
|
} else { |
|
|
|
|
guideline.setPath([e.coord]); |
|
|
|
|
polyline.getPath().push(coord); |
|
|
|
|
|
|
|
|
|
var distance = polyline.getDistance(); |
|
|
|
|
// addMileStone(coord, fromMetersToText(distance - lastDistance));
|
|
|
|
|
addMileStone(polyline.getPath()._array, fromMetersToText(distance - lastDistance)); |
|
|
|
|
addMileStone( |
|
|
|
|
polyline.getPath()._array, |
|
|
|
|
fromMetersToText(distance - lastDistance) |
|
|
|
|
); |
|
|
|
|
lastDistance = distance; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onMouseMovePolyline = (e) => { |
|
|
|
|
// console.log('onMouseMovePolyline')
|
|
|
|
|
const onMouseMovePolyline = e => { |
|
|
|
|
var proj = map.getProjection(), |
|
|
|
|
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
|
|
|
|
path = guideline.getPath(); |
|
|
|
@ -296,10 +297,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
path.push(coord); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onClickPolygon = (e) => { |
|
|
|
|
// console.log('onClickPolygon')
|
|
|
|
|
const onClickPolygon = e => { |
|
|
|
|
var coord = e.coord; |
|
|
|
|
// let guide;
|
|
|
|
|
|
|
|
|
@ -320,28 +320,34 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
}); |
|
|
|
|
guideline.setVisible(false); |
|
|
|
|
|
|
|
|
|
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) |
|
|
|
|
$(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) }); |
|
|
|
|
Eve.rightclickEve = naver.maps.Event.addListener( |
|
|
|
|
map, |
|
|
|
|
'rightclick', |
|
|
|
|
function () { |
|
|
|
|
finishDraw(); |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
$(document).on('mousemove.measure', function (e) { |
|
|
|
|
onMouseMovePolygon(e); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
lastDistance = guideline.getDistance(); |
|
|
|
|
addMileStone(coord, 'Start') |
|
|
|
|
addMileStone(coord, 'Start'); |
|
|
|
|
} else { |
|
|
|
|
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(guideline.getPath()._array, fromMetersToText(distance - lastDistance)); |
|
|
|
|
addMileStone( |
|
|
|
|
guideline.getPath()._array, |
|
|
|
|
fromMetersToText(distance - lastDistance) |
|
|
|
|
); |
|
|
|
|
lastDistance = distance; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onMouseMovePolygon = (e) => { |
|
|
|
|
//console.log('onMouseMovePolygon')
|
|
|
|
|
const onMouseMovePolygon = e => { |
|
|
|
|
if (!polygon) return; |
|
|
|
|
|
|
|
|
|
var proj = map.getProjection(), |
|
|
|
@ -353,19 +359,18 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
path.push(coord); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onClickCircle = (e) => { |
|
|
|
|
// console.log('onClickCircle')
|
|
|
|
|
const onClickCircle = e => { |
|
|
|
|
var coord = e.coord; |
|
|
|
|
|
|
|
|
|
if(!circle) { |
|
|
|
|
if (!circle) { |
|
|
|
|
radiusline = new naver.maps.Polyline({ |
|
|
|
|
strokeStyle: [4, 4], |
|
|
|
|
strokeOpacity: 0.6, |
|
|
|
|
path: [coord], |
|
|
|
|
path: [coord] |
|
|
|
|
// map: map
|
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
lastDistance = radiusline.getDistance(); |
|
|
|
|
|
|
|
|
|
circle = new naver.maps.Circle({ |
|
|
|
@ -377,25 +382,29 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
radius: 100, |
|
|
|
|
map: map, |
|
|
|
|
clickable: true |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) |
|
|
|
|
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) |
|
|
|
|
distanceMarker.setPosition(coord); |
|
|
|
|
} |
|
|
|
|
setCircle(prev => ([...prev, circle])) |
|
|
|
|
setCircle(prev => [...prev, circle]); |
|
|
|
|
setAreaInfo(''); |
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
setFigure(circle.center); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onMouseDownDrag = (index) => { |
|
|
|
|
// console.log('onMouseDownDrag')
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onMouseDownDrag = index => { |
|
|
|
|
map.setOptions({ |
|
|
|
|
draggable: false, |
|
|
|
|
pinchZoom: false, |
|
|
|
@ -404,19 +413,21 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
disableDoubleTapZoom: true, |
|
|
|
|
disableDoubleClickZoom: true, |
|
|
|
|
disableTwoFingerTapZoom: true |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if(circle) { |
|
|
|
|
if (circle) { |
|
|
|
|
removeListener(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); |
|
|
|
|
$(document).on('mouseup.measure', function () { onMouseUpDrag(index) }); |
|
|
|
|
} |
|
|
|
|
$(document).on('mousemove.measure', function (e) { |
|
|
|
|
onMouseMoveDrag(e, index); |
|
|
|
|
}); |
|
|
|
|
$(document).on('mouseup.measure', function () { |
|
|
|
|
onMouseUpDrag(index); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onMouseMoveDrag = (e, index) => { |
|
|
|
|
//console.log('onMouseMoveDrag')
|
|
|
|
|
|
|
|
|
|
var proj = map.getProjection(), |
|
|
|
|
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); |
|
|
|
|
|
|
|
|
@ -429,13 +440,12 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
if (i === index) { |
|
|
|
|
path = coord; |
|
|
|
|
} else { |
|
|
|
|
path = polypaths[i] |
|
|
|
|
path = polypaths[i]; |
|
|
|
|
} |
|
|
|
|
movepath.push(path); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
polyline.setPath(movepath); |
|
|
|
|
|
|
|
|
|
} else if (polygon) { |
|
|
|
|
var polygonpaths = polygon.getPath()._array; |
|
|
|
|
|
|
|
|
@ -445,12 +455,11 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
if (i === index) { |
|
|
|
|
path = coord; |
|
|
|
|
} else { |
|
|
|
|
path = polygonpaths[i] |
|
|
|
|
path = polygonpaths[i]; |
|
|
|
|
} |
|
|
|
|
movepath.push(path); |
|
|
|
|
} |
|
|
|
|
polygon.setPaths(movepath) |
|
|
|
|
|
|
|
|
|
polygon.setPaths(movepath); |
|
|
|
|
} else if (circle) { |
|
|
|
|
var center = circle.getCenter(), |
|
|
|
|
r = proj.getDistance(coord, center); |
|
|
|
@ -461,11 +470,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
if (!circle) { |
|
|
|
|
dragCircle[index].setCenter(coord); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onMouseUpDrag = (index) => { |
|
|
|
|
// console.log('onMouseUpDrag')
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onMouseUpDrag = index => { |
|
|
|
|
map.setOptions({ |
|
|
|
|
draggable: true, |
|
|
|
|
pinchZoom: true, |
|
|
|
@ -474,7 +481,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
disableDoubleTapZoom: false, |
|
|
|
|
disableDoubleClickZoom: false, |
|
|
|
|
disableTwoFingerTapZoom: false |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if (polyline) { |
|
|
|
|
var path = polyline.getPath()._array; |
|
|
|
@ -494,34 +501,36 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
$(document).off('mouseup.measure'); |
|
|
|
|
|
|
|
|
|
if (circle) { |
|
|
|
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }) |
|
|
|
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { |
|
|
|
|
onClickCircle(e); |
|
|
|
|
}); |
|
|
|
|
setClickEve(Eve.clickEve); |
|
|
|
|
|
|
|
|
|
setCircle(prev => ([...prev, circle])) |
|
|
|
|
setCircle(prev => [...prev, circle]); |
|
|
|
|
setAreaInfo(''); |
|
|
|
|
setFigure(circle) |
|
|
|
|
setFigure(circle); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const setAreaInfo = (path) => { |
|
|
|
|
const setAreaInfo = path => { |
|
|
|
|
let bufferZone = 100; |
|
|
|
|
if(polygon) bufferZone = 0; |
|
|
|
|
if (polygon) bufferZone = 0; |
|
|
|
|
|
|
|
|
|
areaInfo = { |
|
|
|
|
coordinates: [], |
|
|
|
|
bufferZone: bufferZone, |
|
|
|
|
bufferZone: bufferZone |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
let prePath = []; |
|
|
|
|
if (path) { |
|
|
|
|
path.forEach((item) => { |
|
|
|
|
path.forEach(item => { |
|
|
|
|
const p = { |
|
|
|
|
lat: item.y, |
|
|
|
|
lon: item.x |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
prePath.push(p); |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
// path.forEach(prev=> prePath.push([prev.x, prev.y]))
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -535,53 +544,58 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
const point = { |
|
|
|
|
lat: circle.getCenter().y, |
|
|
|
|
lon: circle.getCenter().x |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
areaInfo.coordinates.push(point); |
|
|
|
|
areaInfo.bufferZone = circle.getRadius(); |
|
|
|
|
areaInfo.areaType = 'CIRCLE'; |
|
|
|
|
} |
|
|
|
|
props.handleCoordinates(areaInfo); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onClickReset = () => { |
|
|
|
|
// console.log('onClickRest - ', mapControl.drawType);
|
|
|
|
|
if (mapControl.drawType === 'RESET') { |
|
|
|
|
clearMode('RESET'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const createMarker = (data) => { |
|
|
|
|
const createMarker = data => { |
|
|
|
|
distanceMarker.push( |
|
|
|
|
new naver.maps.Marker({ |
|
|
|
|
position: data.position, |
|
|
|
|
icon: { |
|
|
|
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:' + data.color + ';"><span>'+ data.content +'</span></div>', |
|
|
|
|
content: |
|
|
|
|
'<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:' + |
|
|
|
|
data.color + |
|
|
|
|
';"><span>' + |
|
|
|
|
data.content + |
|
|
|
|
'</span></div>', |
|
|
|
|
anchor: data.anchor |
|
|
|
|
}, map: map |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleDetailDraw = () => { |
|
|
|
|
if (props.areaCoordList) { |
|
|
|
|
// console.log('handleDetailDraw')
|
|
|
|
|
|
|
|
|
|
const areas = props.areaCoordList[0]; |
|
|
|
|
|
|
|
|
|
const paths = []; |
|
|
|
|
areas.coordList.forEach((coord) => { |
|
|
|
|
const path = new naver.maps.LatLng(coord.lat, coord.lon) |
|
|
|
|
areas.coordList.forEach(coord => { |
|
|
|
|
const path = new naver.maps.LatLng(coord.lat, coord.lon); |
|
|
|
|
|
|
|
|
|
paths.push(path); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
let clickSet; |
|
|
|
|
{isDisabled===true ? clickSet=false : clickSet=true} |
|
|
|
|
{ |
|
|
|
|
isDisabled === true ? (clickSet = false) : (clickSet = true); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (areas.areaType && areas.areaType === 'LINE') { |
|
|
|
|
//polyline 생성
|
|
|
|
|
if(pastPolyline) { |
|
|
|
|
if (pastPolyline) { |
|
|
|
|
pastPolyline.setMap(null); |
|
|
|
|
pastDragCircle.forEach(c => c.setMap(null)); |
|
|
|
|
} |
|
|
|
@ -595,10 +609,10 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
map: map |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
setPolyline(polyline) |
|
|
|
|
setPolyline(polyline); |
|
|
|
|
|
|
|
|
|
//dragCircle 생성
|
|
|
|
|
for(let i = 0; i < paths.length; i++) { |
|
|
|
|
for (let i = 0; i < paths.length; i++) { |
|
|
|
|
dragCircle.push( |
|
|
|
|
new naver.maps.Circle({ |
|
|
|
|
strokestrokeOpacity: 1, |
|
|
|
@ -612,12 +626,20 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
// clickable: true
|
|
|
|
|
clickable: clickSet |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
// dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
|
|
|
|
|
{isDisabled ? |
|
|
|
|
{} |
|
|
|
|
: |
|
|
|
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) |
|
|
|
|
{ |
|
|
|
|
isDisabled |
|
|
|
|
? {} |
|
|
|
|
: dragCircleEve.push( |
|
|
|
|
naver.maps.Event.addListener( |
|
|
|
|
dragCircle[i], |
|
|
|
|
'mousedown', |
|
|
|
|
function () { |
|
|
|
|
onMouseDownDrag(i); |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -627,14 +649,13 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
if (areas.bufferCoordList) { |
|
|
|
|
const bufferPaths = []; |
|
|
|
|
|
|
|
|
|
areas.bufferCoordList.forEach((bfCoord) => { |
|
|
|
|
areas.bufferCoordList.forEach(bfCoord => { |
|
|
|
|
const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon); |
|
|
|
|
|
|
|
|
|
bufferPaths.push(path); |
|
|
|
|
}); |
|
|
|
|
// console.log('buffer test : ',areas.bufferCoordList);
|
|
|
|
|
|
|
|
|
|
if(pastBuffer) { |
|
|
|
|
if (pastBuffer) { |
|
|
|
|
pastBuffer.setMap(null); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -649,28 +670,30 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//marker 생성
|
|
|
|
|
if(pastMarker) { |
|
|
|
|
if (pastMarker) { |
|
|
|
|
pastMarker.forEach(c => c.setMap(null)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
for(let i = 0; i < paths.length; i++) { |
|
|
|
|
if(i == 0) { |
|
|
|
|
for (let i = 0; i < paths.length; i++) { |
|
|
|
|
if (i == 0) { |
|
|
|
|
const data = {}; |
|
|
|
|
data.position = paths[i]; |
|
|
|
|
data.color = '#ff0000'; |
|
|
|
|
data.content = 'Start'; |
|
|
|
|
data.anchor = new naver.maps.Point(45, 35); |
|
|
|
|
createMarker(data); |
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
|
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 dis1 = paths[i-1] |
|
|
|
|
let dis2 = paths[i] |
|
|
|
|
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
|
|
|
|
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 |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const data = {}; |
|
|
|
|
data.position = midPoint; |
|
|
|
@ -685,7 +708,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
if (areas.areaType && areas.areaType === 'POLYGON') { |
|
|
|
|
//polygon 생성
|
|
|
|
|
if(pastPolygon) { |
|
|
|
|
if (pastPolygon) { |
|
|
|
|
pastPolygon.setMap(null); |
|
|
|
|
pastDragCircle.forEach(c => c.setMap(null)); |
|
|
|
|
} |
|
|
|
@ -701,7 +724,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
setPolygon(polygon); |
|
|
|
|
|
|
|
|
|
//dragCircle 생성
|
|
|
|
|
for(let i = 0; i < paths.length; i++) { |
|
|
|
|
for (let i = 0; i < paths.length; i++) { |
|
|
|
|
dragCircle.push( |
|
|
|
|
new naver.maps.Circle({ |
|
|
|
|
strokestrokeOpacity: 1, |
|
|
|
@ -715,26 +738,33 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
// clickable: true
|
|
|
|
|
clickable: clickSet |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
// dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
|
|
|
|
|
{isDisabled ? |
|
|
|
|
{} |
|
|
|
|
: |
|
|
|
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) |
|
|
|
|
{ |
|
|
|
|
isDisabled |
|
|
|
|
? {} |
|
|
|
|
: dragCircleEve.push( |
|
|
|
|
naver.maps.Event.addListener( |
|
|
|
|
dragCircle[i], |
|
|
|
|
'mousedown', |
|
|
|
|
function () { |
|
|
|
|
onMouseDownDrag(i); |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setDragCircle(dragCircle); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//marker 생성
|
|
|
|
|
if(pastMarker) { |
|
|
|
|
pastMarker.forEach(c => c.setMap(null)) |
|
|
|
|
if (pastMarker) { |
|
|
|
|
pastMarker.forEach(c => c.setMap(null)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
const data = {}; |
|
|
|
|
data.position = paths[0]; |
|
|
|
|
data.color = '#ff0000'; |
|
|
|
@ -742,16 +772,19 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
data.anchor = new naver.maps.Point(45, 35); |
|
|
|
|
createMarker(data); |
|
|
|
|
|
|
|
|
|
//첫좌표이자 마지막 좌표
|
|
|
|
|
} else if(i == paths.length) { |
|
|
|
|
//첫좌표이자 마지막 좌표
|
|
|
|
|
} else if (i == paths.length) { |
|
|
|
|
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 dis1 = paths[0] |
|
|
|
|
let dis2 = paths[i-1] |
|
|
|
|
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
|
|
|
|
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 |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const data = {}; |
|
|
|
|
data.position = midPoint; |
|
|
|
@ -759,22 +792,25 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
data.content = text; |
|
|
|
|
data.anchor = new naver.maps.Point(0, 35); |
|
|
|
|
createMarker(data); |
|
|
|
|
//그 외 나머지
|
|
|
|
|
//그 외 나머지
|
|
|
|
|
} else { |
|
|
|
|
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 dis1 = paths[i-1] |
|
|
|
|
let dis2 = paths[i] |
|
|
|
|
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
|
|
|
|
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 |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const data = {}; |
|
|
|
|
data.position = midPoint; |
|
|
|
|
data.color = '#737373'; |
|
|
|
|
data.content = text; |
|
|
|
|
anchor: new naver.maps.Point(20, 35) |
|
|
|
|
anchor: new naver.maps.Point(20, 35); |
|
|
|
|
createMarker(data); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -782,10 +818,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (areas.areaType && areas.areaType === 'CIRCLE') { |
|
|
|
|
//circle 생성
|
|
|
|
|
if(pastCircle) { |
|
|
|
|
if (pastCircle) { |
|
|
|
|
pastCircle.forEach(prev => prev.setMap(null)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -802,16 +837,22 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
clickable: clickSet |
|
|
|
|
}); |
|
|
|
|
// Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
|
|
|
|
|
{isDisabled ? |
|
|
|
|
{} |
|
|
|
|
: |
|
|
|
|
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) |
|
|
|
|
{ |
|
|
|
|
isDisabled |
|
|
|
|
? {} |
|
|
|
|
: (Eve.mousedownEve = naver.maps.Event.addListener( |
|
|
|
|
circle, |
|
|
|
|
'mousedown', |
|
|
|
|
function () { |
|
|
|
|
onMouseDownDrag(0); |
|
|
|
|
} |
|
|
|
|
)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setCircle([circle]); |
|
|
|
|
|
|
|
|
|
//marker 생성
|
|
|
|
|
if(pastMarker) { |
|
|
|
|
if (pastMarker) { |
|
|
|
|
pastMarker.forEach(c => c.setMap(null)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -819,35 +860,47 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
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>', |
|
|
|
|
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]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//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:13px;color:#ff0000;"><span>'+ text +'</span></div>' |
|
|
|
|
midPoint = coord |
|
|
|
|
anchor = new naver.maps.Point(45, 35) |
|
|
|
|
if (text == 'Start') { |
|
|
|
|
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]; |
|
|
|
|
if(circle) { |
|
|
|
|
midPoint = coord |
|
|
|
|
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]; |
|
|
|
|
if (circle) { |
|
|
|
|
midPoint = coord; |
|
|
|
|
} else { |
|
|
|
|
midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
|
|
|
|
midPoint = new naver.maps.LatLng( |
|
|
|
|
(dis1.y + dis2.y) / 2, |
|
|
|
|
(dis1.x + dis2.x) / 2 |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
anchor = new naver.maps.Point(20, 35) |
|
|
|
|
anchor = new naver.maps.Point(20, 35); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var marker = new naver.maps.Marker({ |
|
|
|
@ -855,28 +908,25 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
icon: { |
|
|
|
|
content: content, |
|
|
|
|
anchor: anchor |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
// map: map
|
|
|
|
|
}); |
|
|
|
|
// marker.setVisible(false)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(circle) { |
|
|
|
|
if (circle) { |
|
|
|
|
distanceMarker = marker; |
|
|
|
|
} else { |
|
|
|
|
marker.setMap(map); |
|
|
|
|
distanceMarker.push(marker); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//거리 재기
|
|
|
|
|
const fromMetersToText = (meters) => { |
|
|
|
|
const fromMetersToText = meters => { |
|
|
|
|
meters = meters || 0; |
|
|
|
|
let text = parseFloat(meters.toFixed(1)) + 'm'; |
|
|
|
|
return text; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return( |
|
|
|
|
<InfoModal modal={alertModal} setModal={setAlertModal} /> |
|
|
|
|
) |
|
|
|
|
return <InfoModal modal={alertModal} setModal={setAlertModal} />; |
|
|
|
|
}; |