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

.

pull/2/head
junh_eee 2 years ago
parent
af2866486f
commit
92b1f886bf
3 changed files with 104 additions and 24 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. 6
      src/assets/css/custom.css
  2. 118
      src/components/mapDraw/naver/draw/JQueryDraw.js
  3. 4
      src/views/testDraw/main/ControlMainDraw.js

6
src/assets/css/custom.css
Unescape View File

@ -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;}

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

@ -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(
<>
<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>
{/* <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'
className='control-btn'
src='http://static.naver.net/maps/mantle/drawing/1x/polyline.png'
/>
<CustomInput
id='polygon'
type='image'
className='control-btn'
src='http://static.naver.net/maps/mantle/drawing/1x/polygon.png'
/>
<CustomInput
id='circle'
type='image'
className='control-btn'
src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png'
/>
<br/>
<CustomInput
id='input'
type='input'
className='buffer-input'
/>
{/* <CustomInput
id='input-btn'
type='button'
className='buffer-btn'
/> */}
</li>
</ul>
</div>
</>
)

4
src/views/testDraw/main/ControlMainDraw.js
Unescape View File

@ -111,7 +111,7 @@ const ControlMainDraw = () => {
</ul>
{/* 제이쿼리로 그리기(기능 연결 중) */}
<ul className='left-menu-nav'>
{/* <ul className='left-menu-nav'>
<li className='test'>
<CustomInput
id='test'
@ -142,7 +142,7 @@ const ControlMainDraw = () => {
value={mapControl.drawType === '' ? 'STOP' : 'IN USE'}
/>
</li>
</ul>
</ul> */}
<ul className='left-menu-footer'>
<li>

Write Preview
Loading…
Cancel
Save