|
|
|
|
@ -16,7 +16,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
|
|
|
|
|
const [pastClickEve, setClickEve] = useState(); |
|
|
|
|
const [pastMarker, setMarker] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [figure, setFigure] = useState(); |
|
|
|
|
|
|
|
|
|
const [areaDetail, setAreaDetail] = useState(); |
|
|
|
|
@ -25,13 +25,13 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
isOpen: false, |
|
|
|
|
title: '', |
|
|
|
|
desc: '' |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const naver = props.naver; |
|
|
|
|
const map = props.map; |
|
|
|
|
let mode = props.mode; |
|
|
|
|
let dragCircleSize = props.dragCircleSize; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let areaInfo; |
|
|
|
|
let lastDistance; |
|
|
|
|
|
|
|
|
|
@ -48,7 +48,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
clickEve: '', |
|
|
|
|
mousedownEve: '', |
|
|
|
|
rightclickEve: '' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
let dragCircle = []; |
|
|
|
|
let dragCircleEve = []; |
|
|
|
|
@ -57,28 +57,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') { |
|
|
|
|
@ -88,13 +88,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) { |
|
|
|
|
@ -102,18 +100,15 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// mode = newMode;
|
|
|
|
|
// 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); |
|
|
|
|
@ -122,14 +117,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)); |
|
|
|
|
|
|
|
|
|
@ -137,38 +130,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')
|
|
|
|
|
props.handleInitCoordinates(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
@ -176,10 +170,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) { |
|
|
|
|
@ -190,8 +183,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); |
|
|
|
|
@ -201,14 +194,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(); |
|
|
|
|
@ -222,9 +214,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 { |
|
|
|
|
@ -232,17 +224,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) { |
|
|
|
|
@ -268,24 +259,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(); |
|
|
|
|
@ -295,10 +296,9 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
path.push(coord); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onClickPolygon = (e) => { |
|
|
|
|
// console.log('onClickPolygon')
|
|
|
|
|
const onClickPolygon = e => { |
|
|
|
|
var coord = e.coord; |
|
|
|
|
// let guide;
|
|
|
|
|
|
|
|
|
|
@ -319,28 +319,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(), |
|
|
|
|
@ -352,19 +358,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({ |
|
|
|
|
@ -376,25 +381,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, |
|
|
|
|
@ -403,19 +412,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)); |
|
|
|
|
|
|
|
|
|
@ -428,13 +439,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; |
|
|
|
|
|
|
|
|
|
@ -444,12 +454,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); |
|
|
|
|
@ -460,11 +469,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, |
|
|
|
|
@ -473,7 +480,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
disableDoubleTapZoom: false, |
|
|
|
|
disableDoubleClickZoom: false, |
|
|
|
|
disableTwoFingerTapZoom: false |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if (polyline) { |
|
|
|
|
var path = polyline.getPath()._array; |
|
|
|
|
@ -491,7 +498,7 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
// if(pastMarker.length !=0) {
|
|
|
|
|
// //마커 위치 변경
|
|
|
|
|
// pastMarker[index].setPosition(path[index]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// //마커 content 변경
|
|
|
|
|
// if(index == 0) {
|
|
|
|
|
// //시작 지점 이동
|
|
|
|
|
@ -508,11 +515,11 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
// //사이 지점 이동(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>',
|
|
|
|
|
@ -527,34 +534,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]))
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -568,38 +577,35 @@ 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 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); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if (areas.areaType && areas.areaType === 'LINE') { |
|
|
|
|
//polyline 생성
|
|
|
|
|
if(pastPolyline) { |
|
|
|
|
if (pastPolyline) { |
|
|
|
|
pastPolyline.setMap(null); |
|
|
|
|
pastDragCircle.forEach(c => c.setMap(null)); |
|
|
|
|
} |
|
|
|
|
@ -613,10 +619,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, |
|
|
|
|
@ -629,9 +635,16 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
map: map, |
|
|
|
|
clickable: true |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) |
|
|
|
|
|
|
|
|
|
); |
|
|
|
|
dragCircleEve.push( |
|
|
|
|
naver.maps.Event.addListener( |
|
|
|
|
dragCircle[i], |
|
|
|
|
'mousedown', |
|
|
|
|
function () { |
|
|
|
|
onMouseDownDrag(i); |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setDragCircle(dragCircle); |
|
|
|
|
@ -640,14 +653,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); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -662,41 +674,52 @@ 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) { |
|
|
|
|
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:#ff0000;"><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(45, 35) |
|
|
|
|
}, map: map |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
var proj = map.getProjection(), |
|
|
|
|
r = proj.getDistance(paths[i-1], paths[i]); |
|
|
|
|
|
|
|
|
|
let text = fromMetersToText(r);
|
|
|
|
|
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 |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
distanceMarker.push( |
|
|
|
|
new naver.maps.Marker({ |
|
|
|
|
// 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>', |
|
|
|
|
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(20, 35) |
|
|
|
|
}, map: map |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
@ -704,7 +727,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)); |
|
|
|
|
} |
|
|
|
|
@ -720,7 +743,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, |
|
|
|
|
@ -733,85 +756,106 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
map: map, |
|
|
|
|
clickable: true |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) |
|
|
|
|
); |
|
|
|
|
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) { |
|
|
|
|
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:#ff0000;"><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(45, 35) |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
//첫좌표이자 마지막 좌표
|
|
|
|
|
} 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 |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
distanceMarker.push( |
|
|
|
|
new naver.maps.Marker({ |
|
|
|
|
// 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>', |
|
|
|
|
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(0, 35) |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
//그 외 나머지
|
|
|
|
|
); |
|
|
|
|
//그 외 나머지
|
|
|
|
|
} 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 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 |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
distanceMarker.push( |
|
|
|
|
new naver.maps.Marker({ |
|
|
|
|
// 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>', |
|
|
|
|
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(20, 35) |
|
|
|
|
}, |
|
|
|
|
map: map |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setMarker(distanceMarker); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (areas.areaType && areas.areaType === 'CIRCLE') { |
|
|
|
|
//circle 생성
|
|
|
|
|
if(pastCircle) { |
|
|
|
|
if (pastCircle) { |
|
|
|
|
pastCircle.forEach(prev => prev.setMap(null)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -826,12 +870,18 @@ export const FlightPlanDraw = props => {
|
|
|
|
|
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); |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
setCircle([circle]); |
|
|
|
|
|
|
|
|
|
//marker 생성
|
|
|
|
|
if(pastMarker) { |
|
|
|
|
if (pastMarker) { |
|
|
|
|
pastMarker.forEach(c => c.setMap(null)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -839,75 +889,83 @@ 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({ |
|
|
|
|
position: midPoint, |
|
|
|
|
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; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var km = 1000, |
|
|
|
|
text = meters; |
|
|
|
|
|
|
|
|
|
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( |
|
|
|
|
<InfoModal modal={alertModal} setModal={setAlertModal} /> |
|
|
|
|
) |
|
|
|
|
}; |
|
|
|
|
return <InfoModal modal={alertModal} setModal={setAlertModal} />; |
|
|
|
|
}; |
|
|
|
|
|
kimjh(김장현)
2 years ago