16 changed files with 820 additions and 325 deletions
@ -1,154 +0,0 @@
|
||||
import { useEffect, useState } from "react"; |
||||
import { BiCaretLeftCircle } from "react-icons/bi"; |
||||
import { useSelector } from "react-redux"; |
||||
|
||||
export const DrawPath = props => { |
||||
const {naver} = props; |
||||
const {map} = props; |
||||
const {drawType} = useSelector(state => state.controlMapReducer); |
||||
|
||||
let linePath = ([]); |
||||
let circleCenter = ''; |
||||
|
||||
const [eventGroup, setEventGroup] = useState([]); |
||||
const [polylines, setPolylines] = useState([]); |
||||
const [circleLayers, setCircleLayers] = useState([]); |
||||
|
||||
useEffect(() => { |
||||
// drawSetting();
|
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
init(); |
||||
}, [drawType]); |
||||
|
||||
useEffect(() => { |
||||
}, [eventGroup]); |
||||
|
||||
useEffect(() => { |
||||
moveCircle(); |
||||
}, [circleLayers]); |
||||
|
||||
const init = () => { |
||||
removeEvent(); |
||||
removeLayers(); |
||||
} |
||||
|
||||
const drawSetting = () => { |
||||
const drawingManager = new naver.maps.drawing.DrawingManager({ |
||||
drawingControl: [ |
||||
naver.maps.drawing.DrawingMode.POLYLINE, |
||||
naver.maps.drawing.DrawingMode.POLYGON, |
||||
naver.maps.drawing.DrawingMode.ELLIPSE, |
||||
naver.maps.drawing.DrawingMode.RECTANGLE |
||||
], |
||||
drawingControlOptions: { |
||||
position: naver.maps.Position.LEFT_CENTER, |
||||
style: naver.maps.drawing.DrawingStyle.VERTICAL |
||||
} |
||||
}); |
||||
drawingManager.setMap(map); |
||||
} |
||||
|
||||
const removeEvent = () => { |
||||
eventGroup.forEach(prev => naver.maps.Event.removeListener(prev)); |
||||
// eventGroup.forEach(prev => console.log(prev));
|
||||
// const test = eventGroup.find(prev=> prev='drawingManager');
|
||||
// if(test) {
|
||||
// test.setMap(null);
|
||||
// }
|
||||
setEventGroup([]); |
||||
addEvent(); |
||||
} |
||||
|
||||
const removeLayers = () => { |
||||
if(polylines) { |
||||
polylines.forEach(prev => prev.setMap(null)); |
||||
setPolylines([]); |
||||
}; |
||||
if(circleLayers) { |
||||
circleLayers.forEach(prev => prev.setMap(null)); |
||||
setCircleLayers([]); |
||||
}; |
||||
linePath = []; |
||||
// circleCenter = '';
|
||||
} |
||||
|
||||
const addEvent = () => { |
||||
let addClick = naver.maps.Event.addListener(map, 'click', function(e) { |
||||
// debugger;
|
||||
if(drawType) { |
||||
linePath.push(e.coord); |
||||
circleCenter = e.coord; |
||||
startDraw(); |
||||
} else { |
||||
// console.log('1');
|
||||
} |
||||
}); |
||||
|
||||
// let escDown = naver.maps.Event.addListener(map, 'keydown', function(e) {
|
||||
// const keyboardEvent = e.keyboardEvent,
|
||||
// keyCode = keyboardEvent.keyCode || keyboardEvent.which;
|
||||
|
||||
// const ESC = 27;
|
||||
// if(keyCode === ESC) {
|
||||
// keyboardEvent.preventDefault();
|
||||
// // removeLayers();
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
setEventGroup(prev => ([...prev, addClick])); |
||||
} |
||||
|
||||
const startDraw = () => { |
||||
if(drawType === 'LINE') { |
||||
createPolyline(); |
||||
} else if(drawType === 'CIRCLE') { |
||||
createCircle(); |
||||
} |
||||
} |
||||
|
||||
const createPolyline = () => { |
||||
if(linePath.length >= 2) { |
||||
const polyline = new naver.maps.Polyline({ |
||||
path: linePath, |
||||
strokeColor: '#ff0000', |
||||
strokeWeight: 2, |
||||
strokeOpacity: 0.5, |
||||
map: map |
||||
}); |
||||
linePath.shift(); |
||||
setPolylines(prev => ([...prev, polyline])); |
||||
} |
||||
} |
||||
|
||||
const createCircle = () => { |
||||
const circle = new naver.maps.Circle({ |
||||
center: circleCenter, |
||||
strokeColor: '#283046', |
||||
strokeWeight: 1, |
||||
strokeOpacity: 0.8, |
||||
fillColor: '#0000ff', |
||||
fillOpacity: 0.2, |
||||
radius: 150, |
||||
clickable: false, |
||||
map: map |
||||
}); |
||||
// circleCenter = '';
|
||||
setCircleLayers(prev => ([...prev, circle])); |
||||
} |
||||
|
||||
const moveCircle = () => { |
||||
if(circleLayers.length >= 2) { |
||||
circleLayers[0].setMap(null); |
||||
setCircleLayers(prev => ([prev[circleLayers.length-1]])); |
||||
}
|
||||
// else {
|
||||
// console.log(circleLayers);
|
||||
// }
|
||||
} |
||||
|
||||
return null; |
||||
}; |
||||
|
||||
@ -0,0 +1,496 @@
|
||||
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; |
||||
|
||||
const { drawType } = useSelector(state => state.controlMapReducer); |
||||
|
||||
|
||||
var Measure = function(buttons) { |
||||
this.$btnLine = buttons.line; |
||||
this.$btnPolygon = buttons.polygon; |
||||
this.$btnCircle = buttons.circle; |
||||
|
||||
this._mode = null; |
||||
|
||||
this._bindDOMEvents(); |
||||
}; |
||||
|
||||
$.extend( |
||||
Measure.prototype,{ |
||||
constructor: Measure, |
||||
|
||||
setMap: function(map) { |
||||
console.log('setMap') |
||||
if (this.map) { |
||||
this._unbindMap(this.map); |
||||
} |
||||
|
||||
this.map = map; |
||||
|
||||
if (map) { |
||||
this._bindMap(map); |
||||
} |
||||
}, |
||||
|
||||
startMode: function(mode) { |
||||
console.log('startMode') |
||||
if (!mode) return; |
||||
|
||||
if (mode === 'line') { |
||||
this._startDistance(); |
||||
} if (mode === 'polygon') { |
||||
this._startArea(); |
||||
} if (mode === 'circle') { |
||||
this._startCircle(); |
||||
} |
||||
}, |
||||
|
||||
_startDistance: function() { |
||||
console.log('startDistance') |
||||
var map = this.map; |
||||
this._distanceListeners = [ |
||||
naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this)) |
||||
]; |
||||
}, |
||||
|
||||
_startArea: function() { |
||||
console.log('startArea') |
||||
var map = this.map; |
||||
|
||||
this._areaListeners = [ |
||||
naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)), |
||||
naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this)) |
||||
]; |
||||
|
||||
$(document).on('mousemove.measure', this._onMouseMoveArea.bind(this)); |
||||
}, |
||||
|
||||
_startCircle: function() { |
||||
console.log('startCircle') |
||||
var map = this.map; |
||||
this._circleListeners = [ |
||||
naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)), |
||||
naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)) |
||||
]; |
||||
}, |
||||
|
||||
_finishDistance: function() { |
||||
console.log('finishDistance') |
||||
naver.maps.Event.removeListener(this._distanceListeners); |
||||
delete this._distanceListeners; |
||||
|
||||
$(document).off('mousemove.measure'); |
||||
|
||||
if (this._guideline) { |
||||
this._guideline.setMap(null); |
||||
delete this._guideline; |
||||
} |
||||
|
||||
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(); |
||||
|
||||
this._mode = null; |
||||
}, |
||||
|
||||
_finishArea: function() { |
||||
console.log('finishArea') |
||||
naver.maps.Event.removeListener(this._areaListeners); |
||||
delete this._areaListeners; |
||||
|
||||
$(document).off('mousemove.measure'); |
||||
|
||||
if (this._polygon) { |
||||
var path = this._polygon.getPath(); |
||||
path.pop(); |
||||
|
||||
delete this._polygon; |
||||
} |
||||
|
||||
this.$btnPolygon.removeClass('control-on').blur(); |
||||
|
||||
this._mode = null; |
||||
}, |
||||
|
||||
_finishCircle: function() { |
||||
console.log('finishCircle') |
||||
|
||||
naver.maps.Event.removeListener(this._circleListeners); |
||||
delete this._circleListeners; |
||||
|
||||
$(document).off('mousemove.measure'); |
||||
|
||||
if(this._guidecircle) { |
||||
this._guidecircle.setMap(null); |
||||
this._radius.setMap(null); |
||||
delete this._raidus; |
||||
delete this._guidecircle; |
||||
} |
||||
|
||||
if (this._circle) { |
||||
// this._circle.setMap(null);
|
||||
delete this._circle; |
||||
} |
||||
|
||||
this.$btnCircle.removeClass('control-on').blur(); |
||||
|
||||
// delete this._lastDistance;
|
||||
this._mode = null; |
||||
}, |
||||
|
||||
finishMode: function(mode) { |
||||
console.log('finishMode') |
||||
if (!mode) return; |
||||
|
||||
if (mode === 'line') { |
||||
this._finishDistance(); |
||||
} if (mode === 'polygon') { |
||||
this._finishArea(); |
||||
} if (mode === 'circle') { |
||||
this._finishCircle(); |
||||
} |
||||
}, |
||||
|
||||
_onClickDistance: function(e) { |
||||
console.log('onClickDistance') |
||||
var map = this.map, |
||||
coord = e.coord; |
||||
|
||||
console.log(coord, '클릭좌표1'); |
||||
|
||||
if (!this._polyline) { |
||||
// 임시로 보여줄 점선 폴리라인을 생성합니다.
|
||||
this._guideline = new naver.maps.Polyline({ |
||||
strokeColor: '#db4040', |
||||
strokeWeight: 5, |
||||
strokeStyle: [4, 4], |
||||
strokeOpacity: 0.4, |
||||
path: [coord], |
||||
map: map |
||||
}); |
||||
|
||||
$(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); |
||||
this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this))); |
||||
|
||||
// 실제 거리재기에 사용되는 폴리라인을 생성합니다.
|
||||
this._polyline = new naver.maps.Polyline({ |
||||
strokeLineCap: 'round', |
||||
strokeLineJoin: 'round', |
||||
strokeColor: '#db4040', |
||||
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); |
||||
} |
||||
}, |
||||
|
||||
_onMouseMoveDistance: function(e) { |
||||
console.log('onMouseMoveDistance') |
||||
var map = this.map, |
||||
proj = this.map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||
path = this._guideline.getPath(); |
||||
|
||||
// console.log(coord, '실시간 좌표')
|
||||
if (path.getLength() === 2) { |
||||
//맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까
|
||||
path.pop(); |
||||
} |
||||
|
||||
// [기존 클릭 좌표, 실시간 좌표]
|
||||
path.push(coord); |
||||
}, |
||||
|
||||
_onClickArea: function(e) { |
||||
console.log('onClickArea') |
||||
var map = this.map, |
||||
coord = e.coord; |
||||
|
||||
if (!this._polygon) { |
||||
this._polygon = new naver.maps.Polygon({ |
||||
strokeColor: '#00f', |
||||
strokeOpacity: 0.6, |
||||
strokeWeight: 2, |
||||
fillColor: '#0000ff', |
||||
fillOpacity: 0.1, |
||||
paths: [coord], |
||||
map: map |
||||
}); |
||||
} else { |
||||
this._polygon.getPath().push(coord); |
||||
} |
||||
}, |
||||
|
||||
_onMouseMoveArea: function(e) { |
||||
console.log('onMouseMoveArea') |
||||
if (!this._polygon) return; |
||||
|
||||
var map = this.map, |
||||
proj = this.map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||
path = this._polygon.getPath(); |
||||
|
||||
if (path.getLength() >= 2) { |
||||
path.pop(); |
||||
} |
||||
|
||||
path.push(coord); |
||||
}, |
||||
|
||||
_onClickCircle: function(e) { |
||||
console.log('onClickCircle') |
||||
var map = this.map, |
||||
coord = e.coord; |
||||
|
||||
if(!this._circle) { |
||||
|
||||
//가이드 라인
|
||||
this._radius = new naver.maps.Polyline({ |
||||
// strokeColor: '#db4040',
|
||||
// strokeWeight: 2,
|
||||
strokeStyle: [4, 4], |
||||
strokeOpacity: 0.6, |
||||
path: [coord], |
||||
map: map |
||||
}); |
||||
this._lastDistance = this._radius.getDistance(); |
||||
|
||||
// 임시로 보여줄 원형
|
||||
this._guidecircle = new naver.maps.Circle({ |
||||
// strokeColor: '#283046',
|
||||
// strokeWeight: 2,
|
||||
strokeOpacity: 0.8, |
||||
strokeStyle: [4, 4], |
||||
fillColor: '#0000ff', |
||||
fillOpacity: 0.1, |
||||
center: coord, |
||||
radius: this._lastDistance, |
||||
map: map |
||||
}); |
||||
|
||||
$(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this)); |
||||
this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))); |
||||
|
||||
// 실제 사용되는 원형
|
||||
this._circle = new naver.maps.Circle({ |
||||
// strokeColor: '#283046',
|
||||
// strokeWeight: 2,
|
||||
strokeOpacity: 0.8, |
||||
fillColor: '#0000ff', |
||||
fillOpacity: 0.1, |
||||
center: coord, |
||||
radius: this._lastDistance, |
||||
map: map |
||||
}); |
||||
|
||||
} else { |
||||
// this._guidecircle.setCenter(e.coord);
|
||||
// this._circle.setCenter(coord);
|
||||
// if(this._radius.getPath().length() === 2) {
|
||||
// this._radius.getPath().pop();
|
||||
// }
|
||||
|
||||
// this._radius.getPath().push(coord);
|
||||
|
||||
var distance = this._radius.getDistance(); |
||||
this._lastDistance = distance; |
||||
this._circle.setRadius(this._lastDistance); |
||||
|
||||
|
||||
} |
||||
}, |
||||
|
||||
_onMouseMoveCircle: function(e) { |
||||
console.log('onMouseMoveCircle') |
||||
if(!this._circle) return; |
||||
|
||||
var map = this.map, |
||||
proj = this.map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||
path = this._radius.getPath(), |
||||
center = this._guidecircle.getCenter(), //LatLng으로 나옴
|
||||
r = proj.getDistance(coord, center); |
||||
|
||||
if(path.getLength() === 2) { |
||||
path.pop(); |
||||
} |
||||
path.push(coord); |
||||
this._guidecircle.setRadius(r); |
||||
}, |
||||
|
||||
_bindMap: function(map) { |
||||
console.log('bindMap') |
||||
}, |
||||
|
||||
_unbindMap: function() { |
||||
console.log('unbindMap') |
||||
this.unbindAll(); |
||||
}, |
||||
|
||||
_bindDOMEvents: function() { |
||||
console.log('bindDOMEvents') |
||||
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')); |
||||
}, |
||||
|
||||
_onClickButton: function(newMode, e) { |
||||
//newMode는 방금 클릭한 값(line, polygon, circle...)
|
||||
console.log('onClickButton') |
||||
e.preventDefault(); |
||||
|
||||
var btn = $(e.target), |
||||
map = this.map, |
||||
mode = this._mode; |
||||
//this._mode는 클릭하기 전 값(첫 클릭이면 null)
|
||||
|
||||
if (btn.hasClass('control-on')) { |
||||
console.log('remove') |
||||
btn.removeClass('control-on'); |
||||
} else { |
||||
console.log('add') |
||||
btn.addClass('control-on'); |
||||
} |
||||
|
||||
this._clearMode(mode); |
||||
|
||||
if (mode === newMode) { |
||||
this._mode = null; |
||||
return; |
||||
} |
||||
|
||||
this._mode = newMode; |
||||
|
||||
this.startMode(newMode); |
||||
}, |
||||
|
||||
_clearMode: function(mode) { |
||||
console.log('clearMode') |
||||
if (!mode) return; |
||||
|
||||
if (mode === 'line') { |
||||
if (this._polyline) { |
||||
this._polyline.setMap(null); |
||||
delete this._polyline; |
||||
} |
||||
|
||||
this._finishDistance(); |
||||
} else if (mode === 'polygon') { |
||||
if (this._polygon) { |
||||
this._polygon.setMap(null); |
||||
delete this._polygon; |
||||
} |
||||
|
||||
this._finishArea(); |
||||
} else if (mode === 'circle') { |
||||
if (this._circle) { |
||||
this._circle.setMap(null); |
||||
delete this._circle; |
||||
} |
||||
|
||||
this._finishCircle(); |
||||
} else if(mode === 'CIRCLE') { |
||||
if(this._circle) { |
||||
this._circle.setMap(null); |
||||
delete this._circle; |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// id랑 매치시켜서 옵션 지정함
|
||||
var measures = new Measure({ |
||||
line: $('#line'), |
||||
polygon: $('#polygon'), |
||||
circle: $('#circle') |
||||
}); |
||||
|
||||
measures.setMap(map); |
||||
|
||||
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> */} |
||||
<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> |
||||
</> |
||||
) |
||||
|
||||
}; |
||||
|
||||
@ -1,11 +1,21 @@
|
||||
export interface FlightState { |
||||
areaList: FlightAreaData | undefined
|
||||
flightPlanArea: FlightPlanArea | undefined |
||||
} |
||||
|
||||
export interface FlightAreaData { |
||||
areaList: [] |
||||
} |
||||
|
||||
export interface FlightPlanArea { |
||||
address : '', |
||||
coordinates : '', |
||||
redius : '', |
||||
altitude_m : '', |
||||
altitude_ft : '', |
||||
} |
||||
|
||||
export const initFlight = { |
||||
areaList: undefined
|
||||
areaList: undefined, |
||||
flightPlanArea: undefined
|
||||
}; |
||||
Loading…
Reference in new issue