pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

사각형 draw 추가

pull/2/head
junh_eee 2 years ago
parent
ba73fc03ba
commit
83c6d357d5
4 changed files with 130 additions and 110 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 3
      src/components/mapDraw/naver/draw/DrawMap.js
  3. 182
      src/components/mapDraw/naver/draw/JQueryDraw.js
  4. 49
      src/views/testDraw/setting/ControlSetting.js

2
package.json
Unescape View File

@ -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",

3
src/components/mapDraw/naver/draw/DrawMap.js
Unescape View File

@ -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,

182
src/components/mapDraw/naver/draw/JQueryDraw.js
Unescape View File

@ -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,9 +520,6 @@ export const JQueryDraw = props => {
<div style={{ position: 'relative' }}>
<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> */}
<CustomInput
id='line'
type='image'
@ -475,17 +538,18 @@ export const JQueryDraw = props => {
className='control-btn'
src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png'
/>
<CustomInput
id='rectangle'
type='image'
className='control-btn'
src='http://static.naver.net/maps/mantle/drawing/1x/rectangle.png'
/>
<br/>
<CustomInput
id='input'
type='input'
className='buffer-input'
/>
{/* <CustomInput
id='input-btn'
type='button'
className='buffer-btn'
/> */}
</li>
</ul>
</div>

49
src/views/testDraw/setting/ControlSetting.js
Unescape View File

@ -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 (
<div className=''>
{/* <div className='layer-content'>
<div className='layer-ti'>
<h4>flight path option</h4>
</div>
<div className='map-btn'>
<ButtonGroup>
<Button
color={mapControl.drawType === 'CIRCLE' ? 'primary' : ''}
onClick={e => handlerDrawType('CIRCLE')}
>
circle
</Button>
<Button
color={mapControl.drawType === 'LINE' ? 'primary' : ''}
onClick={e => handlerDrawType('LINE')}
>
line
</Button>
<Button
color={mapControl.drawType === 'POLYGON' ? 'primary' : ''}
onClick={e => handlerDrawType('POLYGON')}
>
polygon
</Button>
</ButtonGroup>
</div>
</div> */}
<div className='layer-content'>
<div className='layer-ti'>

Write Preview
Loading…
Cancel
Save