From 83c6d357d56f0fc668e9d10831180b8401ef6968 Mon Sep 17 00:00:00 2001 From: junh_eee Date: Mon, 11 Jul 2022 17:41:30 +0900 Subject: [PATCH] =?UTF-8?q?=EC=82=AC=EA=B0=81=ED=98=95=20draw=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/components/mapDraw/naver/draw/DrawMap.js | 3 +- .../mapDraw/naver/draw/JQueryDraw.js | 186 ++++++++++++------ src/views/testDraw/setting/ControlSetting.js | 49 +---- 4 files changed, 130 insertions(+), 110 deletions(-) diff --git a/package.json b/package.json index de9181fb..26f61992 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "jquery": "^3.5.1", "js-cookie": "^3.0.0", "jsonwebtoken": "8.5.1", + "jsts": "^2.9.0", "jwt-decode": "^3.1.2", "leaflet": "1.6.0", "moment": "2.29.1", @@ -57,6 +58,7 @@ "nouislider-react": "3.3.8", "postcss-rtl": "1.5.0", "prismjs": "1.19.0", + "proj4": "^2.8.0", "prop-types": "15.7.2", "react": "17.0.1", "react-apexcharts": "1.3.6", diff --git a/src/components/mapDraw/naver/draw/DrawMap.js b/src/components/mapDraw/naver/draw/DrawMap.js index 3e6b12ee..bac6fbe7 100644 --- a/src/components/mapDraw/naver/draw/DrawMap.js +++ b/src/components/mapDraw/naver/draw/DrawMap.js @@ -51,7 +51,8 @@ export const DrawMap = props => { drawingControl: [ naver.maps.drawing.DrawingMode.POLYLINE, naver.maps.drawing.DrawingMode.POLYGON, - naver.maps.drawing.DrawingMode.ELLIPSE + naver.maps.drawing.DrawingMode.ELLIPSE, + naver.maps.drawing.DrawingMode.RECTANGLE ], drawingControlOptions: { position: naver.maps.Position.LEFT_CENTER, diff --git a/src/components/mapDraw/naver/draw/JQueryDraw.js b/src/components/mapDraw/naver/draw/JQueryDraw.js index 243cd1c4..ffeaef90 100644 --- a/src/components/mapDraw/naver/draw/JQueryDraw.js +++ b/src/components/mapDraw/naver/draw/JQueryDraw.js @@ -1,6 +1,4 @@ import $ from 'jquery'; -import { useEffect } from 'react'; -import { useSelector } from 'react-redux'; import '../../../../assets/css/custom.css'; import { CustomInput } from 'reactstrap'; @@ -8,13 +6,12 @@ export const JQueryDraw = props => { const {naver} = props; const {map} = props; - const { drawType } = useSelector(state => state.controlMapReducer); - var Measure = function(buttons) { this.$btnLine = buttons.line; this.$btnPolygon = buttons.polygon; this.$btnCircle = buttons.circle; + this.$btnRectangle = buttons.rectangle; this._mode = null; @@ -48,6 +45,8 @@ export const JQueryDraw = props => { this._startArea(); } if (mode === 'circle') { this._startCircle(); + } if (mode === 'rectangle') { + this._startRectangle(); } }, @@ -80,8 +79,18 @@ export const JQueryDraw = props => { ]; }, + _startRectangle: function() { + console.log('startRectangle') + var map = this.map; + this._rectangleListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)) + ] + }, + _finishDistance: function() { console.log('finishDistance') + naver.maps.Event.removeListener(this._distanceListeners); delete this._distanceListeners; @@ -94,25 +103,13 @@ export const JQueryDraw = props => { 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; + + //버퍼 테스트 + delete this._buffercircle; + delete this._buffercoord; } //onfocus()의 반대기능 = blur() this.$btnLine.removeClass('control-on').blur(); @@ -165,6 +162,24 @@ export const JQueryDraw = props => { this._mode = null; }, + _finishRectangle: function() { + console.log('finishRectangle') + + naver.maps.Event.removeListener(this._rectangleListeners); + delete this._rectangleListeners; + + $(document).off('mousemove.measure'); + + if(this._rectangle) { + this._guiderectangle.setMap(null); + delete this._guiderectangle; + } + + this.$btnRectangle.removeClass('control-on').blur(); + + this._mode = null; + }, + finishMode: function(mode) { console.log('finishMode') if (!mode) return; @@ -175,6 +190,8 @@ export const JQueryDraw = props => { this._finishArea(); } if (mode === 'circle') { this._finishCircle(); + } if (mode === 'rectangle') { + this._finishRectangle(); } }, @@ -188,14 +205,16 @@ export const JQueryDraw = props => { if (!this._polyline) { // 임시로 보여줄 점선 폴리라인을 생성합니다. this._guideline = new naver.maps.Polyline({ - strokeColor: '#db4040', - strokeWeight: 5, + strokeColor: '#0000ff', + strokeWeight: 3, strokeStyle: [4, 4], - strokeOpacity: 0.4, + strokeOpacity: 0.2, path: [coord], map: map }); + // this._lastDistance = this._guideline.getDistance(); + $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this))); @@ -203,23 +222,13 @@ export const JQueryDraw = props => { this._polyline = new naver.maps.Polyline({ strokeLineCap: 'round', strokeLineJoin: 'round', - strokeColor: '#db4040', - strokeWeight: 5, - strokeOpacity: 1, + strokeColor: '#0000ff', + strokeWeight: 3, + strokeOpacity: 0.6, 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); @@ -233,7 +242,6 @@ 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(); @@ -250,9 +258,7 @@ export const JQueryDraw = props => { if (!this._polygon) { this._polygon = new naver.maps.Polygon({ - strokeColor: '#00f', - strokeOpacity: 0.6, - strokeWeight: 2, + strokeOpacity: 0.8, fillColor: '#0000ff', fillOpacity: 0.1, paths: [coord], @@ -288,8 +294,6 @@ export const JQueryDraw = props => { //가이드 라인 this._radius = new naver.maps.Polyline({ - // strokeColor: '#db4040', - // strokeWeight: 2, strokeStyle: [4, 4], strokeOpacity: 0.6, path: [coord], @@ -299,8 +303,6 @@ export const JQueryDraw = props => { // 임시로 보여줄 원형 this._guidecircle = new naver.maps.Circle({ - // strokeColor: '#283046', - // strokeWeight: 2, strokeOpacity: 0.8, strokeStyle: [4, 4], fillColor: '#0000ff', @@ -315,8 +317,6 @@ export const JQueryDraw = props => { // 실제 사용되는 원형 this._circle = new naver.maps.Circle({ - // strokeColor: '#283046', - // strokeWeight: 2, strokeOpacity: 0.8, fillColor: '#0000ff', fillOpacity: 0.1, @@ -360,6 +360,63 @@ export const JQueryDraw = props => { this._guidecircle.setRadius(r); }, + _onClickRectangle: function(e) { + console.log('onClickRectangle') + var map = this.map, + coord = e.coord; + + this.max_x = 0; + this.max_y = 0; + + + if(!this._rectangle) { + //min = 고정값 + this.fixed = coord; + this.min = [this.fixed.x, this.fixed.y]; + this.max = [this.max_x, this.max_y]; + this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]]; + + // 임시로 보여줄 사각형 + this._guiderectangle = new naver.maps.Rectangle({ + strokeStyle: [4, 4], + strokeOpacity: 0.6, + bounds: this.boundscoord, + map: map + }); + + $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this)); + this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))); + + //실제 사용되는 사각형 + this._rectangle = new naver.maps.Rectangle({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + bounds: this.boundscoord, + map: map + }); + + } else { + this.max = [coord.x, coord.y]; + this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]]; + this._rectangle.setBounds(this.boundscoord); + } + }, + + _onMouseMoveRectangle: function(e) { + console.log('onMouseMoveRectangle') + if(!this._rectangle) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + bounds = this._guiderectangle.getBounds(), + max = [coord.x, coord.y]; + + this.boundscoord = [this.min[0], this.min[1],max[0], max[1]]; + this._guiderectangle.setBounds(this.boundscoord); + }, + _bindMap: function(map) { console.log('bindMap') }, @@ -374,6 +431,8 @@ export const JQueryDraw = props => { 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')); + this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle')); + }, _onClickButton: function(newMode, e) { @@ -414,6 +473,12 @@ export const JQueryDraw = props => { if (this._polyline) { this._polyline.setMap(null); delete this._polyline; + + this._buffercircle.setMap(null); + delete this._buffercircle; + + this._buffercoord.setMap(null) + delete this._buffercoord; } this._finishDistance(); @@ -431,10 +496,10 @@ export const JQueryDraw = props => { } this._finishCircle(); - } else if(mode === 'CIRCLE') { - if(this._circle) { - this._circle.setMap(null); - delete this._circle; + } else if (mode === 'rectangle') { + if(this._rectangle) { + this._rectangle.setMap(null); + delete this._rectangle; } } } @@ -444,7 +509,8 @@ export const JQueryDraw = props => { var measures = new Measure({ line: $('#line'), polygon: $('#polygon'), - circle: $('#circle') + circle: $('#circle'), + rectangle: $('#rectangle') }); measures.setMap(map); @@ -454,38 +520,36 @@ export const JQueryDraw = props => {
diff --git a/src/views/testDraw/setting/ControlSetting.js b/src/views/testDraw/setting/ControlSetting.js index 23b4518e..19722bcf 100644 --- a/src/views/testDraw/setting/ControlSetting.js +++ b/src/views/testDraw/setting/ControlSetting.js @@ -6,15 +6,11 @@ import { VscRadioTower } from 'react-icons/vsc'; import { useDispatch, useSelector } from 'react-redux'; import { Button, - InputGroup, ButtonGroup, - InputGroupAddon, - Input, CustomInput } from 'reactstrap'; import { - areaClickAction, environmentClickAction, - mapTypeChangeAction, sensorClickAction, drawTypeChangeAction + areaClickAction, mapTypeChangeAction } from '../../../modules/control/map/actions/controlMapActions'; const ControlSetting = props => { @@ -22,10 +18,6 @@ const ControlSetting = props => { const mapControl = useSelector(state => state.controlMapReducer); - // console.log('111111111111111'); - // useEffect(() => { - // console.log('111111111111111'); - // }, []); useEffect(() => { console.log('>>>>', mapControl); }, [mapControl]); @@ -38,49 +30,10 @@ const ControlSetting = props => { dispatch(areaClickAction(val)); }; - // const handlerDrawType = val => { - // dispatch(drawTypeChangeAction(val)); - // }; - - const handlerSensorClick = (val, isChecked) => { - if(isChecked){ - dispatch(sensorClickAction(val)); - } else { - dispatch(sensorClickAction('')); - } - }; - return (
- {/*
-
-

flight path option

-
-
- - - - - -
-
*/}