From af2866486fb046595b9c157d5518da347bf52a4b Mon Sep 17 00:00:00 2001 From: junh_eee Date: Fri, 1 Jul 2022 14:46:50 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A0=9C=EC=9D=B4=EC=BF=BC=EB=A6=AC=20?= =?UTF-8?q?=ED=99=9C=EC=9A=A9=20draw?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/custom.css | 2 +- src/components/mapDraw/naver/NaverMap.js | 46 +- .../mapDraw/naver/draw/CircleTest.js | 145 ------ .../mapDraw/naver/draw/DrawDistance.js | 186 -------- src/components/mapDraw/naver/draw/DrawPath.js | 116 ----- .../mapDraw/naver/draw/DrawPolygon.js | 75 ---- src/components/mapDraw/naver/draw/DrawTest.js | 128 ------ .../mapDraw/naver/draw/JQueryDraw.js | 422 ++++++++++++++++++ .../mapDraw/naver/draw/JQueryTest.js | 378 ---------------- src/views/testDraw/main/ControlMainDraw.js | 37 +- src/views/testDraw/main/test.js | 0 11 files changed, 435 insertions(+), 1100 deletions(-) delete mode 100644 src/components/mapDraw/naver/draw/CircleTest.js delete mode 100644 src/components/mapDraw/naver/draw/DrawDistance.js delete mode 100644 src/components/mapDraw/naver/draw/DrawPath.js delete mode 100644 src/components/mapDraw/naver/draw/DrawPolygon.js delete mode 100644 src/components/mapDraw/naver/draw/DrawTest.js create mode 100644 src/components/mapDraw/naver/draw/JQueryDraw.js delete mode 100644 src/components/mapDraw/naver/draw/JQueryTest.js delete mode 100644 src/views/testDraw/main/test.js diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 2f031fa..8c9a4f1 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -249,7 +249,7 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon .left-menu-nav .test .btn-stop{margin-left:25px; width: 28px; height: 28px; display: block; border: 0px solid transparent; box-sizing: content-box !important;} .left-menu-nav .test .btn-use{margin-left:20px; width: 35px; height: 35px; display: block; border: 0px solid transparent; box-sizing: content-box !important; background-color: #009cad;} -/* .target2{position:absoulte; top:0; left:0; padding:5px; z-index:100;} */ +.measure-control{position:absolute; z-index:100;} /*메인-알림*/ .notice{width:650px;height:45px;overflow:hidden;position:absolute;left:50%;top:20px;transform: translate(-50%,0px);background:#283046;display:flex;font-size:0.9375rem;color:#f4f4f4;padding:0px 20px;border-radius:30px;} diff --git a/src/components/mapDraw/naver/NaverMap.js b/src/components/mapDraw/naver/NaverMap.js index 92e9f8c..0562a90 100644 --- a/src/components/mapDraw/naver/NaverMap.js +++ b/src/components/mapDraw/naver/NaverMap.js @@ -1,19 +1,9 @@ import React, { useEffect, useState } from 'react'; -import { useSelector } from 'react-redux'; -import dronicon from '../../../assets/control/icon/drone.png'; -import { DronMarker } from './dron/DronMarker'; -import { DronHistory } from './dron/DronHistory'; import NaverMapControl from './NaverMapControl'; -import { NaverMapSearch } from './search/NaverMapSearch'; import { FeatureAirZone } from './feature/FeatureAirZone'; -import { DrawPath } from './draw/DrawPath'; import { DrawMap } from './draw/DrawMap'; -import { DrawTest } from './draw/DrawTest'; -import { CircleTest } from './draw/CircleTest'; -import { DrawDistance } from './draw/DrawDistance'; -import { JQueryTest } from './draw/JQueryTest'; -import { DrawPolygon } from './draw/DrawPolygon'; +import { JQueryDraw } from './draw/JQueryDraw'; import geoJson from '../geojson/airArea.json'; import SensorZone from "./sensor/SensorZone"; @@ -33,14 +23,8 @@ export const NaverCustomMap = () => { useEffect(() => { NaverMapInit(); - // console.log(map); - // console.log(features); - // setIsMapLoad(true); }, []); - // useEffect(() => { - // console.log('==============11111==================', mapObject); - // }, [mapObject]); const removeArrMarkers = arrData => { arrMarkers = arrData; @@ -53,7 +37,7 @@ export const NaverCustomMap = () => { zoomControl: true, // mapTypeId: naver.maps.MapTypeId.HYBRID, zoomControlOptions: { - position: naver.maps.Position.TOP_LEFT, + position: naver.maps.Position.LEFT_CENTER, style: naver.maps.ZoomControlStyle.SMALL } @@ -63,36 +47,24 @@ export const NaverCustomMap = () => { }; return ( - <> - 제이쿼리 테스트 - -
- +
+
+ {/* 제이쿼리로 그리기 */} +
{mapObject != null ? ( <> - {/* 첨에 만든 원형까지 되는 거 - - 그리기 도구 모음 불러오는 거 - */} - {/* 업그레이드 된 그리기(circle 안됨) - */} - {/* 카카오API참고한 직선거리 이용한 원그리기(원 안됨) - */} - {/* 네이버 거리재기 + 면적재기 - */} - {/* 네이버 면적재기(다각형) - */} - + {/* 그리기 도구 모음 불러오는 거 */} + ) : null} {/* */} - +
); }; diff --git a/src/components/mapDraw/naver/draw/CircleTest.js b/src/components/mapDraw/naver/draw/CircleTest.js deleted file mode 100644 index 63a0fca..0000000 --- a/src/components/mapDraw/naver/draw/CircleTest.js +++ /dev/null @@ -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; -}; - diff --git a/src/components/mapDraw/naver/draw/DrawDistance.js b/src/components/mapDraw/naver/draw/DrawDistance.js deleted file mode 100644 index 3eacda0..0000000 --- a/src/components/mapDraw/naver/draw/DrawDistance.js +++ /dev/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; -}; - diff --git a/src/components/mapDraw/naver/draw/DrawPath.js b/src/components/mapDraw/naver/draw/DrawPath.js deleted file mode 100644 index 5cd123f..0000000 --- a/src/components/mapDraw/naver/draw/DrawPath.js +++ /dev/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; -}; - diff --git a/src/components/mapDraw/naver/draw/DrawPolygon.js b/src/components/mapDraw/naver/draw/DrawPolygon.js deleted file mode 100644 index 9a83ad6..0000000 --- a/src/components/mapDraw/naver/draw/DrawPolygon.js +++ /dev/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; -}; - diff --git a/src/components/mapDraw/naver/draw/DrawTest.js b/src/components/mapDraw/naver/draw/DrawTest.js deleted file mode 100644 index f5c5072..0000000 --- a/src/components/mapDraw/naver/draw/DrawTest.js +++ /dev/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; -}; - diff --git a/src/components/mapDraw/naver/draw/JQueryDraw.js b/src/components/mapDraw/naver/draw/JQueryDraw.js new file mode 100644 index 0000000..2274731 --- /dev/null +++ b/src/components/mapDraw/naver/draw/JQueryDraw.js @@ -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( + <> +
    +
  • + + + +
    • +
+ + ) + +}; + diff --git a/src/components/mapDraw/naver/draw/JQueryTest.js b/src/components/mapDraw/naver/draw/JQueryTest.js deleted file mode 100644 index 492c8de..0000000 --- a/src/components/mapDraw/naver/draw/JQueryTest.js +++ /dev/null @@ -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)) + 'km2'; - } else { - text = parseFloat(squarMeters.toFixed(1)) + 'm2'; - } - - return text; - }, - - _addMileStone: function(coord, text, css) { - if (!this._ms) this._ms = []; - - var ms = new naver.maps.Marker({ - position: coord, - icon: { - content: '
'+ text +'
', - 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 -
    -
  • - -
    • -
  • - -
    • -
- {/*
{test}
*/} - - ) - -}; - diff --git a/src/views/testDraw/main/ControlMainDraw.js b/src/views/testDraw/main/ControlMainDraw.js index ba86481..12ee4a5 100644 --- a/src/views/testDraw/main/ControlMainDraw.js +++ b/src/views/testDraw/main/ControlMainDraw.js @@ -95,34 +95,9 @@ const ControlMainDraw = () => { - - {/* pathDraw Test */} - {/*
    -
  • - handlerDrawType('CIRCLE')} - value={mapControl.drawType === 'CIRCLE' ? 'check' : 'CIRCLE'} - /> - handlerDrawType('LINE')} - value={mapControl.drawType === 'LINE' ? 'check' : 'LINE'} - />
    - handlerDrawType('')} - value={mapControl.drawType === '' ? 'check' : 'X'} - /> -
    • -
*/} + + {/* 네이버 그리기 도구모음 */}
  • {
+ {/* 제이쿼리로 그리기(기능 연결 중) */}
  • {
- {/*
    -
  • - -
    • -
*/} -