junh_eee(이준희)
2 years ago
4 changed files with 1239 additions and 1241 deletions
File diff suppressed because it is too large
Load Diff
@ -1,676 +0,0 @@
|
||||
import $ from 'jquery'; |
||||
import { useEffect, useState } from 'react'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
|
||||
export const FlightPlanDrawTest = props => { |
||||
const mapControl = useSelector(state => state.controlMapReducer); |
||||
|
||||
const [pastPolyline, setPolyline] = useState(); |
||||
const [pastBuffer, setBuffer] = useState(); |
||||
|
||||
const [pastPolygon, setPolygon] = useState(); |
||||
|
||||
// const [pastCircle, setCircle] = useState();
|
||||
const [pastCircle, setCircle] = useState([]); |
||||
const [pastEve, setEve] = useState(); |
||||
|
||||
const [pastDragCircle, setDragCircle] = useState([]); |
||||
|
||||
const [pastMarker, setMarker] = useState([]); |
||||
|
||||
const naver = props.naver; |
||||
const map = props.map; |
||||
let mode = props.mode; |
||||
|
||||
let areaInfo; |
||||
let lastDistance; |
||||
|
||||
let polyline; |
||||
let guideline; |
||||
let bufferPolygon; |
||||
|
||||
let polygon; |
||||
|
||||
let circle; |
||||
let radiusline; |
||||
|
||||
let Eve = { |
||||
clickEve: '', |
||||
mousedownEve: '', |
||||
rightclickEve: '' |
||||
} |
||||
|
||||
let dragCircle = []; |
||||
let dragCircleEve = []; |
||||
|
||||
let check; |
||||
|
||||
let distanceMarker = []; |
||||
|
||||
useEffect(() => { |
||||
drawInit(); |
||||
}, [mapControl.drawType]) |
||||
|
||||
useEffect(() => { |
||||
handleDetailDrwa(); |
||||
}, [props.areaCoordList]) |
||||
|
||||
const drawInit = () => { |
||||
console.log(mapControl.drawType); |
||||
if (mapControl.drawType === 'LINE') { |
||||
onClickButton('LINE'); |
||||
} else if (mapControl.drawType === 'CIRCLE') { |
||||
onClickButton('CIRCLE'); |
||||
} else if (mapControl.drawType === 'POLYGON') { |
||||
onClickButton('POLYGON'); |
||||
} else if (mapControl.drawType === 'RESET') { |
||||
onClickReset('RESET') |
||||
} |
||||
} |
||||
|
||||
const onClickButton = (newMode) => { |
||||
console.log('onClickButton'); |
||||
|
||||
clearMode(mode); |
||||
|
||||
if (mode === newMode) { |
||||
mode = null; |
||||
return; |
||||
} |
||||
|
||||
// mode = newMode;
|
||||
|
||||
startMode(newMode); |
||||
} |
||||
|
||||
const clearMode = (mode) => { |
||||
console.log('clearMode') |
||||
|
||||
// if(!mode) return;
|
||||
|
||||
if (pastPolyline) { |
||||
console.log('clear polyline ', pastPolyline) |
||||
pastPolyline.setMap(null); |
||||
pastDragCircle.forEach(c => c.setMap(null)); |
||||
pastBuffer.setMap(null); |
||||
setPolyline(); |
||||
setDragCircle([]); |
||||
setBuffer(); |
||||
} |
||||
if (pastCircle) { |
||||
console.log('clear circle ', pastCircle) |
||||
pastCircle.forEach(prev => prev.setMap(null)) |
||||
naver.maps.Event.removeListener(pastEve); |
||||
|
||||
// setCircle();
|
||||
setCircle([]); |
||||
} |
||||
if (pastPolygon) { |
||||
console.log('clear polygon ', pastPolygon) |
||||
pastPolygon.setMap(null); |
||||
pastDragCircle.forEach(c => c.setMap(null)); |
||||
|
||||
setPolygon(); |
||||
setDragCircle([]); |
||||
} |
||||
if (pastMarker) { |
||||
console.log('clear marker ', pastMarker) |
||||
pastMarker.forEach(m => m.setMap(null)); |
||||
} |
||||
|
||||
finishDraw(); |
||||
props.handleInitCoordinates();
|
||||
} |
||||
|
||||
const startMode = (mode) => { |
||||
console.log('startMode') |
||||
|
||||
if (!mode) return; |
||||
|
||||
if (mode === 'LINE') { |
||||
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) }); |
||||
} else if (mode === 'POLYGON') { |
||||
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) }); |
||||
} else if (mode === 'CIRCLE') { |
||||
setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) |
||||
} |
||||
} |
||||
|
||||
const removeListener = () => { |
||||
console.log('removeListener') |
||||
|
||||
naver.maps.Event.removeListener(Eve.clickEve); |
||||
naver.maps.Event.removeListener(Eve.mousedownEve); |
||||
naver.maps.Event.removeListener(Eve.rightclickEve); |
||||
if (!circle) $(document).off('mousemove.measure'); |
||||
// if(pastCircle) naver.maps.Event.removeListener(pastEve);
|
||||
naver.maps.Event.removeListener(pastEve); |
||||
} |
||||
|
||||
const finishDraw = () => { |
||||
console.log('finishDraw') |
||||
removeListener(); |
||||
|
||||
if (polyline) { |
||||
if (guideline) { |
||||
guideline.setMap(null); |
||||
guideline = ''; |
||||
} |
||||
|
||||
let polypaths = polyline.getPath()._array; |
||||
|
||||
if (polypaths.length >= 2) { |
||||
setPolyline(polyline); |
||||
setAreaInfo(polypaths); |
||||
} else { |
||||
polyline.setMap(null); |
||||
polyline = ''; |
||||
} |
||||
|
||||
polyline.setMap(null) |
||||
} else if (polygon) { |
||||
let path = polygon.getPath(); |
||||
path.pop(); |
||||
|
||||
let polygonpaths = polygon.getPath()._array; |
||||
|
||||
setPolygon(polygon); |
||||
setAreaInfo(polygonpaths); |
||||
|
||||
polygon.setMap(null) |
||||
} |
||||
} |
||||
|
||||
const onClickPolyline = (e) => { |
||||
console.log('onClickPolyline') |
||||
var coord = e.coord; |
||||
|
||||
// if (!check) {
|
||||
if (!polyline) { |
||||
//가이드라인
|
||||
guideline = new naver.maps.Polyline({ |
||||
strokeColor: '#283046', |
||||
strokeWeight: 2, |
||||
strokeOpacity: 0.3, |
||||
path: [coord], |
||||
map: map |
||||
}); |
||||
lastDistance = guideline.getDistance(); |
||||
|
||||
//실제 사용되는 라인
|
||||
polyline = new naver.maps.Polyline({ |
||||
strokeLineCap: 'round', |
||||
strokeLineJoin: 'round', |
||||
// strokeColor: '#283046',
|
||||
strokeColor: '#ff0000', |
||||
strokeWeight: 3, |
||||
strokeOpacity: 1, |
||||
path: [coord], |
||||
map: map |
||||
}); |
||||
|
||||
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) |
||||
$(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); }); |
||||
|
||||
lastDistance = polyline.getDistance(); |
||||
addMileStone(coord, 'Start') |
||||
} else { |
||||
guideline.setPath([e.coord]); |
||||
polyline.getPath().push(coord); |
||||
|
||||
var distance = polyline.getDistance(); |
||||
addMileStone(coord, fromMetersToText(distance - lastDistance)); |
||||
lastDistance = distance; |
||||
} |
||||
// }
|
||||
} |
||||
|
||||
const onMouseMovePolyline = (e) => { |
||||
console.log('onMouseMovePolyline') |
||||
var proj = map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||
path = guideline.getPath(); |
||||
|
||||
if (path.getLength() === 2) { |
||||
path.pop(); |
||||
} |
||||
|
||||
path.push(coord); |
||||
} |
||||
|
||||
const onClickPolygon = (e) => { |
||||
console.log('onClickPolygon') |
||||
var coord = e.coord; |
||||
|
||||
if (!polygon) { |
||||
polygon = new naver.maps.Polygon({ |
||||
strokeColor: '#283046', |
||||
strokeOpacity: 1, |
||||
fillColor: '#7367F0', |
||||
fillOpacity: 0.1, |
||||
paths: [coord], |
||||
map: map |
||||
}); |
||||
|
||||
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) |
||||
$(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) }); |
||||
} else { |
||||
polygon.getPath().push(coord); |
||||
} |
||||
} |
||||
|
||||
const onMouseMovePolygon = (e) => { |
||||
console.log('onMouseMovePolygon') |
||||
if (!polygon) return; |
||||
|
||||
var proj = map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
||||
path = polygon.getPath(); |
||||
|
||||
if (path.getLength() >= 2) { |
||||
path.pop(); |
||||
} |
||||
|
||||
path.push(coord); |
||||
} |
||||
|
||||
const onClickCircle = (e) => { |
||||
console.log('onClickCircle') |
||||
var coord = e.coord; |
||||
|
||||
if(!circle) { |
||||
radiusline = new naver.maps.Polyline({ |
||||
strokeStyle: [4, 4], |
||||
strokeOpacity: 0.6, |
||||
path: [coord], |
||||
map: map |
||||
}) |
||||
lastDistance = radiusline.getDistance(); |
||||
|
||||
circle = new naver.maps.Circle({ |
||||
strokeColor: '#283046', |
||||
strokeOpacity: 1, |
||||
fillColor: '#7367F0', |
||||
fillOpacity: 0.1, |
||||
center: coord, |
||||
radius: 100, |
||||
// map: map,
|
||||
clickable: true |
||||
}) |
||||
|
||||
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) |
||||
} else { |
||||
circle.setCenter(coord); |
||||
circle.setRadius(100); |
||||
} |
||||
// setCircle(circle);
|
||||
setCircle(prev => ([...prev, circle])) |
||||
setAreaInfo(''); |
||||
} |
||||
|
||||
const onMouseDownDrag = (index) => { |
||||
console.log('onMouseDownDrag') |
||||
|
||||
if (circle) { |
||||
naver.maps.Event.removeListener(Eve.clickEve); |
||||
} |
||||
|
||||
map.setOptions({ |
||||
draggable: false, |
||||
pinchZoom: false, |
||||
scrollWheel: false, |
||||
keyboardShortcuts: false, |
||||
disableDoubleTapZoom: true, |
||||
disableDoubleClickZoom: true, |
||||
disableTwoFingerTapZoom: true |
||||
}) |
||||
|
||||
$(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); |
||||
$(document).on('mouseup.measure', function () { onMouseUpDrag() }); |
||||
} |
||||
|
||||
const onMouseMoveDrag = (e, index) => { |
||||
console.log('onMouseMoveDrag') |
||||
|
||||
check = true; |
||||
|
||||
var proj = map.getProjection(), |
||||
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); |
||||
|
||||
if (polyline) { |
||||
var polypaths = polyline.getPath()._array; |
||||
|
||||
let movepath = []; |
||||
for (let i = 0; i < polypaths.length; i++) { |
||||
let path; |
||||
if (i === index) { |
||||
path = coord; |
||||
} else { |
||||
path = polypaths[i] |
||||
} |
||||
movepath.push(path); |
||||
} |
||||
|
||||
polyline.setPath(movepath); |
||||
|
||||
} else if (polygon) { |
||||
var polygonpaths = polygon.getPath()._array; |
||||
|
||||
let movepath = []; |
||||
for (let i = 0; i < polygonpaths.length; i++) { |
||||
let path; |
||||
if (i === index) { |
||||
path = coord; |
||||
} else { |
||||
path = polygonpaths[i] |
||||
} |
||||
movepath.push(path); |
||||
} |
||||
polygon.setPaths(movepath) |
||||
|
||||
} else if (circle) { |
||||
// var circlepath = radiusline.getPath(),
|
||||
// center = circle.getCenter(),
|
||||
// r = proj.getDistance(coord, center);
|
||||
var center = circle.getCenter(), |
||||
r = proj.getDistance(coord, center); |
||||
|
||||
// if (circlepath.getLength() === 2) {
|
||||
// circlepath.pop();
|
||||
// }
|
||||
// circlepath.push(coord);
|
||||
circle.setRadius(r); |
||||
} |
||||
|
||||
if (!circle) { |
||||
dragCircle[index].setCenter(coord); |
||||
} |
||||
} |
||||
|
||||
const onMouseUpDrag = () => { |
||||
console.log('onMouseUpDrag') |
||||
|
||||
map.setOptions({ |
||||
draggable: true, |
||||
pinchZoom: true, |
||||
scrollWheel: true, |
||||
keyboardShortcuts: true, |
||||
disableDoubleTapZoom: false, |
||||
disableDoubleClickZoom: false, |
||||
disableTwoFingerTapZoom: false |
||||
}) |
||||
|
||||
if (polyline) { |
||||
var path = polyline.getPath()._array; |
||||
setPolyline(polyline); |
||||
setAreaInfo(path); |
||||
props.handleBufferList(); |
||||
} |
||||
|
||||
if (polygon) { |
||||
var path = polygon.getPath()._array; |
||||
setPolygon(polygon); |
||||
setAreaInfo(path); |
||||
} |
||||
|
||||
$(document).off('mousemove.measure'); |
||||
$(document).off('mouseup.measure'); |
||||
|
||||
if (circle) { |
||||
// Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); })
|
||||
setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) |
||||
// setCircle(circle);
|
||||
setCircle(prev => ([...prev, circle])) |
||||
setAreaInfo(''); |
||||
} |
||||
|
||||
check = false; |
||||
} |
||||
|
||||
const setAreaInfo = (path) => { |
||||
areaInfo = { |
||||
coordinates: [], |
||||
bufferZone: 0, |
||||
}; |
||||
|
||||
let prePath = []; |
||||
if (path) { |
||||
path.forEach((item) => { |
||||
const p = { |
||||
lat: item.y, |
||||
lon: item.x |
||||
} |
||||
|
||||
prePath.push(p); |
||||
}) |
||||
// path.forEach(prev=> prePath.push([prev.x, prev.y]))
|
||||
} |
||||
|
||||
if (polyline) { |
||||
areaInfo.coordinates = prePath; |
||||
areaInfo.areaType = 'LINE'; |
||||
} else if (polygon) { |
||||
areaInfo.coordinates = prePath; |
||||
areaInfo.areaType = 'POLYGON'; |
||||
} else if (circle) { |
||||
const point = { |
||||
lat: circle.getCenter().y, |
||||
lon: circle.getCenter().x |
||||
} |
||||
|
||||
areaInfo.coordinates.push(point); |
||||
areaInfo.bufferZone = circle.getRadius(); |
||||
areaInfo.areaType = 'CIRCLE'; |
||||
} |
||||
props.handleCoordinates(areaInfo); |
||||
// console.log(areaInfo, 'areaInfo')
|
||||
} |
||||
|
||||
const onClickReset = () => { |
||||
console.log('onClickRest - ', mapControl.drawType); |
||||
if (mapControl.drawType === 'RESET') { |
||||
clearMode('RESET'); |
||||
} |
||||
} |
||||
|
||||
const handleDetailDrwa = () => { |
||||
if (props.areaCoordList) {
|
||||
console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
|
||||
|
||||
const areas = props.areaCoordList[0]; |
||||
|
||||
const paths = []; |
||||
|
||||
areas.coordList.forEach((coord) => { |
||||
const path = new naver.maps.LatLng(coord.lat, coord.lon) |
||||
|
||||
paths.push(path); |
||||
}); |
||||
|
||||
if (areas.areaType && areas.areaType === 'LINE') { |
||||
//polyline 생성
|
||||
if(pastPolyline) { |
||||
pastPolyline.setMap(null); |
||||
pastDragCircle.forEach(c => c.setMap(null)); |
||||
} |
||||
polyline = new naver.maps.Polyline({ |
||||
strokeLineCap: 'round', |
||||
strokeLineJoin: 'round', |
||||
strokeColor: '#283046', |
||||
strokeWeight: 3, |
||||
strokeOpacity: 1, |
||||
path: paths, |
||||
map: map |
||||
}); |
||||
|
||||
setPolyline(polyline) |
||||
|
||||
//dragCircle 생성
|
||||
for(let i = 0; i < paths.length; i++) { |
||||
dragCircle.push( |
||||
new naver.maps.Circle({ |
||||
strokestrokeOpacity: 1, |
||||
strokeColor: '#000000', |
||||
fillColor: '#ffffff', |
||||
fillOpacity: 1, |
||||
center: paths[i], |
||||
radius: 15, |
||||
map: map, |
||||
clickable: true |
||||
}) |
||||
) |
||||
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) |
||||
} |
||||
|
||||
setDragCircle(dragCircle); |
||||
|
||||
if (areas.bufferCoordList) {
|
||||
const bufferPaths = []; |
||||
|
||||
areas.bufferCoordList.forEach((bfCoord) => { |
||||
const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon); |
||||
|
||||
bufferPaths.push(path); |
||||
}); |
||||
console.log('buffer test : ',areas.bufferCoordList); |
||||
|
||||
if(pastBuffer) { |
||||
pastBuffer.setMap(null); |
||||
} |
||||
|
||||
// console.log(bufferPaths)
|
||||
//bufferline 생성
|
||||
bufferPolygon = new naver.maps.Polyline({ |
||||
strokeColor: '#283046', |
||||
strokeOpacity: 1, |
||||
// fillColor: '#7367F0',
|
||||
// fillOpacity: 0.1,
|
||||
path: bufferPaths, |
||||
map: map |
||||
}); |
||||
// console.log(bufferPolygon);
|
||||
setBuffer(bufferPolygon); |
||||
} |
||||
} |
||||
|
||||
if (areas.areaType && areas.areaType === 'POLYGON') { |
||||
//polygon 생성
|
||||
if(pastPolygon) { |
||||
pastPolygon.setMap(null); |
||||
pastDragCircle.forEach(c => c.setMap(null)); |
||||
} |
||||
polygon = new naver.maps.Polygon({ |
||||
strokeColor: '#283046', |
||||
strokeOpacity: 1, |
||||
fillColor: '#7367F0', |
||||
fillOpacity: 0.1, |
||||
paths: paths, |
||||
map: map |
||||
}); |
||||
|
||||
setPolygon(polygon); |
||||
|
||||
//dragCircle 생성
|
||||
for(let i = 0; i < paths.length; i++) { |
||||
dragCircle.push( |
||||
new naver.maps.Circle({ |
||||
strokestrokeOpacity: 1, |
||||
strokeColor: '#000000', |
||||
fillColor: '#ffffff', |
||||
fillOpacity: 1, |
||||
center: paths[i], |
||||
radius: 15, |
||||
map: map, |
||||
clickable: true |
||||
}) |
||||
) |
||||
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) |
||||
} |
||||
|
||||
setDragCircle(dragCircle); |
||||
} |
||||
|
||||
if (areas.areaType && areas.areaType === 'CIRCLE') { |
||||
//circle 생성
|
||||
if(pastCircle) { |
||||
// pastCircle.setMap(null);
|
||||
console.log(pastCircle) |
||||
pastCircle.forEach(prev => prev.setMap(null)); |
||||
} |
||||
if(circle) { |
||||
circle.setMap(null); |
||||
} |
||||
// radiusline = new naver.maps.Polyline({
|
||||
// strokeStyle: [4, 4],
|
||||
// strokeOpacity: 0.6,
|
||||
// path: [coord],
|
||||
// map: map
|
||||
// })
|
||||
circle = new naver.maps.Circle({ |
||||
strokeColor: '#283046', |
||||
strokeOpacity: 1, |
||||
// fillColor: '#ff0000',
|
||||
fillColor: '#7367F0', |
||||
fillOpacity: 0.1, |
||||
center: paths[0], |
||||
radius: areas.bufferZone, |
||||
map: map, |
||||
clickable: true |
||||
}); |
||||
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) |
||||
|
||||
setCircle([circle]); |
||||
} |
||||
} |
||||
} |
||||
|
||||
const addMileStone = (coord, text, css) => { |
||||
if(distanceMarker) distanceMarker = []; |
||||
|
||||
let content; |
||||
if(text == 'Start') { |
||||
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>' |
||||
} else { |
||||
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>'+ text +'</span></div>' |
||||
} |
||||
|
||||
var _ms = new naver.maps.Marker({ |
||||
position: coord, |
||||
icon: { |
||||
content: content, |
||||
anchor: new naver.maps.Point(-5, -5) |
||||
}, |
||||
map: map |
||||
}); |
||||
|
||||
var msElement = $(_ms.getElement()); |
||||
|
||||
if(css) { |
||||
msElement.css(css); |
||||
} else { |
||||
msElement.css('font-size', '13px'); |
||||
} |
||||
|
||||
distanceMarker.push(_ms); |
||||
setMarker(prev => ([...prev, _ms])) |
||||
} |
||||
|
||||
const fromMetersToText = (meters) => { |
||||
meters = meters || 0; |
||||
|
||||
var km = 1000, |
||||
text = meters; |
||||
|
||||
if(meters >= km) { |
||||
text = parseFloat((meters / km).toFixed(1)) + 'km'; |
||||
} else { |
||||
text = parseFloat(meters.toFixed(1)) + 'm'; |
||||
} |
||||
return text; |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
</> |
||||
); |
||||
}; |
||||
@ -0,0 +1,652 @@
|
||||
import $ from 'jquery'; |
||||
import '../../../../assets/css/custom.css';
|
||||
import { CustomInput } from 'reactstrap'; |
||||
|
||||
import buffer from '@turf/buffer' |
||||
|
||||
export const FlightPlanDraw = props => { |
||||
const {naver} = props; |
||||
const {map} = props; |
||||
|
||||
|
||||
var Measure = function(buttons) { |
||||
this.$btnLine = buttons.line; |
||||
this.$btnPolygon = buttons.polygon; |
||||
this.$btnCircle = buttons.circle; |
||||
this.$btnRectangle = buttons.rectangle; |
||||
|
||||
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(); |
||||
} if (mode === 'rectangle') { |
||||
this._startRectangle(); |
||||
} |
||||
}, |
||||
|
||||
_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)) |
||||
]; |
||||
}, |
||||
|
||||
_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; |
||||
|
||||
$(document).off('mousemove.measure'); |
||||
|
||||
if (this._guideline) { |
||||
this._guideline.setMap(null); |
||||
delete this._guideline; |
||||
} |
||||
|
||||
if (this._polyline) { |
||||
// console.log(this._polyline.getPath()._array, 'path')
|
||||
let polypaths = this._polyline.getPath()._array; |
||||
|
||||
//파싱
|
||||
let polypathJSON = new Array(); |
||||
for(let i = 0; i< polypaths.length; i++) { |
||||
|
||||
//파싱
|
||||
let obj = new Object(); |
||||
|
||||
obj.x = '' + polypaths[i]._lng + ''; |
||||
obj.y = '' + polypaths[i]._lat + ''; |
||||
|
||||
obj = JSON.stringify(obj); |
||||
polypathJSON.push(JSON.parse(obj));
|
||||
} |
||||
console.log(polypathJSON, 'json polyline path') |
||||
|
||||
|
||||
//버퍼 생성에 필요한 coordinates 배열 변환
|
||||
let lineStringPaths = []; |
||||
for(let i = 0; i < this._polyline.getPath().length; i++) { |
||||
lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]); |
||||
} |
||||
console.log(lineStringPaths, 'polyline path') |
||||
|
||||
//버퍼 생성을 위한 line 객체
|
||||
const originalGeojson = { |
||||
type: "FeatureCollection", |
||||
features: [ |
||||
{ |
||||
type: "Feature", |
||||
properties: {}, |
||||
geometry: { |
||||
type: "LineString", |
||||
coordinates: lineStringPaths |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
console.log(originalGeojson) |
||||
|
||||
//버퍼 객체
|
||||
const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); |
||||
|
||||
//버퍼 라인 생성
|
||||
let bufferPath = bufferObj.features[0].geometry.coordinates[0]; |
||||
console.log(bufferPath, 'buffer path') |
||||
|
||||
this.bufferPolyline = new naver.maps.Polyline({ |
||||
strokeColor: '#ff0000', |
||||
strokeWeight: 2, |
||||
strokeStyle: [4, 4], |
||||
strokeOpacity: 0.6, |
||||
path : bufferPath, |
||||
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; |
||||
}, |
||||
|
||||
_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; |
||||
|
||||
if (mode === 'line') { |
||||
this._finishDistance(); |
||||
} if (mode === 'polygon') { |
||||
this._finishArea(); |
||||
} if (mode === 'circle') { |
||||
this._finishCircle(); |
||||
} if (mode === 'rectangle') { |
||||
this._finishRectangle(); |
||||
} |
||||
}, |
||||
|
||||
_fromMetersToText: function(meters) { |
||||
meters = meters || 0; |
||||
|
||||
var km = 1000, |
||||
text = meters; |
||||
|
||||
if(meters >= km) { |
||||
text = parseFloat((meters / km).toFixed(1)) + 'km'; |
||||
} else { |
||||
text = parseFloat(meters.toFixed(1)) + 'm'; |
||||
} |
||||
|
||||
return text; |
||||
}, |
||||
|
||||
_addMileStone: function(coord, text, css) { |
||||
if(!this._ms) this._ms = []; |
||||
|
||||
let content; |
||||
if(text == 'Start') { |
||||
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>' |
||||
} else { |
||||
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>'+ text +'</span></div>' |
||||
} |
||||
|
||||
var ms = new naver.maps.Marker({ |
||||
position: coord, |
||||
icon: { |
||||
content: content, |
||||
anchor: new naver.maps.Point(-5, -5) |
||||
}, |
||||
map: this.map |
||||
}); |
||||
|
||||
var msElement = $(ms.getElement()); |
||||
|
||||
if(css) { |
||||
msElement.css(css); |
||||
} else { |
||||
msElement.css('font-size', '13px'); |
||||
} |
||||
|
||||
this._ms.push(ms); |
||||
}, |
||||
|
||||
_onClickDistance: function(e) { |
||||
console.log('onClickDistance') |
||||
var map = this.map, |
||||
coord = e.coord; |
||||
|
||||
if (!this._polyline) { |
||||
// 임시로 보여줄 점선 폴리라인을 생성합니다.
|
||||
this._guideline = new naver.maps.Polyline({ |
||||
strokeColor: '#0000ff', |
||||
strokeWeight: 3, |
||||
strokeStyle: [4, 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))); |
||||
|
||||
// 실제 거리재기에 사용되는 폴리라인을 생성합니다.
|
||||
this._polyline = new naver.maps.Polyline({ |
||||
strokeLineCap: 'round', |
||||
strokeLineJoin: 'round', |
||||
strokeColor: '#0000ff', |
||||
strokeWeight: 3, |
||||
strokeOpacity: 0.6, |
||||
path: [coord], |
||||
map: map |
||||
}); |
||||
|
||||
this._lastDistance = this._polyline.getDistance(); |
||||
this._addMileStone(coord, 'Start'); |
||||
|
||||
} else { |
||||
this._guideline.setPath([e.coord]); |
||||
this._polyline.getPath().push(coord); |
||||
|
||||
var distance = this._polyline.getDistance(); |
||||
this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); |
||||
this._lastDistance = distance; |
||||
} |
||||
}, |
||||
|
||||
_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(); |
||||
|
||||
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({ |
||||
strokeOpacity: 0.8, |
||||
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({ |
||||
strokeStyle: [4, 4], |
||||
strokeOpacity: 0.6, |
||||
path: [coord], |
||||
map: map |
||||
}); |
||||
this._lastDistance = this._radius.getDistance(); |
||||
|
||||
// 임시로 보여줄 원형
|
||||
this._guidecircle = new naver.maps.Circle({ |
||||
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({ |
||||
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); |
||||
}, |
||||
|
||||
_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') |
||||
}, |
||||
|
||||
_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')); |
||||
this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle')); |
||||
|
||||
}, |
||||
|
||||
_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 === 'rectangle') { |
||||
if(this._rectangle) { |
||||
this._rectangle.setMap(null); |
||||
delete this._rectangle; |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// id랑 매치시켜서 옵션 지정함
|
||||
var measures = new Measure({ |
||||
line: $('#line'), |
||||
polygon: $('#polygon'), |
||||
circle: $('#circle'), |
||||
rectangle: $('#rectangle') |
||||
}); |
||||
|
||||
measures.setMap(map); |
||||
|
||||
return( |
||||
<> |
||||
<div style={{ position: 'relative' }}> |
||||
<ul className="measure-control"> |
||||
<li> |
||||
<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' |
||||
/> |
||||
<CustomInput |
||||
id='rectangle' |
||||
type='image' |
||||
className='control-btn' |
||||
src='http://static.naver.net/maps/mantle/drawing/1x/rectangle.png' |
||||
/> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue