|
|
@ -1,82 +1,98 @@ |
|
|
|
import $ from 'jquery'; |
|
|
|
import $ from 'jquery'; |
|
|
|
import { useState, useEffect } from 'react'; |
|
|
|
import { useState, useEffect } from 'react'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
|
|
|
|
export default function ControlDraw(props) { |
|
|
|
export default function ControlDraw(props) { |
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
|
|
|
|
|
|
|
|
const naver = props.naver; |
|
|
|
const naver = props.naver; |
|
|
|
const map = props.map; |
|
|
|
const map = props.map; |
|
|
|
let mode; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [mapClickEvent, setMapClickEvent] = useState(); |
|
|
|
|
|
|
|
const [circleArr, setCircleArr] = useState([]); |
|
|
|
const [circleArr, setCircleArr] = useState([]); |
|
|
|
|
|
|
|
const [markerArr, setMarkerArr] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
const [up, setUp] = useState(false); |
|
|
|
const [upCircle, setUpCircle] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (up) { |
|
|
|
if (upCircle) { |
|
|
|
const delay = 100; |
|
|
|
const delay = 100; |
|
|
|
const timer = setTimeout(() => { |
|
|
|
const timer = setTimeout(() => { |
|
|
|
createMapClick(); |
|
|
|
resumeMapClick(); |
|
|
|
setUp(false); |
|
|
|
setUpCircle(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const index = circleArr.findIndex( |
|
|
|
|
|
|
|
prev => prev.center === upCircle.getCenter() |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
markerArr.map((prev, idx) => { |
|
|
|
|
|
|
|
if (idx === index) { |
|
|
|
|
|
|
|
const text = fromMetersToText(upCircle.getRadius()); |
|
|
|
|
|
|
|
const 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>'; |
|
|
|
|
|
|
|
prev.setIcon({ |
|
|
|
|
|
|
|
...prev.getIcon(), |
|
|
|
|
|
|
|
content: content |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
}, delay); |
|
|
|
}, delay); |
|
|
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
return () => { |
|
|
|
clearTimeout(timer); |
|
|
|
clearTimeout(timer); |
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
}, [up]); |
|
|
|
}, [upCircle]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
naver.maps.Event.addListener(map, 'click', onClickCircle); |
|
|
|
|
|
|
|
stopMapClick(); |
|
|
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
drawInit(); |
|
|
|
drawInit(); |
|
|
|
}, [mapControl.ctrlDrawType]); |
|
|
|
}, [mapControl.ctrlDrawType]); |
|
|
|
|
|
|
|
|
|
|
|
const drawInit = () => { |
|
|
|
const drawInit = () => { |
|
|
|
removeMapClick(); |
|
|
|
|
|
|
|
if (mapControl.ctrlDrawType === 'CIRCLE') { |
|
|
|
if (mapControl.ctrlDrawType === 'CIRCLE') { |
|
|
|
onClickButton('CIRCLE'); |
|
|
|
onClickButton('CIRCLE'); |
|
|
|
} else if (mapControl.ctrlDrawType === 'RESET') { |
|
|
|
} else if (mapControl.ctrlDrawType === 'RESET') { |
|
|
|
onClickReset(); |
|
|
|
clearMode(); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const onClickButton = newMode => { |
|
|
|
const onClickButton = newMode => { |
|
|
|
removeMapClick(); |
|
|
|
clearMode(); |
|
|
|
if (mode === newMode) { |
|
|
|
startMode(newMode); |
|
|
|
mode = null; |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// startMode(newMode);
|
|
|
|
|
|
|
|
if (!newMode) return; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
createMapClick(); |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const onClickReset = () => { |
|
|
|
const clearMode = () => { |
|
|
|
console.log('초기화 진행'); |
|
|
|
if (circleArr.length != 0) { |
|
|
|
circleArr.map(circle => circle.setMap(null)); |
|
|
|
circleArr.map(obj => obj.circle.setMap(null)); |
|
|
|
setCircleArr([]); |
|
|
|
setCircleArr([]); |
|
|
|
|
|
|
|
|
|
|
|
removeMapClick(); |
|
|
|
markerArr.map(marker => marker.setMap(null)); |
|
|
|
|
|
|
|
setMarkerArr([]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
stopMapClick(); |
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const removeMapClick = () => { |
|
|
|
const startMode = mode => { |
|
|
|
$(document).off('mousemove.measure'); |
|
|
|
if (!mode) return; |
|
|
|
$(document).off('mouseup.measure'); |
|
|
|
|
|
|
|
|
|
|
|
if (mode === 'CIRCLE') { |
|
|
|
|
|
|
|
resumeMapClick(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// naver.maps.Event.clearInstanceListeners(map);
|
|
|
|
const stopMapClick = () => { |
|
|
|
naver.maps.Event.removeListener(mapClickEvent); |
|
|
|
naver.maps.Event.stopDispatch(map, 'click'); |
|
|
|
setMapClickEvent(); |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const createMapClick = () => { |
|
|
|
const resumeMapClick = () => { |
|
|
|
setMapClickEvent( |
|
|
|
naver.maps.Event.resumeDispatch(map, 'click'); |
|
|
|
naver.maps.Event.addListener(map, 'click', function (e) { |
|
|
|
|
|
|
|
onClickCircle(e); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const onClickCircle = e => { |
|
|
|
const onClickCircle = e => { |
|
|
@ -92,12 +108,16 @@ export default function ControlDraw(props) { |
|
|
|
map: map, |
|
|
|
map: map, |
|
|
|
clickable: true |
|
|
|
clickable: true |
|
|
|
}); |
|
|
|
}); |
|
|
|
setCircleArr(prev => [...prev, circle]); |
|
|
|
setCircleArr(prev => [ |
|
|
|
|
|
|
|
...prev, |
|
|
|
|
|
|
|
{ center: coord, circle: circle, radius: 100 } |
|
|
|
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
|
|
naver.maps.Event.addListener(circle, 'mousedown', function () { |
|
|
|
naver.maps.Event.addListener(circle, 'mousedown', function () { |
|
|
|
onMouseDown(circle); |
|
|
|
onMouseDown(circle); |
|
|
|
}); |
|
|
|
}); |
|
|
|
setUp(false); |
|
|
|
|
|
|
|
|
|
|
|
addMileStone(coord, fromMetersToText(100)); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const onMouseDown = circle => { |
|
|
|
const onMouseDown = circle => { |
|
|
@ -115,8 +135,8 @@ export default function ControlDraw(props) { |
|
|
|
onMouseMove(e, circle); |
|
|
|
onMouseMove(e, circle); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
$(document).on('mouseup.measure', function (e) { |
|
|
|
$(document).on('mouseup.measure', function () { |
|
|
|
onMouseUp(); |
|
|
|
onMouseUp(circle); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
@ -132,7 +152,7 @@ export default function ControlDraw(props) { |
|
|
|
circle.setRadius(r); |
|
|
|
circle.setRadius(r); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const onMouseUp = () => { |
|
|
|
const onMouseUp = circle => { |
|
|
|
map.setOptions({ |
|
|
|
map.setOptions({ |
|
|
|
draggable: true, |
|
|
|
draggable: true, |
|
|
|
pinchZoom: true, |
|
|
|
pinchZoom: true, |
|
|
@ -143,8 +163,38 @@ export default function ControlDraw(props) { |
|
|
|
disableTwoFingerTapZoom: false |
|
|
|
disableTwoFingerTapZoom: false |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
removeMapClick(); |
|
|
|
$(document).off('mousemove.measure'); |
|
|
|
setUp(true); |
|
|
|
$(document).off('mouseup.measure'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
stopMapClick(); |
|
|
|
|
|
|
|
setUpCircle(circle); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const addMileStone = (coord, text) => { |
|
|
|
|
|
|
|
const 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>'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const midPoint = coord; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const anchor = new naver.maps.Point(20, 35); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const marker = new naver.maps.Marker({ |
|
|
|
|
|
|
|
position: midPoint, |
|
|
|
|
|
|
|
icon: { |
|
|
|
|
|
|
|
content: content, |
|
|
|
|
|
|
|
anchor: anchor |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
marker.setMap(map); |
|
|
|
|
|
|
|
setMarkerArr(prev => [...prev, marker]); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const fromMetersToText = meters => { |
|
|
|
|
|
|
|
meters = meters || 0; |
|
|
|
|
|
|
|
const text = parseFloat(meters.toFixed(1)) + 'm'; |
|
|
|
|
|
|
|
return text; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return null; |
|
|
|
return null; |
|
|
|