이준희
1 year ago
5 changed files with 206 additions and 14 deletions
@ -0,0 +1,151 @@
|
||||
import $ from 'jquery'; |
||||
import { useState, useEffect } from 'react'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
|
||||
export default function ControlDraw(props) { |
||||
const mapControl = useSelector(state => state.controlMapReducer); |
||||
|
||||
const naver = props.naver; |
||||
const map = props.map; |
||||
let mode; |
||||
|
||||
const [mapClickEvent, setMapClickEvent] = useState(); |
||||
const [circleArr, setCircleArr] = useState([]); |
||||
|
||||
const [up, setUp] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
if (up) { |
||||
const delay = 100; |
||||
const timer = setTimeout(() => { |
||||
createMapClick(); |
||||
setUp(false); |
||||
}, delay); |
||||
|
||||
return () => { |
||||
clearTimeout(timer); |
||||
}; |
||||
} |
||||
}, [up]); |
||||
|
||||
useEffect(() => { |
||||
drawInit(); |
||||
}, [mapControl.ctrlDrawType]); |
||||
|
||||
const drawInit = () => { |
||||
removeMapClick(); |
||||
if (mapControl.ctrlDrawType === 'CIRCLE') { |
||||
onClickButton('CIRCLE'); |
||||
} else if (mapControl.ctrlDrawType === 'RESET') { |
||||
onClickReset(); |
||||
} |
||||
}; |
||||
|
||||
const onClickButton = newMode => { |
||||
removeMapClick(); |
||||
if (mode === newMode) { |
||||
mode = null; |
||||
return; |
||||
} |
||||
|
||||
// startMode(newMode);
|
||||
if (!newMode) return; |
||||
|
||||
createMapClick(); |
||||
}; |
||||
|
||||
const onClickReset = () => { |
||||
console.log('초기화 진행'); |
||||
circleArr.map(circle => circle.setMap(null)); |
||||
setCircleArr([]); |
||||
|
||||
removeMapClick(); |
||||
}; |
||||
|
||||
const removeMapClick = () => { |
||||
$(document).off('mousemove.measure'); |
||||
$(document).off('mouseup.measure'); |
||||
|
||||
// naver.maps.Event.clearInstanceListeners(map);
|
||||
naver.maps.Event.removeListener(mapClickEvent); |
||||
setMapClickEvent(); |
||||
}; |
||||
|
||||
const createMapClick = () => { |
||||
setMapClickEvent( |
||||
naver.maps.Event.addListener(map, 'click', function (e) { |
||||
onClickCircle(e); |
||||
}) |
||||
); |
||||
}; |
||||
|
||||
const onClickCircle = e => { |
||||
const coord = e.coord; |
||||
|
||||
const circle = new naver.maps.Circle({ |
||||
strokeColor: '#283046', |
||||
strokeOpacity: 1, |
||||
fillColor: '#7367F0', |
||||
fillOpacity: 0.1, |
||||
center: coord, |
||||
radius: 100, |
||||
map: map, |
||||
clickable: true |
||||
}); |
||||
setCircleArr(prev => [...prev, circle]); |
||||
|
||||
naver.maps.Event.addListener(circle, 'mousedown', function () { |
||||
onMouseDown(circle); |
||||
}); |
||||
setUp(false); |
||||
}; |
||||
|
||||
const onMouseDown = circle => { |
||||
map.setOptions({ |
||||
draggable: false, |
||||
pinchZoom: false, |
||||
scrollWheel: false, |
||||
keyboardShortcuts: false, |
||||
disableDoubleTapZoom: true, |
||||
disableDoubleClickZoom: true, |
||||
disableTwoFingerTapZoom: true |
||||
}); |
||||
|
||||
$(document).on('mousemove.measure', function (e) { |
||||
onMouseMove(e, circle); |
||||
}); |
||||
|
||||
$(document).on('mouseup.measure', function (e) { |
||||
onMouseUp(); |
||||
}); |
||||
}; |
||||
|
||||
const onMouseMove = (e, circle) => { |
||||
const proj = map.getProjection(); |
||||
const coord = proj.fromPageXYToCoord( |
||||
new naver.maps.Point(e.pageX, e.pageY) |
||||
); |
||||
|
||||
const center = circle.getCenter(); |
||||
const r = proj.getDistance(coord, center); |
||||
|
||||
circle.setRadius(r); |
||||
}; |
||||
|
||||
const onMouseUp = () => { |
||||
map.setOptions({ |
||||
draggable: true, |
||||
pinchZoom: true, |
||||
scrollWheel: true, |
||||
keyboardShortcuts: true, |
||||
disableDoubleTapZoom: false, |
||||
disableDoubleClickZoom: false, |
||||
disableTwoFingerTapZoom: false |
||||
}); |
||||
|
||||
removeMapClick(); |
||||
setUp(true); |
||||
}; |
||||
|
||||
return null; |
||||
} |
Loading…
Reference in new issue