junh_eee
2 years ago
10 changed files with 107 additions and 497 deletions
@ -1,71 +0,0 @@ |
|||||||
import { useEffect, useState } from "react"; |
|
||||||
import { useSelector } from "react-redux"; |
|
||||||
|
|
||||||
|
|
||||||
export const DrawTest0 = props => { |
|
||||||
const {naver} = props; |
|
||||||
const {map} = props; |
|
||||||
|
|
||||||
const mapControl = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
// const [linePositions, setLinePositions] = useState([]);
|
|
||||||
const positions = ([]); |
|
||||||
const [lineZips, setLineZips] = useState([]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
}, [mapControl.drawType]); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if(mapControl.drawType === 'LINE') { |
|
||||||
naver.maps.Event.addListener(map, 'click', function(e) { |
|
||||||
// const position = e.coord;
|
|
||||||
positions.push(e.coord); |
|
||||||
createPolyline(positions); |
|
||||||
}) |
|
||||||
|
|
||||||
// naver.maps.Event.addListener(map, 'dbclick', function(e) {
|
|
||||||
// console.log("dbclick")
|
|
||||||
// })
|
|
||||||
|
|
||||||
naver.maps.Event.addListener(map, 'keydown', function(e) { |
|
||||||
const keyboardEvent = e.keyboardEvent, |
|
||||||
keyCode = keyboardEvent.keyCode || keyboardEvent.which; |
|
||||||
|
|
||||||
const ESC = 27; |
|
||||||
|
|
||||||
if(keyCode === ESC) { |
|
||||||
keyboardEvent.preventDefault(); |
|
||||||
|
|
||||||
// for(var i=0, ii=lineZips.length; i<ii; i++) {
|
|
||||||
// lineZips[i].setMap(null);
|
|
||||||
// // console.log(lineZips[i]);
|
|
||||||
// }
|
|
||||||
lineZips.forEach(line => line.setMap(null)); |
|
||||||
setLineZips([]); |
|
||||||
console.log(lineZips); |
|
||||||
|
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const createPolyline = (positions) => { |
|
||||||
if(positions.length >= 2) { |
|
||||||
const polyline = new naver.maps.Polyline({ |
|
||||||
path: [positions[(positions.length)-1], positions[(positions.length)-2]], |
|
||||||
strokeWeight: 2, |
|
||||||
strokeOpacity: 1, |
|
||||||
strokeColor: '#ff0000', |
|
||||||
map: map |
|
||||||
}) |
|
||||||
// polyline.setMap(map);
|
|
||||||
setLineZips([...lineZips, positions]); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const removeLine = () => { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
return null; |
|
||||||
} |
|
||||||
@ -1,157 +0,0 @@ |
|||||||
import { useEffect, useState } from "react"; |
|
||||||
import { BiCaretLeftCircle } from "react-icons/bi"; |
|
||||||
import { useSelector } from "react-redux"; |
|
||||||
|
|
||||||
export const DrawTest1 = props => { |
|
||||||
const {naver} = props; |
|
||||||
const {map} = props; |
|
||||||
const {drawType} = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
let linePath = ([]); |
|
||||||
let circleCenter = ''; |
|
||||||
// let positions = ([]);
|
|
||||||
// let po = '';
|
|
||||||
|
|
||||||
const r = 1000; |
|
||||||
// const [polylines, setPolylines] = useState([]);
|
|
||||||
// const [circleLayers, setCircleLayers] = useState();
|
|
||||||
let polylines = ([]); |
|
||||||
// let circleLayers = ('');
|
|
||||||
let circleLayers = ([]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
init(); |
|
||||||
}, []); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
remove(); |
|
||||||
console.log(drawType) |
|
||||||
// init();
|
|
||||||
}, [drawType]); |
|
||||||
|
|
||||||
const event = () => { |
|
||||||
let addClick = naver.maps.Event.addListener(map, 'click', function(e) { |
|
||||||
if(drawType) { |
|
||||||
linePath.push(e.coord); |
|
||||||
circleCenter = e.coord |
|
||||||
clickDraw(); |
|
||||||
} else { |
|
||||||
|
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
let escDown = naver.maps.Event.addListener(map, 'keydown', function(e) { |
|
||||||
const keyboardEvent = e.keyboardEvent, |
|
||||||
keyCode = keyboardEvent.keyCode || keyboardEvent.which; |
|
||||||
|
|
||||||
const ESC = 27; |
|
||||||
|
|
||||||
if(keyCode === ESC) { |
|
||||||
keyboardEvent.preventDefault(); |
|
||||||
remove(); |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
const init = () => { |
|
||||||
remove(); |
|
||||||
event(); |
|
||||||
} |
|
||||||
|
|
||||||
const clickDraw = () => { |
|
||||||
// if(!drawType) {
|
|
||||||
// alert("path option을 선택해주세요.")
|
|
||||||
// } else {
|
|
||||||
// if(drawType === 'LINE') {
|
|
||||||
// console.log("LINE")
|
|
||||||
// createPolyline();
|
|
||||||
// } else if(drawType === 'CIRCLE') {
|
|
||||||
// console.log("CIRCLE")
|
|
||||||
// createCircle();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
if(drawType === 'LINE') { |
|
||||||
console.log('1') |
|
||||||
createPolyline(); |
|
||||||
} else if(drawType === 'CIRCLE') { |
|
||||||
createCircle(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const createPolyline = () => { |
|
||||||
if(linePath.length >= 2) { |
|
||||||
const polyline = new naver.maps.Polyline({ |
|
||||||
// path: [positions[positions.length-1], po],
|
|
||||||
path: linePath, |
|
||||||
strokeColor: '#ff0000', |
|
||||||
strokeWeight: 2, |
|
||||||
strokeOpacity: 0.5, |
|
||||||
map: map |
|
||||||
}); |
|
||||||
linePath.shift(); |
|
||||||
// setPolylines(prev => ([...prev, polyline]));
|
|
||||||
polylines.push(polyline); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// const createCircle = (positions) => {
|
|
||||||
const createCircle = () => { |
|
||||||
if(circleLayers) remove(); |
|
||||||
// const circleCenter = positions[0];
|
|
||||||
// console.log(circleCenter)
|
|
||||||
// console.log(po)
|
|
||||||
// const te = positions[0];
|
|
||||||
const circle = new naver.maps.Circle({ |
|
||||||
center: circleCenter, |
|
||||||
// center: positions[0],
|
|
||||||
strokeColor: '#ff0000', |
|
||||||
strokeWeight: 2, |
|
||||||
strokeOpacity: 1, |
|
||||||
fillColor: '#0000ff', |
|
||||||
fillOpacity: 0.35, |
|
||||||
radius: r, |
|
||||||
clickable: false, |
|
||||||
map: map |
|
||||||
}) |
|
||||||
// circleCenter.shift();
|
|
||||||
// setCircleLayers(circle);
|
|
||||||
// circleLayers = circle;
|
|
||||||
circleLayers.push(circle); |
|
||||||
} |
|
||||||
|
|
||||||
// const reCircle = () => {
|
|
||||||
// // circle.setMap(null);
|
|
||||||
// // positions = ([]);
|
|
||||||
// // circleLayers.forEach(cir => cir.setMap(null));
|
|
||||||
// circleLayers.setMap(null);
|
|
||||||
// // setCircleLayers();
|
|
||||||
// circleLayers = '';
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
const remove = () => { |
|
||||||
// debugger;
|
|
||||||
if(polylines) { |
|
||||||
polylines.forEach(poly => poly.setMap(null)); |
|
||||||
polylines = ([]); |
|
||||||
// console.log("poly remove")
|
|
||||||
} |
|
||||||
if(circleLayers) { |
|
||||||
circleLayers.forEach(cir => cir.setMap(null)); |
|
||||||
circleLayers = ([]); |
|
||||||
// console.log("circle remove")
|
|
||||||
} |
|
||||||
// circleLayers.forEach(cir => cir.setMap(null));
|
|
||||||
// circleLayers = ([]);
|
|
||||||
circleCenter = ''; |
|
||||||
linePath = ([]); |
|
||||||
// console.log("remove!!")
|
|
||||||
// setClickable(0);
|
|
||||||
} |
|
||||||
|
|
||||||
return null; |
|
||||||
}; |
|
||||||
|
|
||||||
@ -1,180 +0,0 @@ |
|||||||
import { useEffect, useState } from "react"; |
|
||||||
import { useSelector } from "react-redux"; |
|
||||||
|
|
||||||
|
|
||||||
export const DrawTest2 = props => { |
|
||||||
const {naver} = props; |
|
||||||
const {map} = props; |
|
||||||
let draw = ''; |
|
||||||
const {drawType} = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
const r = 1000; |
|
||||||
let positions = ([]); |
|
||||||
const [polyGroup, setPolyGroup] = useState([]); |
|
||||||
const [eventGroup, setEventGrouop] = useState([]); |
|
||||||
const [circleGroup, setCircleGroup] = useState([]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
remove2(); |
|
||||||
clickEvent(); |
|
||||||
}, [drawType]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
remove(); |
|
||||||
}, [polyGroup, eventGroup]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
// moveCircle();
|
|
||||||
remove(); |
|
||||||
}, [circleGroup]); |
|
||||||
|
|
||||||
|
|
||||||
const moveCircle = () => { |
|
||||||
if(circleGroup) { |
|
||||||
circleGroup.forEach(prev => prev.setMap(null)); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const movePoly = () => { |
|
||||||
if(polyGroup) { |
|
||||||
polyGroup.forEach(prev => prev.setMap(null)); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const clickEvent = () => { |
|
||||||
console.log("d") |
|
||||||
// remove2();
|
|
||||||
// drawType =
|
|
||||||
if(drawType === 'CIRCLE') { |
|
||||||
console.log("circle") |
|
||||||
} else if(drawType === 'LINE') { |
|
||||||
console.log("LINE") |
|
||||||
}else if(drawType === 'POLYGON') { |
|
||||||
console.log("POLYGON") |
|
||||||
} |
|
||||||
|
|
||||||
addPositions(); |
|
||||||
} |
|
||||||
|
|
||||||
const remove2 = () => { |
|
||||||
polyGroup.forEach(poly => poly.setMap(null)); |
|
||||||
setPolyGroup([]); |
|
||||||
circleGroup.forEach(cir => cir.setMap(null)); |
|
||||||
setCircleGroup([]); |
|
||||||
eventGroup.forEach(eve => naver.maps.Event.removeListener(eve)); |
|
||||||
setEventGrouop([]); |
|
||||||
positions = []; |
|
||||||
} |
|
||||||
|
|
||||||
const addPositions = () => { |
|
||||||
if(event) naver.maps.Event.removeListener(event); |
|
||||||
var event = naver.maps.Event.addListener(map, 'click', function(e) { |
|
||||||
debugger; |
|
||||||
if(drawType === 'LINE') { |
|
||||||
positions.push(e.coord); |
|
||||||
createPolyline(positions); |
|
||||||
} else if(drawType === 'CIRCLE') { |
|
||||||
positions = e.coord; |
|
||||||
createCircle(positions); |
|
||||||
} |
|
||||||
}) |
|
||||||
// setEventGrouop(prev => ([...prev, event]));
|
|
||||||
} |
|
||||||
|
|
||||||
const createCircle = (positions) => { |
|
||||||
moveCircle(); |
|
||||||
const circle = new naver.maps.Circle({ |
|
||||||
center: positions, |
|
||||||
strokeColor: '#ff0000', |
|
||||||
strokeWeight: 2, |
|
||||||
strokeOpacity: 1, |
|
||||||
fillColor: '#0000ff', |
|
||||||
fillOpacity: 0.35, |
|
||||||
radius: r, |
|
||||||
clickable: false, |
|
||||||
map: map |
|
||||||
}) |
|
||||||
draw = drawType; |
|
||||||
setCircleGroup(prev => ([...prev, circle])); |
|
||||||
} |
|
||||||
|
|
||||||
const createPolyline = (positions) => { |
|
||||||
if(positions.length >= 2) { |
|
||||||
movePoly(); |
|
||||||
const polyline = new naver.maps.Polyline({ |
|
||||||
// path: [positions[(positions.length)-1], positions[(positions.length)-2]],
|
|
||||||
path: positions, |
|
||||||
strokeColor: '#ff0000', |
|
||||||
strokeWeight: 2, |
|
||||||
strokeOpacity: 1, |
|
||||||
map: map |
|
||||||
}) |
|
||||||
positions.shift(); |
|
||||||
console.log(positions) |
|
||||||
draw = drawType; |
|
||||||
setPolyGroup(prev => ([...prev, polyline])); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
const remove = () => { |
|
||||||
if(drawType!=draw) { |
|
||||||
naver.maps.Event.addListener(map, 'keydown', function(e) { |
|
||||||
const keyboardEvent = e.keyboardEvent, |
|
||||||
keyCode = keyboardEvent.keyCode || keyboardEvent.which; |
|
||||||
|
|
||||||
const ESC = 27; |
|
||||||
|
|
||||||
if(keyCode === ESC) { |
|
||||||
keyboardEvent.preventDefault(); |
|
||||||
polyGroup.forEach(poly => poly.setMap(null)); |
|
||||||
setPolyGroup([]); |
|
||||||
circleGroup.forEach(cir => cir.setMap(null)); |
|
||||||
setCircleGroup([]); |
|
||||||
// eventGroup.forEach(eve => naver.maps.Event.removeListener(eve));
|
|
||||||
// setEventGrouop([]);
|
|
||||||
positions = []; |
|
||||||
// debugger;
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// const drawTypeChange = () => {
|
|
||||||
// remove();
|
|
||||||
// draw = drawType;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const init = () => {
|
|
||||||
// // draw = drawType;
|
|
||||||
// if(draw) {
|
|
||||||
// var event = naver.maps.Event.addListener(map, 'click', function(e) {
|
|
||||||
// draw = drawType;
|
|
||||||
// console.log(drawType, "drawType")
|
|
||||||
// // remove(draw, event);
|
|
||||||
// drawTypeChange();
|
|
||||||
// // naver.maps.Event.removeListener(event);
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// // remove(event);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const remove = (draw, event) => {
|
|
||||||
// if(draw == drawType) {
|
|
||||||
// console.log("안지워")
|
|
||||||
// } else {
|
|
||||||
// console.log("지워")
|
|
||||||
// naver.maps.Event.removeListener(event);
|
|
||||||
// }
|
|
||||||
// if(positions) naver.maps.Event.removeListener(map, 'click', function(e) {
|
|
||||||
// console.log(e);
|
|
||||||
// });
|
|
||||||
// naver.maps.removeListener(event);
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return null; |
|
||||||
} |
|
||||||
Loading…
Reference in new issue