이준희
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