|
|
@ -1,6 +1,4 @@ |
|
|
|
import $ from 'jquery'; |
|
|
|
import $ from 'jquery'; |
|
|
|
import { useEffect } from 'react'; |
|
|
|
|
|
|
|
import { useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
import '../../../../assets/css/custom.css';
|
|
|
|
import '../../../../assets/css/custom.css';
|
|
|
|
import { CustomInput } from 'reactstrap'; |
|
|
|
import { CustomInput } from 'reactstrap'; |
|
|
|
|
|
|
|
|
|
|
@ -8,13 +6,12 @@ export const JQueryDraw = props => { |
|
|
|
const {naver} = props; |
|
|
|
const {naver} = props; |
|
|
|
const {map} = props; |
|
|
|
const {map} = props; |
|
|
|
|
|
|
|
|
|
|
|
const { drawType } = useSelector(state => state.controlMapReducer); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var Measure = function(buttons) { |
|
|
|
var Measure = function(buttons) { |
|
|
|
this.$btnLine = buttons.line; |
|
|
|
this.$btnLine = buttons.line; |
|
|
|
this.$btnPolygon = buttons.polygon; |
|
|
|
this.$btnPolygon = buttons.polygon; |
|
|
|
this.$btnCircle = buttons.circle; |
|
|
|
this.$btnCircle = buttons.circle; |
|
|
|
|
|
|
|
this.$btnRectangle = buttons.rectangle; |
|
|
|
|
|
|
|
|
|
|
|
this._mode = null; |
|
|
|
this._mode = null; |
|
|
|
|
|
|
|
|
|
|
@ -48,6 +45,8 @@ export const JQueryDraw = props => { |
|
|
|
this._startArea(); |
|
|
|
this._startArea(); |
|
|
|
} if (mode === 'circle') { |
|
|
|
} if (mode === 'circle') { |
|
|
|
this._startCircle(); |
|
|
|
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() { |
|
|
|
_finishDistance: function() { |
|
|
|
console.log('finishDistance') |
|
|
|
console.log('finishDistance') |
|
|
|
|
|
|
|
|
|
|
|
naver.maps.Event.removeListener(this._distanceListeners); |
|
|
|
naver.maps.Event.removeListener(this._distanceListeners); |
|
|
|
delete this._distanceListeners; |
|
|
|
delete this._distanceListeners; |
|
|
|
|
|
|
|
|
|
|
@ -94,25 +103,13 @@ export const JQueryDraw = props => { |
|
|
|
|
|
|
|
|
|
|
|
if (this._polyline) { |
|
|
|
if (this._polyline) { |
|
|
|
console.log(this._polyline.getPath()) |
|
|
|
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이 바뀌면 다 날라가는 걸로 해보면 될듯
|
|
|
|
// 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
|
|
|
|
// this._polyline.setMap(null)
|
|
|
|
// this._polyline.setMap(null)
|
|
|
|
delete this._polyline; |
|
|
|
delete this._polyline; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//버퍼 테스트
|
|
|
|
|
|
|
|
delete this._buffercircle; |
|
|
|
|
|
|
|
delete this._buffercoord; |
|
|
|
} |
|
|
|
} |
|
|
|
//onfocus()의 반대기능 = blur()
|
|
|
|
//onfocus()의 반대기능 = blur()
|
|
|
|
this.$btnLine.removeClass('control-on').blur(); |
|
|
|
this.$btnLine.removeClass('control-on').blur(); |
|
|
@ -165,6 +162,24 @@ export const JQueryDraw = props => { |
|
|
|
this._mode = null; |
|
|
|
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) { |
|
|
|
finishMode: function(mode) { |
|
|
|
console.log('finishMode') |
|
|
|
console.log('finishMode') |
|
|
|
if (!mode) return; |
|
|
|
if (!mode) return; |
|
|
@ -175,6 +190,8 @@ export const JQueryDraw = props => { |
|
|
|
this._finishArea(); |
|
|
|
this._finishArea(); |
|
|
|
} if (mode === 'circle') { |
|
|
|
} if (mode === 'circle') { |
|
|
|
this._finishCircle(); |
|
|
|
this._finishCircle(); |
|
|
|
|
|
|
|
} if (mode === 'rectangle') { |
|
|
|
|
|
|
|
this._finishRectangle(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
@ -188,14 +205,16 @@ export const JQueryDraw = props => { |
|
|
|
if (!this._polyline) { |
|
|
|
if (!this._polyline) { |
|
|
|
// 임시로 보여줄 점선 폴리라인을 생성합니다.
|
|
|
|
// 임시로 보여줄 점선 폴리라인을 생성합니다.
|
|
|
|
this._guideline = new naver.maps.Polyline({ |
|
|
|
this._guideline = new naver.maps.Polyline({ |
|
|
|
strokeColor: '#db4040', |
|
|
|
strokeColor: '#0000ff', |
|
|
|
strokeWeight: 5, |
|
|
|
strokeWeight: 3, |
|
|
|
strokeStyle: [4, 4], |
|
|
|
strokeStyle: [4, 4], |
|
|
|
strokeOpacity: 0.4, |
|
|
|
strokeOpacity: 0.2, |
|
|
|
path: [coord], |
|
|
|
path: [coord], |
|
|
|
map: map |
|
|
|
map: map |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// this._lastDistance = this._guideline.getDistance();
|
|
|
|
|
|
|
|
|
|
|
|
$(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); |
|
|
|
$(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); |
|
|
|
this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.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({ |
|
|
|
this._polyline = new naver.maps.Polyline({ |
|
|
|
strokeLineCap: 'round', |
|
|
|
strokeLineCap: 'round', |
|
|
|
strokeLineJoin: 'round', |
|
|
|
strokeLineJoin: 'round', |
|
|
|
strokeColor: '#db4040', |
|
|
|
strokeColor: '#0000ff', |
|
|
|
strokeWeight: 5, |
|
|
|
strokeWeight: 3, |
|
|
|
strokeOpacity: 1, |
|
|
|
strokeOpacity: 0.6, |
|
|
|
path: [coord], |
|
|
|
path: [coord], |
|
|
|
map: map |
|
|
|
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 { |
|
|
|
} else { |
|
|
|
this._guideline.setPath([e.coord]); |
|
|
|
this._guideline.setPath([e.coord]); |
|
|
|
this._polyline.getPath().push(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)), |
|
|
|
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
|
|
|
path = this._guideline.getPath(); |
|
|
|
path = this._guideline.getPath(); |
|
|
|
|
|
|
|
|
|
|
|
// console.log(coord, '실시간 좌표')
|
|
|
|
|
|
|
|
if (path.getLength() === 2) { |
|
|
|
if (path.getLength() === 2) { |
|
|
|
//맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까
|
|
|
|
//맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까
|
|
|
|
path.pop(); |
|
|
|
path.pop(); |
|
|
@ -250,9 +258,7 @@ export const JQueryDraw = props => { |
|
|
|
|
|
|
|
|
|
|
|
if (!this._polygon) { |
|
|
|
if (!this._polygon) { |
|
|
|
this._polygon = new naver.maps.Polygon({ |
|
|
|
this._polygon = new naver.maps.Polygon({ |
|
|
|
strokeColor: '#00f', |
|
|
|
strokeOpacity: 0.8, |
|
|
|
strokeOpacity: 0.6, |
|
|
|
|
|
|
|
strokeWeight: 2, |
|
|
|
|
|
|
|
fillColor: '#0000ff', |
|
|
|
fillColor: '#0000ff', |
|
|
|
fillOpacity: 0.1, |
|
|
|
fillOpacity: 0.1, |
|
|
|
paths: [coord], |
|
|
|
paths: [coord], |
|
|
@ -288,8 +294,6 @@ export const JQueryDraw = props => { |
|
|
|
|
|
|
|
|
|
|
|
//가이드 라인
|
|
|
|
//가이드 라인
|
|
|
|
this._radius = new naver.maps.Polyline({ |
|
|
|
this._radius = new naver.maps.Polyline({ |
|
|
|
// strokeColor: '#db4040',
|
|
|
|
|
|
|
|
// strokeWeight: 2,
|
|
|
|
|
|
|
|
strokeStyle: [4, 4], |
|
|
|
strokeStyle: [4, 4], |
|
|
|
strokeOpacity: 0.6, |
|
|
|
strokeOpacity: 0.6, |
|
|
|
path: [coord], |
|
|
|
path: [coord], |
|
|
@ -299,8 +303,6 @@ export const JQueryDraw = props => { |
|
|
|
|
|
|
|
|
|
|
|
// 임시로 보여줄 원형
|
|
|
|
// 임시로 보여줄 원형
|
|
|
|
this._guidecircle = new naver.maps.Circle({ |
|
|
|
this._guidecircle = new naver.maps.Circle({ |
|
|
|
// strokeColor: '#283046',
|
|
|
|
|
|
|
|
// strokeWeight: 2,
|
|
|
|
|
|
|
|
strokeOpacity: 0.8, |
|
|
|
strokeOpacity: 0.8, |
|
|
|
strokeStyle: [4, 4], |
|
|
|
strokeStyle: [4, 4], |
|
|
|
fillColor: '#0000ff', |
|
|
|
fillColor: '#0000ff', |
|
|
@ -315,8 +317,6 @@ export const JQueryDraw = props => { |
|
|
|
|
|
|
|
|
|
|
|
// 실제 사용되는 원형
|
|
|
|
// 실제 사용되는 원형
|
|
|
|
this._circle = new naver.maps.Circle({ |
|
|
|
this._circle = new naver.maps.Circle({ |
|
|
|
// strokeColor: '#283046',
|
|
|
|
|
|
|
|
// strokeWeight: 2,
|
|
|
|
|
|
|
|
strokeOpacity: 0.8, |
|
|
|
strokeOpacity: 0.8, |
|
|
|
fillColor: '#0000ff', |
|
|
|
fillColor: '#0000ff', |
|
|
|
fillOpacity: 0.1, |
|
|
|
fillOpacity: 0.1, |
|
|
@ -360,6 +360,63 @@ export const JQueryDraw = props => { |
|
|
|
this._guidecircle.setRadius(r); |
|
|
|
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) { |
|
|
|
_bindMap: function(map) { |
|
|
|
console.log('bindMap') |
|
|
|
console.log('bindMap') |
|
|
|
}, |
|
|
|
}, |
|
|
@ -374,6 +431,8 @@ export const JQueryDraw = props => { |
|
|
|
this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line')); |
|
|
|
this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line')); |
|
|
|
this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon')); |
|
|
|
this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon')); |
|
|
|
this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle')); |
|
|
|
this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle')); |
|
|
|
|
|
|
|
this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle')); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
_onClickButton: function(newMode, e) { |
|
|
|
_onClickButton: function(newMode, e) { |
|
|
@ -414,6 +473,12 @@ export const JQueryDraw = props => { |
|
|
|
if (this._polyline) { |
|
|
|
if (this._polyline) { |
|
|
|
this._polyline.setMap(null); |
|
|
|
this._polyline.setMap(null); |
|
|
|
delete this._polyline; |
|
|
|
delete this._polyline; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this._buffercircle.setMap(null); |
|
|
|
|
|
|
|
delete this._buffercircle; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this._buffercoord.setMap(null) |
|
|
|
|
|
|
|
delete this._buffercoord; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this._finishDistance(); |
|
|
|
this._finishDistance(); |
|
|
@ -431,10 +496,10 @@ export const JQueryDraw = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this._finishCircle(); |
|
|
|
this._finishCircle(); |
|
|
|
} else if(mode === 'CIRCLE') { |
|
|
|
} else if (mode === 'rectangle') { |
|
|
|
if(this._circle) { |
|
|
|
if(this._rectangle) { |
|
|
|
this._circle.setMap(null); |
|
|
|
this._rectangle.setMap(null); |
|
|
|
delete this._circle; |
|
|
|
delete this._rectangle; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -444,7 +509,8 @@ export const JQueryDraw = props => { |
|
|
|
var measures = new Measure({ |
|
|
|
var measures = new Measure({ |
|
|
|
line: $('#line'), |
|
|
|
line: $('#line'), |
|
|
|
polygon: $('#polygon'), |
|
|
|
polygon: $('#polygon'), |
|
|
|
circle: $('#circle') |
|
|
|
circle: $('#circle'), |
|
|
|
|
|
|
|
rectangle: $('#rectangle') |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
measures.setMap(map); |
|
|
|
measures.setMap(map); |
|
|
@ -454,9 +520,6 @@ export const JQueryDraw = props => { |
|
|
|
<div style={{ position: 'relative' }}> |
|
|
|
<div style={{ position: 'relative' }}> |
|
|
|
<ul className="measure-control"> |
|
|
|
<ul className="measure-control"> |
|
|
|
<li> |
|
|
|
<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 |
|
|
|
<CustomInput |
|
|
|
id='line' |
|
|
|
id='line' |
|
|
|
type='image' |
|
|
|
type='image' |
|
|
@ -475,17 +538,18 @@ export const JQueryDraw = props => { |
|
|
|
className='control-btn' |
|
|
|
className='control-btn' |
|
|
|
src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png' |
|
|
|
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/> |
|
|
|
<br/> |
|
|
|
<CustomInput |
|
|
|
<CustomInput |
|
|
|
id='input' |
|
|
|
id='input' |
|
|
|
type='input' |
|
|
|
type='input' |
|
|
|
className='buffer-input' |
|
|
|
className='buffer-input' |
|
|
|
/> |
|
|
|
/> |
|
|
|
{/* <CustomInput |
|
|
|
|
|
|
|
id='input-btn' |
|
|
|
|
|
|
|
type='button' |
|
|
|
|
|
|
|
className='buffer-btn' |
|
|
|
|
|
|
|
/> */} |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|