From 92b1f886bf36cb3588458ee22b28386ef7b1333e Mon Sep 17 00:00:00 2001 From: junh_eee Date: Mon, 4 Jul 2022 16:12:31 +0900 Subject: [PATCH] . --- src/assets/css/custom.css | 6 + .../mapDraw/naver/draw/JQueryDraw.js | 118 ++++++++++++++---- src/views/testDraw/main/ControlMainDraw.js | 4 +- 3 files changed, 104 insertions(+), 24 deletions(-) diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 8c9a4f1c..0f44874d 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -251,6 +251,12 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon .measure-control{position:absolute; z-index:100;} +.control-btn{margin-left: 7px; border-bottom: solid 1px #283046; margin-bottom:5px;} +.buffer-input{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 70px; margin-left: 5px;} +.buffer-btn{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 30px; margin-left: 5px;} + + + /*메인-알림*/ .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;} .notice-icon{padding:10px 0;} diff --git a/src/components/mapDraw/naver/draw/JQueryDraw.js b/src/components/mapDraw/naver/draw/JQueryDraw.js index 2274731b..243cd1c4 100644 --- a/src/components/mapDraw/naver/draw/JQueryDraw.js +++ b/src/components/mapDraw/naver/draw/JQueryDraw.js @@ -1,13 +1,17 @@ import $ from 'jquery'; +import { useEffect } from 'react'; +import { useSelector } from 'react-redux'; import '../../../../assets/css/custom.css'; +import { CustomInput } from 'reactstrap'; export const JQueryDraw = props => { const {naver} = props; const {map} = props; - var Measure = function(buttons) { - console.log('Measure 구현 중') + const { drawType } = useSelector(state => state.controlMapReducer); + + var Measure = function(buttons) { this.$btnLine = buttons.line; this.$btnPolygon = buttons.polygon; this.$btnCircle = buttons.circle; @@ -18,8 +22,7 @@ export const JQueryDraw = props => { }; $.extend( - Measure.prototype, - console.log('extend'),{ + Measure.prototype,{ constructor: Measure, setMap: function(map) { @@ -72,7 +75,8 @@ export const JQueryDraw = props => { console.log('startCircle') var map = this.map; this._circleListeners = [ - naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)) + naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)) ]; }, @@ -88,8 +92,28 @@ export const JQueryDraw = props => { delete this._guideline; } - if (this._polyline) delete this._polyline; + if (this._polyline) { + console.log(this._polyline.getPath()) + + this._bufferPolygon = new naver.maps.Polygon({ + + }) + + // this._polygon = new naver.maps.Polygon({ + // strokeColor: '#00f', + // strokeOpacity: 0.6, + // strokeWeight: 2, + // fillColor: '#00f', + // fillOpacity: 0.3, + // paths: [coord], + // map: map + // }); + + // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯 + // this._polyline.setMap(null) + delete this._polyline; + } //onfocus()의 반대기능 = blur() this.$btnLine.removeClass('control-on').blur(); @@ -118,8 +142,6 @@ export const JQueryDraw = props => { _finishCircle: function() { console.log('finishCircle') - console.log(this._radius.getDistance(), 'r'); - naver.maps.Event.removeListener(this._circleListeners); delete this._circleListeners; @@ -161,6 +183,8 @@ export const JQueryDraw = props => { var map = this.map, coord = e.coord; + console.log(coord, '클릭좌표1'); + if (!this._polyline) { // 임시로 보여줄 점선 폴리라인을 생성합니다. this._guideline = new naver.maps.Polyline({ @@ -180,12 +204,22 @@ export const JQueryDraw = props => { strokeLineCap: 'round', strokeLineJoin: 'round', strokeColor: '#db4040', - strokeWeight: 8, + strokeWeight: 5, strokeOpacity: 1, path: [coord], map: map }); + this._test = new naver.maps.Polyline({ + // path: [[126.6047916, 37.5237865], [126.6047719, 37.5237832]], + path: [[126.6048449, 37.5237486], [126.6047340, 37.5237299]], + map: map, + strokeweight: 5, + strokeOpacity: 1, + strokeColor: '#db4040' + }) + console.log(this._test.getDistance()); + } else { this._guideline.setPath([e.coord]); this._polyline.getPath().push(coord); @@ -199,6 +233,7 @@ export const JQueryDraw = props => { coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), path = this._guideline.getPath(); + // console.log(coord, '실시간 좌표') if (path.getLength() === 2) { //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까 path.pop(); @@ -217,9 +252,9 @@ export const JQueryDraw = props => { this._polygon = new naver.maps.Polygon({ strokeColor: '#00f', strokeOpacity: 0.6, - strokeWeight: 5, - fillColor: '#00f', - fillOpacity: 0.3, + strokeWeight: 2, + fillColor: '#0000ff', + fillOpacity: 0.1, paths: [coord], map: map }); @@ -253,8 +288,8 @@ export const JQueryDraw = props => { //가이드 라인 this._radius = new naver.maps.Polyline({ - strokeColor: '#db4040', - strokeWeight: 2, + // strokeColor: '#db4040', + // strokeWeight: 2, strokeStyle: [4, 4], strokeOpacity: 0.6, path: [coord], @@ -264,8 +299,8 @@ export const JQueryDraw = props => { // 임시로 보여줄 원형 this._guidecircle = new naver.maps.Circle({ - strokeColor: '#283046', - strokeWeight: 2, + // strokeColor: '#283046', + // strokeWeight: 2, strokeOpacity: 0.8, strokeStyle: [4, 4], fillColor: '#0000ff', @@ -280,8 +315,8 @@ export const JQueryDraw = props => { // 실제 사용되는 원형 this._circle = new naver.maps.Circle({ - strokeColor: '#283046', - strokeWeight: 2, + // strokeColor: '#283046', + // strokeWeight: 2, strokeOpacity: 0.8, fillColor: '#0000ff', fillOpacity: 0.1, @@ -302,6 +337,8 @@ export const JQueryDraw = props => { var distance = this._radius.getDistance(); this._lastDistance = distance; this._circle.setRadius(this._lastDistance); + + } }, @@ -334,7 +371,6 @@ export const JQueryDraw = props => { _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')); @@ -351,8 +387,10 @@ export const JQueryDraw = props => { //this._mode는 클릭하기 전 값(첫 클릭이면 null) if (btn.hasClass('control-on')) { + console.log('remove') btn.removeClass('control-on'); } else { + console.log('add') btn.addClass('control-on'); } @@ -393,6 +431,11 @@ export const JQueryDraw = props => { } this._finishCircle(); + } else if(mode === 'CIRCLE') { + if(this._circle) { + this._circle.setMap(null); + delete this._circle; + } } } }); @@ -408,13 +451,44 @@ export const JQueryDraw = props => { return( <> +
+
) diff --git a/src/views/testDraw/main/ControlMainDraw.js b/src/views/testDraw/main/ControlMainDraw.js index 12ee4a51..87d149a9 100644 --- a/src/views/testDraw/main/ControlMainDraw.js +++ b/src/views/testDraw/main/ControlMainDraw.js @@ -111,7 +111,7 @@ const ControlMainDraw = () => { {/* 제이쿼리로 그리기(기능 연결 중) */} - */}