junh_eee
2 years ago
11 changed files with 435 additions and 1100 deletions
@ -1,145 +0,0 @@ |
|||||||
import { useEffect, useState } from "react"; |
|
||||||
import { useSelector } from "react-redux"; |
|
||||||
import { |
|
||||||
drawTypeChangeAction |
|
||||||
} from '../../../../modules/control/map/actions/controlMapActions'; |
|
||||||
|
|
||||||
export const CircleTest = props => { |
|
||||||
const {naver} = props; |
|
||||||
const {map} = props; |
|
||||||
const {drawType} = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
let drawingFlag = false; |
|
||||||
let centerPosition; |
|
||||||
let drawingCircle; |
|
||||||
let drawingLine; |
|
||||||
|
|
||||||
naver.maps.Event.addListener(map, 'click', function(e) { |
|
||||||
if(!drawingFlag) { |
|
||||||
drawingFlag = true;
|
|
||||||
|
|
||||||
// 원이 그려질 중심좌표를 클릭한 위치로 설정합니다
|
|
||||||
centerPosition = e.coord; |
|
||||||
console.log(centerPosition) |
|
||||||
|
|
||||||
// 그려지고 있는 원의 반경을 표시할 선 객체를 생성합니다
|
|
||||||
if (!drawingLine) { |
|
||||||
drawingLine = new naver.maps.Polyline({ |
|
||||||
strokeWeight: 3, // 선의 두께입니다
|
|
||||||
strokeColor: '#00a0e9', // 선의 색깔입니다
|
|
||||||
strokeOpacity: 1 // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
||||||
// strokeStyle: 'solid' // 선의 스타일입니다
|
|
||||||
});
|
|
||||||
} |
|
||||||
|
|
||||||
// 그려지고 있는 원을 표시할 원 객체를 생성합니다
|
|
||||||
if (!drawingCircle) {
|
|
||||||
drawingCircle = new naver.maps.Circle({ |
|
||||||
strokeColor: '#283046', |
|
||||||
strokeWeight: 2, |
|
||||||
strokeOpacity: 0.8, |
|
||||||
fillColor: '#0000ff', |
|
||||||
fillOpacity: 0.2, |
|
||||||
});
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
// 지도에 마우스무브 이벤트를 등록합니다
|
|
||||||
// 원을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 원의 위치와 반경정보를 동적으로 보여주도록 합니다
|
|
||||||
naver.maps.Event.addListener(map, 'mousemove', function(e) {
|
|
||||||
// 마우스무브 이벤트가 발생했을 때 원을 그리고있는 상태이면
|
|
||||||
if (drawingFlag) { |
|
||||||
// 마우스 커서의 현재 위치를 얻어옵니다
|
|
||||||
var mousePosition = e.coord; |
|
||||||
// 그려지고 있는 선을 표시할 좌표 배열입니다. 클릭한 중심좌표와 마우스커서의 위치로 설정합니다
|
|
||||||
var linePath = [centerPosition, mousePosition]; |
|
||||||
// 그려지고 있는 선을 표시할 선 객체에 좌표 배열을 설정합니다
|
|
||||||
drawingLine.setPath([centerPosition, mousePosition]); |
|
||||||
|
|
||||||
// 원의 반지름을 선 객체를 이용해서 얻어옵니다
|
|
||||||
var length = drawingLine.getDistance(); |
|
||||||
if(length > 0) { |
|
||||||
|
|
||||||
// 그려지고 있는 원의 중심좌표와 반지름입니다
|
|
||||||
var circleOptions = {
|
|
||||||
center : centerPosition,
|
|
||||||
radius: length,
|
|
||||||
}; |
|
||||||
|
|
||||||
// 그려지고 있는 원의 옵션을 설정합니다
|
|
||||||
drawingCircle.setOptions(circleOptions);
|
|
||||||
|
|
||||||
|
|
||||||
// 그려지고 있는 원을 지도에 표시합니다
|
|
||||||
drawingCircle.setMap(map);
|
|
||||||
|
|
||||||
// 그려지고 있는 선을 지도에 표시합니다
|
|
||||||
drawingLine.setMap(map);
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
drawingCircle.setMap(null); |
|
||||||
drawingLine.setMap(null);
|
|
||||||
|
|
||||||
} |
|
||||||
}
|
|
||||||
}); |
|
||||||
|
|
||||||
// 지도에 마우스 오른쪽 클릭이벤트를 등록합니다
|
|
||||||
// 원을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면
|
|
||||||
// 마우스 오른쪽 클릭한 위치를 기준으로 원과 원의 반경정보를 표시하는 선과 커스텀 오버레이를 표시하고 그리기를 종료합니다
|
|
||||||
naver.maps.Event.addListener(map, 'rightclick', function(e) {
|
|
||||||
|
|
||||||
if (drawingFlag) { |
|
||||||
|
|
||||||
// 마우스로 오른쪽 클릭한 위치입니다
|
|
||||||
var rClickPosition = e.coord; |
|
||||||
|
|
||||||
// 원의 반경을 표시할 선 객체를 생성합니다
|
|
||||||
var polyline = new naver.maps.Polyline({ |
|
||||||
path: [centerPosition, rClickPosition], // 선을 구성하는 좌표 배열입니다. 원의 중심좌표와 클릭한 위치로 설정합니다
|
|
||||||
strokeWeight: 3, // 선의 두께 입니다
|
|
||||||
strokeColor: '#00a0e9', // 선의 색깔입니다
|
|
||||||
strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
||||||
strokeStyle: 'solid' // 선의 스타일입니다
|
|
||||||
}); |
|
||||||
|
|
||||||
// 원 객체를 생성합니다
|
|
||||||
let r = polyline.getDistance(); |
|
||||||
var circle = new naver.maps.Circle({
|
|
||||||
center : centerPosition, // 원의 중심좌표입니다
|
|
||||||
radius: r, // 원의 반지름입니다 m 단위 이며 선 객체를 이용해서 얻어옵니다
|
|
||||||
strokeWeight: 1, // 선의 두께입니다
|
|
||||||
strokeColor: '#00a0e9', // 선의 색깔입니다
|
|
||||||
strokeOpacity: 0.1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
|
|
||||||
strokeStyle: 'solid', // 선의 스타일입니다
|
|
||||||
fillColor: '#00a0e9', // 채우기 색깔입니다
|
|
||||||
fillOpacity: 0.5 // 채우기 불투명도입니다
|
|
||||||
}); |
|
||||||
|
|
||||||
// 원을 지도에 표시합니다
|
|
||||||
circle.setMap(map);
|
|
||||||
|
|
||||||
// 선을 지도에 표시합니다
|
|
||||||
polyline.setMap(map);
|
|
||||||
|
|
||||||
// 그리기 상태를 그리고 있지 않는 상태로 바꿉니다
|
|
||||||
drawingFlag = false; |
|
||||||
|
|
||||||
// 중심 좌표를 초기화 합니다
|
|
||||||
centerPosition = null; |
|
||||||
|
|
||||||
// 그려지고 있는 원, 선, 커스텀오버레이를 지도에서 제거합니다
|
|
||||||
drawingCircle.setMap(null); |
|
||||||
drawingLine.setMap(null);
|
|
||||||
} |
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return null; |
|
||||||
}; |
|
||||||
|
|
@ -1,186 +0,0 @@ |
|||||||
import { useEffect, useState } from "react"; |
|
||||||
import { useSelector } from "react-redux"; |
|
||||||
import { |
|
||||||
drawTypeChangeAction |
|
||||||
} from '../../../../modules/control/map/actions/controlMapActions'; |
|
||||||
|
|
||||||
export const DrawDistance = props => { |
|
||||||
const {naver} = props; |
|
||||||
const {map} = props; |
|
||||||
const {drawType} = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
let guideline; |
|
||||||
let polyline; |
|
||||||
let distanceListener; |
|
||||||
let lastDistance; |
|
||||||
let polygon; |
|
||||||
let areaListener; |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
init(); |
|
||||||
}, [drawType]) |
|
||||||
|
|
||||||
const init = () => { |
|
||||||
if(drawType) { |
|
||||||
if(drawType === 'LINE') { |
|
||||||
startDistance(); |
|
||||||
} else if(drawType === 'POLYGON') { |
|
||||||
startArea(); |
|
||||||
} |
|
||||||
} else { |
|
||||||
finishDistance(); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const startDistance = () => { |
|
||||||
var map1 = map; |
|
||||||
|
|
||||||
distanceListener = [ |
|
||||||
naver.maps.Event.addListener(map, 'click', function(e) { onClickDistance(e); }) |
|
||||||
]; |
|
||||||
} |
|
||||||
|
|
||||||
const startArea = () => { |
|
||||||
var map1 = map; |
|
||||||
|
|
||||||
areaListener = [ |
|
||||||
naver.maps.Event.addListener(map, 'click', function(e) { onClickArea(e); }), |
|
||||||
naver.maps.Event.addListener(map, 'rightclick', function(e) { finishArea(e); }) |
|
||||||
]; |
|
||||||
|
|
||||||
naver.maps.Event.addListener(map, 'mousemove.measure', function(e) { onMouseMoveArea(e); }) |
|
||||||
}; |
|
||||||
|
|
||||||
const onClickDistance = (e) => { |
|
||||||
var map2 = map, |
|
||||||
coord = e.coord; |
|
||||||
|
|
||||||
if(!polyline) { |
|
||||||
guideline = new naver.maps.Polyline({ |
|
||||||
strokeColor: '#f00', |
|
||||||
strokeWeight: 5, |
|
||||||
strokeStyle: [4, 4], |
|
||||||
strokeOpacity: 0.6, |
|
||||||
path: [coord], |
|
||||||
map: map2 |
|
||||||
}); |
|
||||||
|
|
||||||
// naver.maps.addListener(map, 'mousemove', onMouseMoveDistance(e));
|
|
||||||
naver.maps.Event.addListener(map, 'mousemove', function(e) { |
|
||||||
onMouseMoveDistance(e); |
|
||||||
}); |
|
||||||
distanceListener.push(naver.maps.Event.addListener(map, 'rightclick', function(e) { |
|
||||||
finishDistance(e); |
|
||||||
}));
|
|
||||||
|
|
||||||
polyline = new naver.maps.Polyline({ |
|
||||||
strokeColor: '#f00', |
|
||||||
strokeWeight: 5, |
|
||||||
strokeOpacity: 0.8, |
|
||||||
path: [coord], |
|
||||||
map: map2 |
|
||||||
}); |
|
||||||
|
|
||||||
lastDistance = polyline.getDistance(); |
|
||||||
} else { |
|
||||||
guideline.setPath([e.coord]); |
|
||||||
polyline.getPath().push(coord); |
|
||||||
|
|
||||||
var distance = polyline.getDistance(); |
|
||||||
//addMileStone(coord, fromMetersToText(distance - lastDistance));
|
|
||||||
lastDistance = distance; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const onClickArea = (e) => { |
|
||||||
var map2 = map, |
|
||||||
coord = e.coord; |
|
||||||
|
|
||||||
if(!polygon) { |
|
||||||
polygon = new naver.maps.Polygon({ |
|
||||||
strokeColor: '#f00', |
|
||||||
strokeOpacity: 0.6, |
|
||||||
strokeWeight: 5, |
|
||||||
fillColor: '#00f', |
|
||||||
fillOpacity: 0.3, |
|
||||||
paths: [coord], |
|
||||||
map: map2 |
|
||||||
});
|
|
||||||
} else { |
|
||||||
polygon.getPath().push(coord); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const onMouseMoveDistance = (e) => { |
|
||||||
var map3 = map, |
|
||||||
proj = map.getProjection(), |
|
||||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
|
||||||
path = guideline.getPath(); |
|
||||||
|
|
||||||
if(path.getLength() === 2) { |
|
||||||
path.pop(); |
|
||||||
} |
|
||||||
|
|
||||||
path.push(coord); |
|
||||||
} |
|
||||||
|
|
||||||
const onMouseMoveArea = (e) => { |
|
||||||
if(!polygon) return; |
|
||||||
|
|
||||||
var map3 = map, |
|
||||||
proj = map.getProjection(), |
|
||||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
|
||||||
path = polygon.getPath(); |
|
||||||
|
|
||||||
if(path.getLength() >= 2) { |
|
||||||
path.pop(); |
|
||||||
} |
|
||||||
|
|
||||||
path.push(coord); |
|
||||||
} |
|
||||||
|
|
||||||
const finishDistance = (e) => { |
|
||||||
console.log('1') |
|
||||||
naver.maps.Event.removeListener(distanceListener); |
|
||||||
//delete distanceListener
|
|
||||||
|
|
||||||
if(guideline) { |
|
||||||
guideline.setMap(null); |
|
||||||
// delete this.guideline;
|
|
||||||
} |
|
||||||
|
|
||||||
if(polyline) { |
|
||||||
var path = polyline.getPath(), |
|
||||||
lastCoord = path.getAt(path.getLength()-1), |
|
||||||
distance = polyline.getDistance(); |
|
||||||
|
|
||||||
//delete polyline?
|
|
||||||
|
|
||||||
if(lastCoord) { |
|
||||||
// console.log("lastcoord 있음")
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//delete lastDistance;
|
|
||||||
// mode = null;
|
|
||||||
} |
|
||||||
|
|
||||||
const finishArea = (e) => { |
|
||||||
naver.maps.Event.removeListener(areaListener); |
|
||||||
//delete areaListener
|
|
||||||
|
|
||||||
if(polygon) { |
|
||||||
var path = polygon.getPath(); |
|
||||||
path.pop(); |
|
||||||
|
|
||||||
//delete polygon;
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return null; |
|
||||||
}; |
|
||||||
|
|
@ -1,116 +0,0 @@ |
|||||||
import { useEffect, useState } from "react"; |
|
||||||
import { BiCaretLeftCircle } from "react-icons/bi"; |
|
||||||
import { useSelector } from "react-redux"; |
|
||||||
|
|
||||||
export const DrawPath = props => { |
|
||||||
const {naver} = props; |
|
||||||
const {map} = props; |
|
||||||
const {drawType} = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
let linePaths = ([]); |
|
||||||
let circleCenter = ''; |
|
||||||
|
|
||||||
const [eventGroup, setEventGroup] = useState([]); |
|
||||||
const [polylines, setPolylines] = useState([]); |
|
||||||
const [circleLayers, setCircleLayers] = useState([]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
init(); |
|
||||||
}, [drawType]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
}, [eventGroup]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
moveCircle(); |
|
||||||
}, [circleLayers]); |
|
||||||
|
|
||||||
const init = () => { |
|
||||||
removeEvent(); |
|
||||||
removeLayers(); |
|
||||||
} |
|
||||||
|
|
||||||
const removeEvent = () => { |
|
||||||
eventGroup.forEach(prev => naver.maps.Event.removeListener(prev)); |
|
||||||
setEventGroup([]); |
|
||||||
addEvent(); |
|
||||||
} |
|
||||||
|
|
||||||
const removeLayers = () => { |
|
||||||
if(polylines) { |
|
||||||
polylines.forEach(prev => prev.setMap(null)); |
|
||||||
}; |
|
||||||
if(circleLayers) { |
|
||||||
circleLayers.forEach(prev => prev.setMap(null)); |
|
||||||
setCircleLayers([]); |
|
||||||
}; |
|
||||||
linePaths = []; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
const addEvent = () => { |
|
||||||
let addClick = naver.maps.Event.addListener(map, 'click', function(e) { |
|
||||||
|
|
||||||
if(drawType) { |
|
||||||
if(drawType === 'CIRCLE') { |
|
||||||
circleCenter = e.coord; |
|
||||||
}else if(drawType === 'LINE') { |
|
||||||
linePaths.push(e.coord); |
|
||||||
} |
|
||||||
startDraw(); |
|
||||||
} else { |
|
||||||
|
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
setEventGroup(prev => ([...prev, addClick])); |
|
||||||
} |
|
||||||
|
|
||||||
const startDraw = () => { |
|
||||||
if(drawType === 'LINE') { |
|
||||||
createPolyline(); |
|
||||||
} else if(drawType === 'CIRCLE') { |
|
||||||
createCircle(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const createPolyline = () => { |
|
||||||
if(linePaths.length >= 2) { |
|
||||||
const polyline = new naver.maps.Polyline({ |
|
||||||
path: linePaths, |
|
||||||
strokeColor: '#ff0000', |
|
||||||
strokeWeight: 2, |
|
||||||
strokeOpacity: 0.5, |
|
||||||
map: map |
|
||||||
}); |
|
||||||
linePaths.shift(); |
|
||||||
setPolylines(prev => ([...prev, polyline])); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const createCircle = () => { |
|
||||||
const circle = new naver.maps.Circle({ |
|
||||||
center: circleCenter, |
|
||||||
strokeColor: '#283046', |
|
||||||
strokeWeight: 2, |
|
||||||
strokeOpacity: 0.8, |
|
||||||
fillColor: '#0000ff', |
|
||||||
fillOpacity: 0.2, |
|
||||||
radius: 150, //단위 미터
|
|
||||||
clickable: false, |
|
||||||
map: map |
|
||||||
});
|
|
||||||
console.log(circle) |
|
||||||
setCircleLayers(prev => ([...prev, circle])); |
|
||||||
} |
|
||||||
|
|
||||||
const moveCircle = () => { |
|
||||||
if(circleLayers.length >= 2) { |
|
||||||
circleLayers[0].setMap(null); |
|
||||||
setCircleLayers(prev => ([prev[circleLayers.length-1]])); |
|
||||||
}
|
|
||||||
} |
|
||||||
|
|
||||||
return null; |
|
||||||
}; |
|
||||||
|
|
@ -1,75 +0,0 @@ |
|||||||
import { useEffect, useState } from "react"; |
|
||||||
|
|
||||||
export const DrawPolygon = props => { |
|
||||||
const {naver} = props; |
|
||||||
const {map} = props; |
|
||||||
|
|
||||||
let polygon; |
|
||||||
let areaListener; |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
startArea(); |
|
||||||
}, []) |
|
||||||
|
|
||||||
const startArea = () => { |
|
||||||
var map1 = map; |
|
||||||
|
|
||||||
areaListener = [ |
|
||||||
naver.maps.Event.addListener(map, 'click', function(e) { onClickArea(e); }), |
|
||||||
naver.maps.Event.addListener(map, 'rightclick', function(e) { finishArea(e); }) |
|
||||||
]; |
|
||||||
|
|
||||||
naver.maps.Event.addListener(map, 'mousemove.measure', function(e) { onMouseMoveArea(e); }) |
|
||||||
}; |
|
||||||
|
|
||||||
const onClickArea = (e) => { |
|
||||||
var map2 = map, |
|
||||||
coord = e.coord; |
|
||||||
|
|
||||||
if(!polygon) { |
|
||||||
polygon = new naver.maps.Polygon({ |
|
||||||
strokeColor: '#f00', |
|
||||||
strokeOpacity: 0.6, |
|
||||||
strokeWeight: 5, |
|
||||||
fillColor: '#00f', |
|
||||||
fillOpacity: 0.3, |
|
||||||
paths: [coord], |
|
||||||
map: map2 |
|
||||||
});
|
|
||||||
} else { |
|
||||||
polygon.getPath().push(coord); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const finishArea = (e) => { |
|
||||||
naver.maps.Event.removeListener(areaListener); |
|
||||||
//delete areaListener
|
|
||||||
|
|
||||||
if(polygon) { |
|
||||||
var path = polygon.getPath(); |
|
||||||
path.pop(); |
|
||||||
|
|
||||||
//delete polygon;
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const onMouseMoveArea = (e) => { |
|
||||||
if(!polygon) return; |
|
||||||
|
|
||||||
var map3 = map, |
|
||||||
proj = map.getProjection(), |
|
||||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
|
||||||
path = polygon.getPath(); |
|
||||||
|
|
||||||
if(path.getLength() >= 2) { |
|
||||||
path.pop(); |
|
||||||
} |
|
||||||
|
|
||||||
path.push(coord); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return null; |
|
||||||
}; |
|
||||||
|
|
@ -1,128 +0,0 @@ |
|||||||
import { useEffect, useState } from "react"; |
|
||||||
import { useSelector } from "react-redux"; |
|
||||||
import { |
|
||||||
drawTypeChangeAction |
|
||||||
} from '../../../../modules/control/map/actions/controlMapActions'; |
|
||||||
|
|
||||||
export const DrawTest = props => { |
|
||||||
const {naver} = props; |
|
||||||
const {map} = props; |
|
||||||
const {drawType} = useSelector(state => state.controlMapReducer); |
|
||||||
|
|
||||||
var point = ''; |
|
||||||
var path = ''; |
|
||||||
var polygon = ''; |
|
||||||
var polyline = ''; |
|
||||||
var circle = ''; |
|
||||||
|
|
||||||
const [polylineLayers, setPolylineLayers] = useState([]); |
|
||||||
const [polygonLayers, setPolygonLayers] = useState([]); |
|
||||||
const [eventGroup, setEventGroup] = useState([]); |
|
||||||
|
|
||||||
const [isRight, setIsRight] = useState(false); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
init(); |
|
||||||
}, [drawType, isRight]); |
|
||||||
|
|
||||||
|
|
||||||
const init = () => { |
|
||||||
removeLayers(); |
|
||||||
removeEvent(); |
|
||||||
drawInit(); |
|
||||||
addEvent(); |
|
||||||
} |
|
||||||
|
|
||||||
//point -> right클릭, polygonLayers -> stop
|
|
||||||
const removeLayers = () => { |
|
||||||
if(polygonLayers) { |
|
||||||
polygonLayers.forEach(prev => prev.setMap(null)); |
|
||||||
polylineLayers.forEach(prev => prev.setMap(null)); |
|
||||||
point = ''; |
|
||||||
path = ''; |
|
||||||
polygon = ''; |
|
||||||
polyline = ''; |
|
||||||
} |
|
||||||
|
|
||||||
if(point) { |
|
||||||
polygon.setMap(null); |
|
||||||
polyline.setMap(null); |
|
||||||
point = ''; |
|
||||||
path = ''; |
|
||||||
polygon = ''; |
|
||||||
polyline = ''; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
const removeEvent = () => { |
|
||||||
eventGroup.forEach(prev => naver.maps.Event.removeListener(prev)); |
|
||||||
setEventGroup([]); |
|
||||||
} |
|
||||||
|
|
||||||
const drawInit = () => { |
|
||||||
polygon = new naver.maps.Polygon({ |
|
||||||
map: map, |
|
||||||
paths: [[]], |
|
||||||
fillColor: '#ff0000', |
|
||||||
fillOpacity: 0.3, |
|
||||||
strokeColor: '#ff0000', |
|
||||||
strokeOpacity: 0.6, |
|
||||||
strokeWeight: 3, |
|
||||||
clickable: true |
|
||||||
}) |
|
||||||
|
|
||||||
polyline = new naver.maps.Polyline({ |
|
||||||
map: map, |
|
||||||
path: [], |
|
||||||
strokeColor: '#5347AA', |
|
||||||
strokeWeight: 2 |
|
||||||
});
|
|
||||||
} |
|
||||||
|
|
||||||
const addEvent = () => { |
|
||||||
let addClick = naver.maps.Event.addListener(map, 'click', function(e) { |
|
||||||
|
|
||||||
if(drawType) { |
|
||||||
point = e.coord; |
|
||||||
if(drawType === 'CIRCLE') { |
|
||||||
// path = circle.getCenter();
|
|
||||||
|
|
||||||
createCircle(); |
|
||||||
|
|
||||||
}else if(drawType === 'LINE') { |
|
||||||
path = polyline.getPath(); |
|
||||||
setPolylineLayers(prev => ([...prev, polyline])); |
|
||||||
path.push(point); |
|
||||||
}else if(drawType === 'POLYGON') { |
|
||||||
path = polygon.getPaths().getAt(0); |
|
||||||
setPolygonLayers(prev => ([...prev, polygon])); |
|
||||||
path.push(point); |
|
||||||
// console.log(polygon.paths._array[0]._array)
|
|
||||||
} |
|
||||||
|
|
||||||
} else { |
|
||||||
// console.log("df")
|
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
let rightClick = naver.maps.Event.addListener(map, 'rightclick', function(e) { |
|
||||||
if(drawType) { |
|
||||||
setIsRight(!isRight); |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
setEventGroup(prev => ([...prev, addClick, rightClick])); |
|
||||||
// setEventGroup(addClick, rightClick);
|
|
||||||
} |
|
||||||
|
|
||||||
const createCircle = () => { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return null; |
|
||||||
}; |
|
||||||
|
|
@ -0,0 +1,422 @@ |
|||||||
|
import $ from 'jquery'; |
||||||
|
import '../../../../assets/css/custom.css';
|
||||||
|
|
||||||
|
export const JQueryDraw = props => { |
||||||
|
const {naver} = props; |
||||||
|
const {map} = props; |
||||||
|
|
||||||
|
var Measure = function(buttons) { |
||||||
|
console.log('Measure 구현 중') |
||||||
|
|
||||||
|
this.$btnLine = buttons.line; |
||||||
|
this.$btnPolygon = buttons.polygon; |
||||||
|
this.$btnCircle = buttons.circle; |
||||||
|
|
||||||
|
this._mode = null; |
||||||
|
|
||||||
|
this._bindDOMEvents(); |
||||||
|
}; |
||||||
|
|
||||||
|
$.extend( |
||||||
|
Measure.prototype,
|
||||||
|
console.log('extend'),{ |
||||||
|
constructor: Measure, |
||||||
|
|
||||||
|
setMap: function(map) { |
||||||
|
console.log('setMap') |
||||||
|
if (this.map) { |
||||||
|
this._unbindMap(this.map); |
||||||
|
} |
||||||
|
|
||||||
|
this.map = map; |
||||||
|
|
||||||
|
if (map) { |
||||||
|
this._bindMap(map); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
startMode: function(mode) { |
||||||
|
console.log('startMode') |
||||||
|
if (!mode) return; |
||||||
|
|
||||||
|
if (mode === 'line') { |
||||||
|
this._startDistance(); |
||||||
|
} if (mode === 'polygon') { |
||||||
|
this._startArea(); |
||||||
|
} if (mode === 'circle') { |
||||||
|
this._startCircle(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_startDistance: function() { |
||||||
|
console.log('startDistance') |
||||||
|
var map = this.map; |
||||||
|
this._distanceListeners = [ |
||||||
|
naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this)) |
||||||
|
]; |
||||||
|
}, |
||||||
|
|
||||||
|
_startArea: function() { |
||||||
|
console.log('startArea') |
||||||
|
var map = this.map; |
||||||
|
|
||||||
|
this._areaListeners = [ |
||||||
|
naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)), |
||||||
|
naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this)) |
||||||
|
]; |
||||||
|
|
||||||
|
$(document).on('mousemove.measure', this._onMouseMoveArea.bind(this)); |
||||||
|
}, |
||||||
|
|
||||||
|
_startCircle: function() { |
||||||
|
console.log('startCircle') |
||||||
|
var map = this.map; |
||||||
|
this._circleListeners = [ |
||||||
|
naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)) |
||||||
|
]; |
||||||
|
}, |
||||||
|
|
||||||
|
_finishDistance: function() { |
||||||
|
console.log('finishDistance') |
||||||
|
naver.maps.Event.removeListener(this._distanceListeners); |
||||||
|
delete this._distanceListeners; |
||||||
|
|
||||||
|
$(document).off('mousemove.measure'); |
||||||
|
|
||||||
|
if (this._guideline) { |
||||||
|
this._guideline.setMap(null); |
||||||
|
delete this._guideline; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._polyline) delete this._polyline; |
||||||
|
|
||||||
|
//onfocus()의 반대기능 = blur()
|
||||||
|
this.$btnLine.removeClass('control-on').blur(); |
||||||
|
|
||||||
|
this._mode = null; |
||||||
|
}, |
||||||
|
|
||||||
|
_finishArea: function() { |
||||||
|
console.log('finishArea') |
||||||
|
naver.maps.Event.removeListener(this._areaListeners); |
||||||
|
delete this._areaListeners; |
||||||
|
|
||||||
|
$(document).off('mousemove.measure'); |
||||||
|
|
||||||
|
if (this._polygon) { |
||||||
|
var path = this._polygon.getPath(); |
||||||
|
path.pop(); |
||||||
|
|
||||||
|
delete this._polygon; |
||||||
|
} |
||||||
|
|
||||||
|
this.$btnPolygon.removeClass('control-on').blur(); |
||||||
|
|
||||||
|
this._mode = null; |
||||||
|
}, |
||||||
|
|
||||||
|
_finishCircle: function() { |
||||||
|
console.log('finishCircle') |
||||||
|
|
||||||
|
console.log(this._radius.getDistance(), 'r'); |
||||||
|
|
||||||
|
naver.maps.Event.removeListener(this._circleListeners); |
||||||
|
delete this._circleListeners; |
||||||
|
|
||||||
|
$(document).off('mousemove.measure'); |
||||||
|
|
||||||
|
if(this._guidecircle) { |
||||||
|
this._guidecircle.setMap(null); |
||||||
|
this._radius.setMap(null); |
||||||
|
delete this._raidus; |
||||||
|
delete this._guidecircle; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._circle) { |
||||||
|
// this._circle.setMap(null);
|
||||||
|
delete this._circle; |
||||||
|
} |
||||||
|
|
||||||
|
this.$btnCircle.removeClass('control-on').blur(); |
||||||
|
|
||||||
|
// delete this._lastDistance;
|
||||||
|
this._mode = null; |
||||||
|
}, |
||||||
|
|
||||||
|
finishMode: function(mode) { |
||||||
|
console.log('finishMode') |
||||||
|
if (!mode) return; |
||||||
|
|
||||||
|
if (mode === 'line') { |
||||||
|
this._finishDistance(); |
||||||
|
} if (mode === 'polygon') { |
||||||
|
this._finishArea(); |
||||||
|
} if (mode === 'circle') { |
||||||
|
this._finishCircle(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_onClickDistance: function(e) { |
||||||
|
console.log('onClickDistance') |
||||||
|
var map = this.map, |
||||||
|
coord = e.coord; |
||||||
|
|
||||||
|
if (!this._polyline) { |
||||||
|
// 임시로 보여줄 점선 폴리라인을 생성합니다.
|
||||||
|
this._guideline = new naver.maps.Polyline({ |
||||||
|
strokeColor: '#db4040', |
||||||
|
strokeWeight: 5, |
||||||
|
strokeStyle: [4, 4], |
||||||
|
strokeOpacity: 0.4, |
||||||
|
path: [coord], |
||||||
|
map: map |
||||||
|
}); |
||||||
|
|
||||||
|
$(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); |
||||||
|
this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this))); |
||||||
|
|
||||||
|
// 실제 거리재기에 사용되는 폴리라인을 생성합니다.
|
||||||
|
this._polyline = new naver.maps.Polyline({ |
||||||
|
strokeLineCap: 'round', |
||||||
|
strokeLineJoin: 'round', |
||||||
|
strokeColor: '#db4040', |
||||||
|
strokeWeight: 8, |
||||||
|
strokeOpacity: 1, |
||||||
|
path: [coord], |
||||||
|
map: map |
||||||
|
}); |
||||||
|
|
||||||
|
} else { |
||||||
|
this._guideline.setPath([e.coord]); |
||||||
|
this._polyline.getPath().push(coord); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_onMouseMoveDistance: function(e) { |
||||||
|
console.log('onMouseMoveDistance') |
||||||
|
var map = this.map, |
||||||
|
proj = this.map.getProjection(), |
||||||
|
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||||
|
path = this._guideline.getPath(); |
||||||
|
|
||||||
|
if (path.getLength() === 2) { |
||||||
|
//맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까
|
||||||
|
path.pop(); |
||||||
|
} |
||||||
|
|
||||||
|
// [기존 클릭 좌표, 실시간 좌표]
|
||||||
|
path.push(coord); |
||||||
|
}, |
||||||
|
|
||||||
|
_onClickArea: function(e) { |
||||||
|
console.log('onClickArea') |
||||||
|
var map = this.map, |
||||||
|
coord = e.coord; |
||||||
|
|
||||||
|
if (!this._polygon) { |
||||||
|
this._polygon = new naver.maps.Polygon({ |
||||||
|
strokeColor: '#00f', |
||||||
|
strokeOpacity: 0.6, |
||||||
|
strokeWeight: 5, |
||||||
|
fillColor: '#00f', |
||||||
|
fillOpacity: 0.3, |
||||||
|
paths: [coord], |
||||||
|
map: map |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this._polygon.getPath().push(coord); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_onMouseMoveArea: function(e) { |
||||||
|
console.log('onMouseMoveArea') |
||||||
|
if (!this._polygon) return; |
||||||
|
|
||||||
|
var map = this.map, |
||||||
|
proj = this.map.getProjection(), |
||||||
|
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||||
|
path = this._polygon.getPath(); |
||||||
|
|
||||||
|
if (path.getLength() >= 2) { |
||||||
|
path.pop(); |
||||||
|
} |
||||||
|
|
||||||
|
path.push(coord); |
||||||
|
}, |
||||||
|
|
||||||
|
_onClickCircle: function(e) { |
||||||
|
console.log('onClickCircle') |
||||||
|
var map = this.map, |
||||||
|
coord = e.coord; |
||||||
|
|
||||||
|
if(!this._circle) { |
||||||
|
|
||||||
|
//가이드 라인
|
||||||
|
this._radius = new naver.maps.Polyline({ |
||||||
|
strokeColor: '#db4040', |
||||||
|
strokeWeight: 2, |
||||||
|
strokeStyle: [4, 4], |
||||||
|
strokeOpacity: 0.6, |
||||||
|
path: [coord], |
||||||
|
map: map |
||||||
|
}); |
||||||
|
this._lastDistance = this._radius.getDistance(); |
||||||
|
|
||||||
|
// 임시로 보여줄 원형
|
||||||
|
this._guidecircle = new naver.maps.Circle({ |
||||||
|
strokeColor: '#283046', |
||||||
|
strokeWeight: 2, |
||||||
|
strokeOpacity: 0.8, |
||||||
|
strokeStyle: [4, 4], |
||||||
|
fillColor: '#0000ff', |
||||||
|
fillOpacity: 0.1, |
||||||
|
center: coord, |
||||||
|
radius: this._lastDistance, |
||||||
|
map: map |
||||||
|
}); |
||||||
|
|
||||||
|
$(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this)); |
||||||
|
this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))); |
||||||
|
|
||||||
|
// 실제 사용되는 원형
|
||||||
|
this._circle = new naver.maps.Circle({ |
||||||
|
strokeColor: '#283046', |
||||||
|
strokeWeight: 2, |
||||||
|
strokeOpacity: 0.8, |
||||||
|
fillColor: '#0000ff', |
||||||
|
fillOpacity: 0.1, |
||||||
|
center: coord, |
||||||
|
radius: this._lastDistance, |
||||||
|
map: map |
||||||
|
}); |
||||||
|
|
||||||
|
} else { |
||||||
|
// this._guidecircle.setCenter(e.coord);
|
||||||
|
// this._circle.setCenter(coord);
|
||||||
|
// if(this._radius.getPath().length() === 2) {
|
||||||
|
// this._radius.getPath().pop();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// this._radius.getPath().push(coord);
|
||||||
|
|
||||||
|
var distance = this._radius.getDistance(); |
||||||
|
this._lastDistance = distance; |
||||||
|
this._circle.setRadius(this._lastDistance); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_onMouseMoveCircle: function(e) { |
||||||
|
console.log('onMouseMoveCircle') |
||||||
|
if(!this._circle) return; |
||||||
|
|
||||||
|
var map = this.map, |
||||||
|
proj = this.map.getProjection(), |
||||||
|
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||||
|
path = this._radius.getPath(), |
||||||
|
center = this._guidecircle.getCenter(), //LatLng으로 나옴
|
||||||
|
r = proj.getDistance(coord, center); |
||||||
|
|
||||||
|
if(path.getLength() === 2) { |
||||||
|
path.pop(); |
||||||
|
} |
||||||
|
path.push(coord); |
||||||
|
this._guidecircle.setRadius(r); |
||||||
|
}, |
||||||
|
|
||||||
|
_bindMap: function(map) { |
||||||
|
console.log('bindMap') |
||||||
|
}, |
||||||
|
|
||||||
|
_unbindMap: function() { |
||||||
|
console.log('unbindMap') |
||||||
|
this.unbindAll(); |
||||||
|
}, |
||||||
|
|
||||||
|
_bindDOMEvents: function() { |
||||||
|
console.log('bindDOMEvents') |
||||||
|
console.log(this, 'this') |
||||||
|
this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line')); |
||||||
|
this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon')); |
||||||
|
this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle')); |
||||||
|
}, |
||||||
|
|
||||||
|
_onClickButton: function(newMode, e) { |
||||||
|
//newMode는 방금 클릭한 값(line, polygon, circle...)
|
||||||
|
console.log('onClickButton') |
||||||
|
e.preventDefault(); |
||||||
|
|
||||||
|
var btn = $(e.target), |
||||||
|
map = this.map, |
||||||
|
mode = this._mode; |
||||||
|
//this._mode는 클릭하기 전 값(첫 클릭이면 null)
|
||||||
|
|
||||||
|
if (btn.hasClass('control-on')) { |
||||||
|
btn.removeClass('control-on'); |
||||||
|
} else { |
||||||
|
btn.addClass('control-on'); |
||||||
|
} |
||||||
|
|
||||||
|
this._clearMode(mode); |
||||||
|
|
||||||
|
if (mode === newMode) { |
||||||
|
this._mode = null; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this._mode = newMode; |
||||||
|
|
||||||
|
this.startMode(newMode); |
||||||
|
}, |
||||||
|
|
||||||
|
_clearMode: function(mode) { |
||||||
|
console.log('clearMode') |
||||||
|
if (!mode) return; |
||||||
|
|
||||||
|
if (mode === 'line') { |
||||||
|
if (this._polyline) { |
||||||
|
this._polyline.setMap(null); |
||||||
|
delete this._polyline; |
||||||
|
} |
||||||
|
|
||||||
|
this._finishDistance(); |
||||||
|
} else if (mode === 'polygon') { |
||||||
|
if (this._polygon) { |
||||||
|
this._polygon.setMap(null); |
||||||
|
delete this._polygon; |
||||||
|
} |
||||||
|
|
||||||
|
this._finishArea(); |
||||||
|
} else if (mode === 'circle') { |
||||||
|
if (this._circle) { |
||||||
|
this._circle.setMap(null); |
||||||
|
delete this._circle; |
||||||
|
} |
||||||
|
|
||||||
|
this._finishCircle(); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// id랑 매치시켜서 옵션 지정함
|
||||||
|
var measures = new Measure({ |
||||||
|
line: $('#line'), |
||||||
|
polygon: $('#polygon'), |
||||||
|
circle: $('#circle') |
||||||
|
}); |
||||||
|
|
||||||
|
measures.setMap(map); |
||||||
|
|
||||||
|
return( |
||||||
|
<> |
||||||
|
<ul className="measure-control"> |
||||||
|
<li> |
||||||
|
<input type='button' value='선' id='line' className='control-btn'></input> |
||||||
|
<input type='button' value='다각형' id='polygon' className='control-btn'></input> |
||||||
|
<input type='button' value='원' id='circle' className='control-btn'></input> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
}; |
||||||
|
|
@ -1,378 +0,0 @@ |
|||||||
import { useEffect, useState } from "react"; |
|
||||||
import $ from 'jquery'; |
|
||||||
|
|
||||||
export const JQueryTest = props => { |
|
||||||
const {naver} = props; |
|
||||||
const {map} = props; |
|
||||||
|
|
||||||
|
|
||||||
var Measure = function(buttons) { |
|
||||||
this.$btnDistance = buttons.distance; |
|
||||||
this.$btnArea = buttons.area; |
|
||||||
|
|
||||||
this._mode = null; |
|
||||||
|
|
||||||
this._bindDOMEvents(); |
|
||||||
}; |
|
||||||
$.extend(Measure.prototype, { |
|
||||||
constructor: Measure, |
|
||||||
|
|
||||||
setMap: function(map) { |
|
||||||
if (this.map) { |
|
||||||
this._unbindMap(this.map); |
|
||||||
} |
|
||||||
|
|
||||||
this.map = map; |
|
||||||
|
|
||||||
if (map) { |
|
||||||
this._bindMap(map); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
startMode: function(mode) { |
|
||||||
if (!mode) return; |
|
||||||
|
|
||||||
if (mode === 'distance') { |
|
||||||
this._startDistance(); |
|
||||||
} if (mode === 'area') { |
|
||||||
this._startArea(); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
_startDistance: function() { |
|
||||||
var map = this.map; |
|
||||||
|
|
||||||
this._distanceListeners = [ |
|
||||||
naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this)) |
|
||||||
]; |
|
||||||
|
|
||||||
// map.setCursor("url('"+ HOME_PATH +"/img/rule.cur'), default");
|
|
||||||
}, |
|
||||||
|
|
||||||
_startArea: function() { |
|
||||||
var map = this.map; |
|
||||||
|
|
||||||
this._areaListeners = [ |
|
||||||
naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)), |
|
||||||
naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this)) |
|
||||||
]; |
|
||||||
|
|
||||||
$(document).on('mousemove.measure', this._onMouseMoveArea.bind(this)); |
|
||||||
|
|
||||||
// map.setCursor("url('"+ HOME_PATH +"/img/area.cur'), default");
|
|
||||||
}, |
|
||||||
|
|
||||||
_finishDistance: function() { |
|
||||||
naver.maps.Event.removeListener(this._distanceListeners); |
|
||||||
delete this._distanceListeners; |
|
||||||
|
|
||||||
$(document).off('mousemove.measure'); |
|
||||||
|
|
||||||
if (this._guideline) { |
|
||||||
this._guideline.setMap(null); |
|
||||||
delete this._guideline; |
|
||||||
} |
|
||||||
|
|
||||||
if (this._polyline) { |
|
||||||
var path = this._polyline.getPath(), |
|
||||||
lastCoord = path.getAt(path.getLength() - 1), |
|
||||||
distance = this._polyline.getDistance(); |
|
||||||
// 폴리라인의 거리를 미터 단위로 반환합니다.
|
|
||||||
|
|
||||||
delete this._polyline; |
|
||||||
|
|
||||||
if (lastCoord) { |
|
||||||
this._addMileStone(lastCoord, this._fromMetersToText(distance), { |
|
||||||
'font-size': '14px', |
|
||||||
'font-weight': 'bold', |
|
||||||
'color': '#f00' |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
this.$btnDistance.removeClass('control-on').blur(); |
|
||||||
|
|
||||||
map.setCursor('auto'); |
|
||||||
|
|
||||||
delete this._lastDistance; |
|
||||||
this._mode = null; |
|
||||||
}, |
|
||||||
|
|
||||||
_finishArea: function() { |
|
||||||
naver.maps.Event.removeListener(this._areaListeners); |
|
||||||
delete this._areaListeners; |
|
||||||
|
|
||||||
$(document).off('mousemove.measure'); |
|
||||||
|
|
||||||
if (this._polygon) { |
|
||||||
var path = this._polygon.getPath(); |
|
||||||
path.pop(); |
|
||||||
|
|
||||||
// 폴리곤의 면적을 제곱미터 단위로 반환합니다.
|
|
||||||
var squarMeters = this._polygon.getAreaSize(), |
|
||||||
lastCoord = path.getAt(path.getLength() - 1); |
|
||||||
|
|
||||||
if (lastCoord) { |
|
||||||
this._addMileStone(lastCoord, this._fromSquareMetersToText(squarMeters), { |
|
||||||
'font-size': '14px', |
|
||||||
'font-weight': 'bold', |
|
||||||
'color': '#00f' |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
delete this._polygon; |
|
||||||
} |
|
||||||
|
|
||||||
this.$btnArea.removeClass('control-on').blur(); |
|
||||||
|
|
||||||
map.setCursor('auto'); |
|
||||||
|
|
||||||
this._mode = null; |
|
||||||
}, |
|
||||||
|
|
||||||
finishMode: function(mode) { |
|
||||||
if (!mode) return; |
|
||||||
|
|
||||||
if (mode === 'distance') { |
|
||||||
this._finishDistance(); |
|
||||||
} if (mode === 'area') { |
|
||||||
this._finishArea(); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
_fromMetersToText: function(meters) { |
|
||||||
meters = meters || 0; |
|
||||||
|
|
||||||
var km = 1000, |
|
||||||
text = meters; |
|
||||||
|
|
||||||
if (meters >= km) { |
|
||||||
text = parseFloat((meters / km).toFixed(1)) +'km'; |
|
||||||
} else { |
|
||||||
text = parseFloat(meters.toFixed(1)) +'m'; |
|
||||||
} |
|
||||||
|
|
||||||
return text; |
|
||||||
}, |
|
||||||
|
|
||||||
_fromSquareMetersToText: function(squarMeters) { |
|
||||||
squarMeters = squarMeters || 0; |
|
||||||
|
|
||||||
var squarKm = 1000 * 1000, |
|
||||||
text = squarMeters; |
|
||||||
|
|
||||||
if (squarMeters >= squarKm) { |
|
||||||
text = parseFloat((squarMeters / squarKm).toFixed(1)) + 'km<sup>2</sup>'; |
|
||||||
} else { |
|
||||||
text = parseFloat(squarMeters.toFixed(1)) + 'm<sup>2</sup>'; |
|
||||||
} |
|
||||||
|
|
||||||
return text; |
|
||||||
}, |
|
||||||
|
|
||||||
_addMileStone: function(coord, text, css) { |
|
||||||
if (!this._ms) this._ms = []; |
|
||||||
|
|
||||||
var ms = new naver.maps.Marker({ |
|
||||||
position: coord, |
|
||||||
icon: { |
|
||||||
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;"><span>'+ text +'</span></div>', |
|
||||||
anchor: new naver.maps.Point(-5, -5) |
|
||||||
}, |
|
||||||
map: this.map |
|
||||||
}); |
|
||||||
|
|
||||||
var msElement = $(ms.getElement()); |
|
||||||
|
|
||||||
if (css) { |
|
||||||
msElement.css(css); |
|
||||||
} else { |
|
||||||
msElement.css('font-size', '11px'); |
|
||||||
} |
|
||||||
|
|
||||||
this._ms.push(ms); |
|
||||||
}, |
|
||||||
|
|
||||||
_onClickDistance: function(e) { |
|
||||||
var map = this.map, |
|
||||||
coord = e.coord; |
|
||||||
|
|
||||||
if (!this._polyline) { |
|
||||||
// 임시로 보여줄 점선 폴리라인을 생성합니다.
|
|
||||||
this._guideline = new naver.maps.Polyline({ |
|
||||||
strokeColor: '#f00', |
|
||||||
strokeWeight: 5, |
|
||||||
strokeStyle: [4, 4], |
|
||||||
strokeOpacity: 0.6, |
|
||||||
path: [coord], |
|
||||||
map: map |
|
||||||
}); |
|
||||||
|
|
||||||
$(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); |
|
||||||
this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this))); |
|
||||||
|
|
||||||
// 실제 거리재기에 사용되는 폴리라인을 생성합니다.
|
|
||||||
this._polyline = new naver.maps.Polyline({ |
|
||||||
strokeColor: '#f00', |
|
||||||
strokeWeight: 5, |
|
||||||
strokeOpacity: 0.8, |
|
||||||
path: [coord], |
|
||||||
map: map |
|
||||||
}); |
|
||||||
|
|
||||||
// 폴리라인의 거리를 미터 단위로 반환합니다.
|
|
||||||
this._lastDistance = this._polyline.getDistance(); |
|
||||||
} else { |
|
||||||
this._guideline.setPath([e.coord]); |
|
||||||
this._polyline.getPath().push(coord); |
|
||||||
|
|
||||||
// 폴리라인의 거리를 미터 단위로 반환합니다.
|
|
||||||
var distance = this._polyline.getDistance(); |
|
||||||
|
|
||||||
this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); |
|
||||||
|
|
||||||
this._lastDistance = distance; |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
_onMouseMoveDistance: function(e) { |
|
||||||
var map = this.map, |
|
||||||
proj = this.map.getProjection(), |
|
||||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
|
||||||
path = this._guideline.getPath(); |
|
||||||
|
|
||||||
if (path.getLength() === 2) { |
|
||||||
path.pop(); |
|
||||||
} |
|
||||||
|
|
||||||
path.push(coord); |
|
||||||
}, |
|
||||||
|
|
||||||
_onClickArea: function(e) { |
|
||||||
var map = this.map, |
|
||||||
coord = e.coord; |
|
||||||
|
|
||||||
if (!this._polygon) { |
|
||||||
this._polygon = new naver.maps.Polygon({ |
|
||||||
strokeColor: '#00f', |
|
||||||
strokeOpacity: 0.6, |
|
||||||
strokeWeight: 5, |
|
||||||
fillColor: '#00f', |
|
||||||
fillOpacity: 0.3, |
|
||||||
paths: [coord], |
|
||||||
map: map |
|
||||||
}); |
|
||||||
} else { |
|
||||||
this._polygon.getPath().push(coord); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
_onMouseMoveArea: function(e) { |
|
||||||
if (!this._polygon) return; |
|
||||||
|
|
||||||
var map = this.map, |
|
||||||
proj = this.map.getProjection(), |
|
||||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
|
||||||
path = this._polygon.getPath(); |
|
||||||
|
|
||||||
if (path.getLength() >= 2) { |
|
||||||
path.pop(); |
|
||||||
} |
|
||||||
|
|
||||||
path.push(coord); |
|
||||||
}, |
|
||||||
|
|
||||||
_bindMap: function(map) { |
|
||||||
|
|
||||||
}, |
|
||||||
|
|
||||||
_unbindMap: function() { |
|
||||||
this.unbindAll(); |
|
||||||
}, |
|
||||||
|
|
||||||
_bindDOMEvents: function() { |
|
||||||
this.$btnDistance.on('click.measure', this._onClickButton.bind(this, 'distance')); |
|
||||||
this.$btnArea.on('click.measure', this._onClickButton.bind(this, 'area')); |
|
||||||
}, |
|
||||||
|
|
||||||
_onClickButton: function(newMode, e) { |
|
||||||
e.preventDefault(); |
|
||||||
|
|
||||||
var btn = $(e.target), |
|
||||||
map = this.map, |
|
||||||
mode = this._mode; |
|
||||||
|
|
||||||
if (btn.hasClass('control-on')) { |
|
||||||
btn.removeClass('control-on'); |
|
||||||
} else { |
|
||||||
btn.addClass('control-on'); |
|
||||||
} |
|
||||||
|
|
||||||
this._clearMode(mode); |
|
||||||
|
|
||||||
if (mode === newMode) { |
|
||||||
this._mode = null; |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
this._mode = newMode; |
|
||||||
|
|
||||||
this.startMode(newMode); |
|
||||||
}, |
|
||||||
|
|
||||||
_clearMode: function(mode) { |
|
||||||
if (!mode) return; |
|
||||||
|
|
||||||
if (mode === 'distance') { |
|
||||||
if (this._polyline) { |
|
||||||
this._polyline.setMap(null); |
|
||||||
delete this._polyline; |
|
||||||
} |
|
||||||
|
|
||||||
this._finishDistance(); |
|
||||||
|
|
||||||
if (this._ms) { |
|
||||||
for (var i=0, ii=this._ms.length; i<ii; i++) { |
|
||||||
this._ms[i].setMap(null); |
|
||||||
} |
|
||||||
|
|
||||||
delete this._ms; |
|
||||||
} |
|
||||||
} else if (mode === 'area') { |
|
||||||
if (this._polygon) { |
|
||||||
this._polygon.setMap(null); |
|
||||||
delete this._polygon; |
|
||||||
} |
|
||||||
|
|
||||||
this._finishArea(); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
var measures = new Measure({ |
|
||||||
distance: $('#distance'), |
|
||||||
area: $('#area') |
|
||||||
}); |
|
||||||
|
|
||||||
measures.setMap(map); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return( |
|
||||||
<> |
|
||||||
<ul className="measure-control"> |
|
||||||
<li> |
|
||||||
<input type='button' value='거리재기' id='distance' className='control-btn'></input> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<input type='button' value='면적재기' id='area' className='control-btn'></input> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
{/* <div>{test}</div> */} |
|
||||||
</> |
|
||||||
) |
|
||||||
|
|
||||||
}; |
|
||||||
|
|
Loading…
Reference in new issue