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