From d4acf378c090f51d3bd4cadd45a69c61d277eaf4 Mon Sep 17 00:00:00 2001 From: junh_eee Date: Thu, 30 Jun 2022 10:22:08 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8F=84=ED=98=95=EA=B7=B8=EB=A6=AC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/assets/css/custom.css | 5 + src/components/mapDraw/naver/NaverMap.js | 28 +- .../mapDraw/naver/draw/CircleTest.js | 145 +++++++ .../mapDraw/naver/draw/DrawDistance.js | 186 +++++++++ src/components/mapDraw/naver/draw/DrawMap.js | 65 ++- src/components/mapDraw/naver/draw/DrawPath.js | 72 +--- .../mapDraw/naver/draw/DrawPolygon.js | 75 ++++ src/components/mapDraw/naver/draw/DrawTest.js | 128 ++++++ .../mapDraw/naver/draw/JQueryTest.js | 378 ++++++++++++++++++ src/views/testDraw/main/ControlMainDraw.js | 48 ++- src/views/testDraw/main/test.js | 0 12 files changed, 1050 insertions(+), 82 deletions(-) create mode 100644 src/components/mapDraw/naver/draw/CircleTest.js create mode 100644 src/components/mapDraw/naver/draw/DrawDistance.js create mode 100644 src/components/mapDraw/naver/draw/DrawPolygon.js create mode 100644 src/components/mapDraw/naver/draw/DrawTest.js create mode 100644 src/components/mapDraw/naver/draw/JQueryTest.js create mode 100644 src/views/testDraw/main/test.js diff --git a/package.json b/package.json index b292c85..de9181f 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "html-to-draftjs": "1.5.0", "http-proxy-middleware": "^2.0.1", "intl-messageformat": "7.8.4", - "jquery": "3.5.1", + "jquery": "^3.5.1", "js-cookie": "^3.0.0", "jsonwebtoken": "8.5.1", "jwt-decode": "^3.1.2", diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index c6f1fbc..2f031fa 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -245,6 +245,11 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon /* fligth path draw */ .left-menu-nav li .check{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;} +.left-menu-nav.test{position: relative; z-index: 1; cursor: pointer; float: left; display: block; margin: 0px; padding: 0px; width: 28px; height: 28px; list-style: none; box-sizing: content-box !important; background: rgb(255, 255, 255);} +.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;} */ /*메인-알림*/ .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 6b32d00..92e9f8c 100644 --- a/src/components/mapDraw/naver/NaverMap.js +++ b/src/components/mapDraw/naver/NaverMap.js @@ -9,10 +9,17 @@ 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 geoJson from '../geojson/airArea.json'; import SensorZone from "./sensor/SensorZone"; +import $ from 'jquery'; + export const NaverCustomMap = () => { const naver = window.naver; // let map; @@ -57,13 +64,30 @@ 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 new file mode 100644 index 0000000..63a0fca --- /dev/null +++ b/src/components/mapDraw/naver/draw/CircleTest.js @@ -0,0 +1,145 @@ +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 new file mode 100644 index 0000000..3eacda0 --- /dev/null +++ b/src/components/mapDraw/naver/draw/DrawDistance.js @@ -0,0 +1,186 @@ +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/DrawMap.js b/src/components/mapDraw/naver/draw/DrawMap.js index 6b0ea4f..3e6b12e 100644 --- a/src/components/mapDraw/naver/draw/DrawMap.js +++ b/src/components/mapDraw/naver/draw/DrawMap.js @@ -1,38 +1,57 @@ import { useEffect, useState } from "react"; -import { render } from "react-dom"; -import { BiCaretLeftCircle } from "react-icons/bi"; import { useSelector } from "react-redux"; export const DrawMap = props => { const {naver} = props; const {map} = props; - const [check, setCheck] = useState([]); + const [drawing, setDrawing] = useState(); + const [overlay, setOverlay] = useState([]); const {drawCheck} = useSelector(state => state.controlMapReducer); + useEffect(() => { + removeOverlay(); + }, [overlay]); useEffect(() => { init(); }, [drawCheck]); + + const removeOverlay = () => { + if(overlay.length >= 2) { + drawing.removeDrawing(overlay[0]); + setOverlay(prev => ([prev[overlay.length-1]])); + } + } + const init = () => { - removeDraw(); + initRemove(); + removeDrawManager(); } - const removeDraw = () => { - check.forEach(prev => prev.setMap(null)); - drawSetting(); + const initRemove = () => { + if(overlay) { + overlay.forEach(prev => drawing.removeDrawing(prev)); + setOverlay([]); + } } + const removeDrawManager = () => { + if(drawing) { + drawing.setMap(null); + } + drawSetting(); + } const drawSetting = () => { if(drawCheck) { + // debugger; let drawingManager = new naver.maps.drawing.DrawingManager({ drawingControl: [ naver.maps.drawing.DrawingMode.POLYLINE, naver.maps.drawing.DrawingMode.POLYGON, - naver.maps.drawing.DrawingMode.ELLIPSE, - naver.maps.drawing.DrawingMode.RECTANGLE + naver.maps.drawing.DrawingMode.ELLIPSE ], drawingControlOptions: { position: naver.maps.Position.LEFT_CENTER, @@ -52,21 +71,15 @@ export const DrawMap = props => { strokeWeight: 2, } }, - rectangleOptions: { - fillColor: '#ff0000', - fillOpacity: 0.3, - strokeWeight: 2, - strokeColor: '#ff0000' - }, ellipseOptions: { fillColor: '#ff25dc', fillOpacity: 0.3, strokeWeight: 2, strokeColor: '#ff25dc' }, - polylineOptions: { // 화살표 아이콘 계열 옵션은 무시됩니다. + polylineOptions: { strokeColor: '#222', - strokeWeight: 2 + strokeWeight: 10 }, polygonOptions: { fillColor: '#ffc300', @@ -75,12 +88,28 @@ export const DrawMap = props => { strokeColor:'#ffc300' } }); + + // console.log(drawingManager.) + + addEvent(drawingManager); drawingManager.setMap(map); - setCheck(prev => ([...prev, drawingManager])); + setDrawing(drawingManager); } } + const addEvent = (drawingManager) => { + drawingManager.addListener('drawing_added', function(overlay) { + console.log(overlay) + if(overlay.OVERLAY_TYPE === 'Polygon') { + console.log(overlay.paths._array[0]._array) + } else if(overlay.OVERLAY_TYPE === 'Ellipse') { + console.log(overlay.bounds) + } + setOverlay(prev=> ([...prev, overlay])); + }); + } + return null; }; diff --git a/src/components/mapDraw/naver/draw/DrawPath.js b/src/components/mapDraw/naver/draw/DrawPath.js index f8326ed..5cd123f 100644 --- a/src/components/mapDraw/naver/draw/DrawPath.js +++ b/src/components/mapDraw/naver/draw/DrawPath.js @@ -7,17 +7,13 @@ export const DrawPath = props => { const {map} = props; const {drawType} = useSelector(state => state.controlMapReducer); - let linePath = ([]); + let linePaths = ([]); let circleCenter = ''; const [eventGroup, setEventGroup] = useState([]); const [polylines, setPolylines] = useState([]); const [circleLayers, setCircleLayers] = useState([]); - useEffect(() => { - // drawSetting(); - }, []); - useEffect(() => { init(); }, [drawType]); @@ -34,29 +30,8 @@ export const DrawPath = props => { removeLayers(); } - const drawSetting = () => { - const drawingManager = new naver.maps.drawing.DrawingManager({ - drawingControl: [ - naver.maps.drawing.DrawingMode.POLYLINE, - naver.maps.drawing.DrawingMode.POLYGON, - naver.maps.drawing.DrawingMode.ELLIPSE, - naver.maps.drawing.DrawingMode.RECTANGLE - ], - drawingControlOptions: { - position: naver.maps.Position.LEFT_CENTER, - style: naver.maps.drawing.DrawingStyle.VERTICAL - } - }); - drawingManager.setMap(map); - } - const removeEvent = () => { eventGroup.forEach(prev => naver.maps.Event.removeListener(prev)); - // eventGroup.forEach(prev => console.log(prev)); - // const test = eventGroup.find(prev=> prev='drawingManager'); - // if(test) { - // test.setMap(null); - // } setEventGroup([]); addEvent(); } @@ -64,40 +39,30 @@ export const DrawPath = props => { const removeLayers = () => { if(polylines) { polylines.forEach(prev => prev.setMap(null)); - setPolylines([]); }; if(circleLayers) { circleLayers.forEach(prev => prev.setMap(null)); setCircleLayers([]); }; - linePath = []; - // circleCenter = ''; + linePaths = []; } + const addEvent = () => { let addClick = naver.maps.Event.addListener(map, 'click', function(e) { - // debugger; + if(drawType) { - linePath.push(e.coord); - circleCenter = e.coord; + if(drawType === 'CIRCLE') { + circleCenter = e.coord; + }else if(drawType === 'LINE') { + linePaths.push(e.coord); + } startDraw(); } else { - // console.log('1'); + } }); - // 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(); - // // removeLayers(); - // } - // }); - - setEventGroup(prev => ([...prev, addClick])); } @@ -110,15 +75,15 @@ export const DrawPath = props => { } const createPolyline = () => { - if(linePath.length >= 2) { + if(linePaths.length >= 2) { const polyline = new naver.maps.Polyline({ - path: linePath, + path: linePaths, strokeColor: '#ff0000', strokeWeight: 2, strokeOpacity: 0.5, map: map }); - linePath.shift(); + linePaths.shift(); setPolylines(prev => ([...prev, polyline])); } } @@ -127,15 +92,15 @@ export const DrawPath = props => { const circle = new naver.maps.Circle({ center: circleCenter, strokeColor: '#283046', - strokeWeight: 1, + strokeWeight: 2, strokeOpacity: 0.8, fillColor: '#0000ff', fillOpacity: 0.2, - radius: 150, + radius: 150, //단위 미터 clickable: false, map: map - }); - // circleCenter = ''; + }); + console.log(circle) setCircleLayers(prev => ([...prev, circle])); } @@ -144,9 +109,6 @@ export const DrawPath = props => { circleLayers[0].setMap(null); setCircleLayers(prev => ([prev[circleLayers.length-1]])); } - // else { - // console.log(circleLayers); - // } } return null; diff --git a/src/components/mapDraw/naver/draw/DrawPolygon.js b/src/components/mapDraw/naver/draw/DrawPolygon.js new file mode 100644 index 0000000..9a83ad6 --- /dev/null +++ b/src/components/mapDraw/naver/draw/DrawPolygon.js @@ -0,0 +1,75 @@ +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 new file mode 100644 index 0000000..f5c5072 --- /dev/null +++ b/src/components/mapDraw/naver/draw/DrawTest.js @@ -0,0 +1,128 @@ +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/JQueryTest.js b/src/components/mapDraw/naver/draw/JQueryTest.js new file mode 100644 index 0000000..492c8de --- /dev/null +++ b/src/components/mapDraw/naver/draw/JQueryTest.js @@ -0,0 +1,378 @@ +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 55410ac..ba86481 100644 --- a/src/views/testDraw/main/ControlMainDraw.js +++ b/src/views/testDraw/main/ControlMainDraw.js @@ -1,12 +1,8 @@ import React, { useEffect, useState } from 'react'; - import '../../../assets/css/custom.css'; import logo from '../../../assets/images/pal_logo.png'; - import { Sun, Map, Bell, Check } from 'react-feather'; - import { AiOutlinePoweroff } from 'react-icons/ai'; - import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg'; import ControlAlarmNotice from '../alarm/ControlAlarmNotice'; @@ -101,7 +97,7 @@ const ControlMainDraw = () => { {/* pathDraw Test */} -
    + {/*
    • { value={mapControl.drawType === '' ? 'check' : 'X'} />
      • -
    +
*/}
  • @@ -139,6 +135,46 @@ const ControlMainDraw = () => {
+
    +
  • + handlerDrawType('LINE')} + /> + handlerDrawType('POLYGON')} + /> + handlerDrawType('CIRCLE')} + /> + handlerDrawType('')} + value={mapControl.drawType === '' ? 'STOP' : 'IN USE'} + /> +
    • +
+ + {/*
    +
  • + +
    • +
*/} +