junh_eee
2 years ago
2 changed files with 958 additions and 97 deletions
@ -0,0 +1,913 @@ |
|||||||
|
import $ from 'jquery'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; |
||||||
|
import { InfoModal } from '../../../modal/InfoModal'; |
||||||
|
|
||||||
|
export const FlightPlanDraw = props => { |
||||||
|
const dispatch = useDispatch(); |
||||||
|
const mapControl = useSelector(state => state.controlMapReducer); |
||||||
|
|
||||||
|
const [pastPolyline, setPolyline] = useState(); |
||||||
|
const [pastBuffer, setBuffer] = useState(); |
||||||
|
const [pastPolygon, setPolygon] = useState(); |
||||||
|
const [pastCircle, setCircle] = useState([]); |
||||||
|
const [pastDragCircle, setDragCircle] = useState([]); |
||||||
|
|
||||||
|
const [pastClickEve, setClickEve] = useState(); |
||||||
|
const [pastMarker, setMarker] = useState([]); |
||||||
|
|
||||||
|
const [figure, setFigure] = useState(); |
||||||
|
|
||||||
|
const [areaDetail, setAreaDetail] = useState(); |
||||||
|
|
||||||
|
const [alertModal, setAlertModal] = useState({ |
||||||
|
isOpen: false, |
||||||
|
title: '', |
||||||
|
desc: '' |
||||||
|
}) |
||||||
|
|
||||||
|
const naver = props.naver; |
||||||
|
const map = props.map; |
||||||
|
let mode = props.mode; |
||||||
|
let dragCircleSize = props.dragCircleSize; |
||||||
|
|
||||||
|
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 distanceMarker = []; |
||||||
|
|
||||||
|
const handleBufferList = () => { |
||||||
|
dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
drawInit(); |
||||||
|
}, [mapControl.drawType]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
handleDetailDraw(); |
||||||
|
}, [props.areaCoordList]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if(figure) { |
||||||
|
props.handleConfirm(props.areaCoordList); |
||||||
|
setAreaDetail(props.areaCoordList); |
||||||
|
} |
||||||
|
}, [figure]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if(pastPolyline) { |
||||||
|
handleBufferList(); |
||||||
|
} |
||||||
|
}, [areaDetail]) |
||||||
|
|
||||||
|
const drawInit = () => { |
||||||
|
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.length != 0) { |
||||||
|
//console.log('clear circle ', pastCircle)
|
||||||
|
pastCircle.forEach(prev => prev.setMap(null)) |
||||||
|
naver.maps.Event.removeListener(pastClickEve); |
||||||
|
|
||||||
|
setCircle([]); |
||||||
|
} |
||||||
|
if (pastPolygon) { |
||||||
|
// console.log('clear polygon ', pastPolygon)
|
||||||
|
pastPolygon.setMap(null); |
||||||
|
pastDragCircle.forEach(c => c.setMap(null)); |
||||||
|
|
||||||
|
setPolygon(); |
||||||
|
setDragCircle([]); |
||||||
|
} |
||||||
|
if (pastMarker.length != 0) { |
||||||
|
// console.log('clear marker ', pastMarker)
|
||||||
|
pastMarker.forEach(m => m.setMap(null)) |
||||||
|
setMarker([]); |
||||||
|
} |
||||||
|
|
||||||
|
finishDraw(); |
||||||
|
props.handleInitCoordinates();
|
||||||
|
} |
||||||
|
|
||||||
|
const startMode = (mode) => { |
||||||
|
// console.log('startMode')
|
||||||
|
|
||||||
|
if (!mode) return; |
||||||
|
|
||||||
|
if(pastClickEve) { |
||||||
|
naver.maps.Event.removeListener(pastClickEve); |
||||||
|
} |
||||||
|
if (mode === 'LINE') { |
||||||
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) }); |
||||||
|
setClickEve(Eve.clickEve); |
||||||
|
} else if (mode === 'POLYGON') { |
||||||
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) }); |
||||||
|
setClickEve(Eve.clickEve); |
||||||
|
} else if (mode === 'CIRCLE') { |
||||||
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }); |
||||||
|
setClickEve(Eve.clickEve); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const removeListener = () => { |
||||||
|
// console.log('removeListener')
|
||||||
|
|
||||||
|
naver.maps.Event.removeListener(Eve.clickEve); |
||||||
|
naver.maps.Event.removeListener(pastClickEve); |
||||||
|
setClickEve(); |
||||||
|
|
||||||
|
naver.maps.Event.removeListener(Eve.mousedownEve); |
||||||
|
naver.maps.Event.removeListener(Eve.rightclickEve); |
||||||
|
if (!circle) $(document).off('mousemove.measure'); |
||||||
|
} |
||||||
|
|
||||||
|
const finishDraw = () => { |
||||||
|
//console.log('finishDraw')
|
||||||
|
removeListener(); |
||||||
|
|
||||||
|
if (polyline) { |
||||||
|
if (guideline) { |
||||||
|
guideline.setMap(null); |
||||||
|
guideline = ''; |
||||||
|
} |
||||||
|
|
||||||
|
let polypaths = polyline.getPath()._array; |
||||||
|
|
||||||
|
setMarker(distanceMarker) |
||||||
|
distanceMarker.forEach(c => c.setMap(null)) |
||||||
|
|
||||||
|
if (polypaths.length >= 2) { |
||||||
|
setPolyline(polyline); |
||||||
|
setAreaInfo(polypaths); |
||||||
|
} else { |
||||||
|
setAlertModal({ |
||||||
|
isOpen: true, |
||||||
|
title: '좌표 최소 개수', |
||||||
|
desc: '좌표를 두 개 점으로 이어주세요.' |
||||||
|
}) |
||||||
|
|
||||||
|
polyline.setMap(null); |
||||||
|
polyline = ''; |
||||||
|
} |
||||||
|
|
||||||
|
setFigure(polyline) |
||||||
|
|
||||||
|
} else if (polygon) { |
||||||
|
let path = polygon.getPath(); |
||||||
|
path.pop(); |
||||||
|
|
||||||
|
let polygonpaths = polygon.getPath()._array; |
||||||
|
|
||||||
|
//마지막 path와 시작점을 이어주는 라인 생성
|
||||||
|
lastDistance = guideline.getDistance(); |
||||||
|
guideline.getPath().push(polygonpaths[0]); |
||||||
|
var distance = guideline.getDistance(); |
||||||
|
// addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance));
|
||||||
|
|
||||||
|
setMarker(distanceMarker); |
||||||
|
distanceMarker.forEach(c => c.setMap(null)) |
||||||
|
|
||||||
|
if(polygonpaths.length >= 3) { |
||||||
|
setPolygon(polygon); |
||||||
|
setAreaInfo(polygonpaths); |
||||||
|
} else { |
||||||
|
setAlertModal({ |
||||||
|
isOpen: true, |
||||||
|
title: '좌표 최소 개수', |
||||||
|
desc: '좌표를 세 개 점으로 이어주세요.' |
||||||
|
}) |
||||||
|
polygon.setMap(null) |
||||||
|
polygon = ''; |
||||||
|
} |
||||||
|
|
||||||
|
setFigure(polygon) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onClickPolyline = (e) => { |
||||||
|
//console.log('onClickPolyline')
|
||||||
|
var coord = e.coord; |
||||||
|
|
||||||
|
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: 1, |
||||||
|
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));
|
||||||
|
addMileStone(polyline.getPath()._array, 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; |
||||||
|
// let guide;
|
||||||
|
|
||||||
|
if (!polygon) { |
||||||
|
polygon = new naver.maps.Polygon({ |
||||||
|
strokeColor: '#283046', |
||||||
|
strokeOpacity: 1, |
||||||
|
fillColor: '#7367F0', |
||||||
|
fillOpacity: 0.1, |
||||||
|
paths: [coord], |
||||||
|
map: map |
||||||
|
}); |
||||||
|
|
||||||
|
//거리재기를 위한 가이드
|
||||||
|
guideline = new naver.maps.Polyline({ |
||||||
|
path: [coord], |
||||||
|
map: map |
||||||
|
}); |
||||||
|
guideline.setVisible(false); |
||||||
|
|
||||||
|
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) |
||||||
|
$(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) }); |
||||||
|
|
||||||
|
lastDistance = guideline.getDistance(); |
||||||
|
addMileStone(coord, 'Start') |
||||||
|
} else { |
||||||
|
polygon.getPath().push(coord); |
||||||
|
guideline.getPath().push(coord); |
||||||
|
|
||||||
|
// console.log(polygon.getPath()._array, 'polygon')
|
||||||
|
// console.log(guideline.getPath()._array.length, 'guide')
|
||||||
|
// console.log(polygon.getPath()._array.length)
|
||||||
|
|
||||||
|
var distance = guideline.getDistance(); |
||||||
|
// addMileStone(coord, fromMetersToText(distance - lastDistance));
|
||||||
|
addMileStone(guideline.getPath()._array, fromMetersToText(distance - lastDistance)); |
||||||
|
lastDistance = distance; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
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); }) |
||||||
|
|
||||||
|
addMileStone(coord, fromMetersToText(100)); |
||||||
|
} else { |
||||||
|
circle.setCenter(coord); |
||||||
|
circle.setRadius(100); |
||||||
|
distanceMarker.setPosition(coord) |
||||||
|
} |
||||||
|
setCircle(prev => ([...prev, circle])) |
||||||
|
setAreaInfo(''); |
||||||
|
setMarker(distanceMarker); |
||||||
|
setFigure(circle.center); |
||||||
|
} |
||||||
|
|
||||||
|
const onMouseDownDrag = (index) => { |
||||||
|
// console.log('onMouseDownDrag')
|
||||||
|
|
||||||
|
map.setOptions({ |
||||||
|
draggable: false, |
||||||
|
pinchZoom: false, |
||||||
|
scrollWheel: false, |
||||||
|
keyboardShortcuts: false, |
||||||
|
disableDoubleTapZoom: true, |
||||||
|
disableDoubleClickZoom: true, |
||||||
|
disableTwoFingerTapZoom: true |
||||||
|
}) |
||||||
|
|
||||||
|
if(circle) { |
||||||
|
removeListener(); |
||||||
|
} |
||||||
|
|
||||||
|
$(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); |
||||||
|
$(document).on('mouseup.measure', function () { onMouseUpDrag(index) }); |
||||||
|
} |
||||||
|
|
||||||
|
const onMouseMoveDrag = (e, index) => { |
||||||
|
//console.log('onMouseMoveDrag')
|
||||||
|
|
||||||
|
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 center = circle.getCenter(), |
||||||
|
r = proj.getDistance(coord, center); |
||||||
|
|
||||||
|
circle.setRadius(r); |
||||||
|
} |
||||||
|
|
||||||
|
if (!circle) { |
||||||
|
dragCircle[index].setCenter(coord); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onMouseUpDrag = (index) => { |
||||||
|
// 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); |
||||||
|
setFigure(polyline); |
||||||
|
} |
||||||
|
|
||||||
|
if (polygon) { |
||||||
|
var path = polygon.getPath()._array; |
||||||
|
setPolygon(polygon); |
||||||
|
setAreaInfo(path); |
||||||
|
setFigure(polygon); |
||||||
|
|
||||||
|
// if(pastMarker.length !=0) {
|
||||||
|
// //마커 위치 변경
|
||||||
|
// pastMarker[index].setPosition(path[index]);
|
||||||
|
|
||||||
|
// //마커 content 변경
|
||||||
|
// if(index == 0) {
|
||||||
|
// //시작 지점 이동
|
||||||
|
// pastMarker[index].setIcon({
|
||||||
|
// content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ 'Start' +'</span></div>',
|
||||||
|
// anchor: new naver.maps.Point(-5, -5)
|
||||||
|
// })
|
||||||
|
// } else {
|
||||||
|
// let isLastIndex;
|
||||||
|
// if(pastMarker.length === index+1) {
|
||||||
|
// //종료 지점 이동(index 마커만 변경)
|
||||||
|
// isLastIndex = 1;
|
||||||
|
// } else {
|
||||||
|
// //사이 지점 이동(index+1 마커도 변경)
|
||||||
|
// isLastIndex = 2;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// for(let i = index; i < index+isLastIndex; i++) {
|
||||||
|
// var proj = map.getProjection(),
|
||||||
|
// r = proj.getDistance(pastMarker[i-1].position, pastMarker[i].position);
|
||||||
|
|
||||||
|
// let text = fromMetersToText(r);
|
||||||
|
// pastMarker[i].setIcon({
|
||||||
|
// content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>',
|
||||||
|
// anchor: new naver.maps.Point(-5, -5)
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
} |
||||||
|
|
||||||
|
$(document).off('mousemove.measure'); |
||||||
|
$(document).off('mouseup.measure'); |
||||||
|
|
||||||
|
if (circle) { |
||||||
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }) |
||||||
|
setClickEve(Eve.clickEve); |
||||||
|
|
||||||
|
setCircle(prev => ([...prev, circle])) |
||||||
|
setAreaInfo(''); |
||||||
|
setFigure(circle) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const setAreaInfo = (path) => { |
||||||
|
let bufferZone = 100; |
||||||
|
if(polygon) bufferZone = 0; |
||||||
|
|
||||||
|
areaInfo = { |
||||||
|
coordinates: [], |
||||||
|
bufferZone: bufferZone, |
||||||
|
}; |
||||||
|
|
||||||
|
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); |
||||||
|
} |
||||||
|
|
||||||
|
const onClickReset = () => { |
||||||
|
// console.log('onClickRest - ', mapControl.drawType);
|
||||||
|
if (mapControl.drawType === 'RESET') { |
||||||
|
clearMode('RESET'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleDetailDraw = () => { |
||||||
|
if (props.areaCoordList) { |
||||||
|
// console.log('handleDetailDraw')
|
||||||
|
|
||||||
|
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: 1, |
||||||
|
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: 17, |
||||||
|
// radius: dragCircleSize,
|
||||||
|
map: map, |
||||||
|
clickable: true |
||||||
|
}) |
||||||
|
) |
||||||
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
setDragCircle(dragCircle); |
||||||
|
|
||||||
|
//bufferline 생성
|
||||||
|
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); |
||||||
|
} |
||||||
|
|
||||||
|
bufferPolygon = new naver.maps.Polyline({ |
||||||
|
strokeColor: '#283046', |
||||||
|
strokeOpacity: 1, |
||||||
|
strokeStyle: [2, 3], |
||||||
|
path: bufferPaths, |
||||||
|
map: map |
||||||
|
}); |
||||||
|
setBuffer(bufferPolygon); |
||||||
|
} |
||||||
|
|
||||||
|
//marker 생성
|
||||||
|
if(pastMarker) { |
||||||
|
pastMarker.forEach(c => c.setMap(null)); |
||||||
|
} |
||||||
|
|
||||||
|
for(let i = 0; i < paths.length; i++) { |
||||||
|
if(i == 0) { |
||||||
|
distanceMarker.push( |
||||||
|
new naver.maps.Marker({ |
||||||
|
position: paths[i], |
||||||
|
icon: { |
||||||
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ 'Start' +'</span></div>', |
||||||
|
anchor: new naver.maps.Point(45, 35) |
||||||
|
}, map: map |
||||||
|
}) |
||||||
|
) |
||||||
|
} else { |
||||||
|
var proj = map.getProjection(), |
||||||
|
r = proj.getDistance(paths[i-1], paths[i]); |
||||||
|
|
||||||
|
let text = fromMetersToText(r);
|
||||||
|
|
||||||
|
let dis1 = paths[i-1] |
||||||
|
let dis2 = paths[i] |
||||||
|
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
||||||
|
|
||||||
|
distanceMarker.push( |
||||||
|
new naver.maps.Marker({ |
||||||
|
// position: paths[i],
|
||||||
|
position: midPoint, |
||||||
|
icon: { |
||||||
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
||||||
|
anchor: new naver.maps.Point(20, 35) |
||||||
|
}, map: map |
||||||
|
}) |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
setMarker(distanceMarker); |
||||||
|
} |
||||||
|
|
||||||
|
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, |
||||||
|
// radius: dragCircleSize,
|
||||||
|
map: map, |
||||||
|
clickable: true |
||||||
|
}) |
||||||
|
) |
||||||
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) |
||||||
|
} |
||||||
|
|
||||||
|
setDragCircle(dragCircle); |
||||||
|
|
||||||
|
|
||||||
|
//marker 생성
|
||||||
|
if(pastMarker) { |
||||||
|
pastMarker.forEach(c => c.setMap(null)) |
||||||
|
} |
||||||
|
|
||||||
|
for(let i = 0; i < paths.length+1; i++) { |
||||||
|
//start
|
||||||
|
if(i == 0) { |
||||||
|
distanceMarker.push( |
||||||
|
new naver.maps.Marker({ |
||||||
|
position: paths[0], |
||||||
|
icon: { |
||||||
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ 'Start' +'</span></div>', |
||||||
|
anchor: new naver.maps.Point(45, 35) |
||||||
|
}, |
||||||
|
map: map |
||||||
|
}) |
||||||
|
) |
||||||
|
//첫좌표이자 마지막 좌표
|
||||||
|
} else if(i == paths.length) { |
||||||
|
var proj = map.getProjection(), |
||||||
|
r = proj.getDistance(paths[0], paths[i-1]); |
||||||
|
|
||||||
|
let text = fromMetersToText(r); |
||||||
|
|
||||||
|
let dis1 = paths[0] |
||||||
|
let dis2 = paths[i-1] |
||||||
|
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
||||||
|
|
||||||
|
distanceMarker.push( |
||||||
|
new naver.maps.Marker({ |
||||||
|
// position: paths[0],
|
||||||
|
position: midPoint, |
||||||
|
icon: { |
||||||
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
||||||
|
anchor: new naver.maps.Point(0, 35) |
||||||
|
}, |
||||||
|
map: map |
||||||
|
}) |
||||||
|
) |
||||||
|
//그 외 나머지
|
||||||
|
} else { |
||||||
|
var proj = map.getProjection(), |
||||||
|
r = proj.getDistance(paths[i-1], paths[i]); |
||||||
|
|
||||||
|
let text = fromMetersToText(r);
|
||||||
|
|
||||||
|
let dis1 = paths[i-1] |
||||||
|
let dis2 = paths[i] |
||||||
|
let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
||||||
|
|
||||||
|
distanceMarker.push( |
||||||
|
new naver.maps.Marker({ |
||||||
|
// position: paths[i],
|
||||||
|
position: midPoint, |
||||||
|
icon: { |
||||||
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
||||||
|
anchor: new naver.maps.Point(20, 35) |
||||||
|
}, |
||||||
|
map: map |
||||||
|
}) |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setMarker(distanceMarker); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
if (areas.areaType && areas.areaType === 'CIRCLE') { |
||||||
|
//circle 생성
|
||||||
|
if(pastCircle) { |
||||||
|
pastCircle.forEach(prev => prev.setMap(null)); |
||||||
|
} |
||||||
|
|
||||||
|
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]); |
||||||
|
|
||||||
|
//marker 생성
|
||||||
|
if(pastMarker) { |
||||||
|
pastMarker.forEach(c => c.setMap(null)); |
||||||
|
} |
||||||
|
|
||||||
|
let text = fromMetersToText(areas.bufferZone); |
||||||
|
distanceMarker = new naver.maps.Marker({ |
||||||
|
position: paths[0], |
||||||
|
icon: { |
||||||
|
content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>', |
||||||
|
anchor: new naver.maps.Point(-5, -5) |
||||||
|
}, |
||||||
|
map: map |
||||||
|
}) |
||||||
|
setMarker([distanceMarker]); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//div로 보여주기
|
||||||
|
const addMileStone = (coord, text) => { |
||||||
|
let content; |
||||||
|
let midPoint; |
||||||
|
let anchor; |
||||||
|
if(text == 'Start') { |
||||||
|
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ text +'</span></div>' |
||||||
|
midPoint = coord |
||||||
|
anchor = new naver.maps.Point(45, 35) |
||||||
|
} else { |
||||||
|
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ text +'</span></div>' |
||||||
|
let dis1 = coord[coord.length-2]; |
||||||
|
let dis2 = coord[coord.length-1]; |
||||||
|
if(circle) { |
||||||
|
midPoint = coord |
||||||
|
} else { |
||||||
|
midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); |
||||||
|
} |
||||||
|
anchor = new naver.maps.Point(20, 35) |
||||||
|
} |
||||||
|
|
||||||
|
var marker = new naver.maps.Marker({ |
||||||
|
position: midPoint, |
||||||
|
icon: { |
||||||
|
content: content, |
||||||
|
anchor: anchor |
||||||
|
}, |
||||||
|
// map: map
|
||||||
|
}); |
||||||
|
// marker.setVisible(false)
|
||||||
|
|
||||||
|
|
||||||
|
if(circle) { |
||||||
|
distanceMarker = marker; |
||||||
|
} else { |
||||||
|
marker.setMap(map); |
||||||
|
distanceMarker.push(marker); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//거리 재기
|
||||||
|
const fromMetersToText = (meters) => { |
||||||
|
meters = meters || 0; |
||||||
|
|
||||||
|
var km = 1000, |
||||||
|
text = meters; |
||||||
|
|
||||||
|
text = parseFloat(meters.toFixed(1)) + 'm'; |
||||||
|
|
||||||
|
|
||||||
|
// if(meters >= km) {
|
||||||
|
// text = parseFloat((meters / km).toFixed(1)) + 'km';
|
||||||
|
// } else {
|
||||||
|
// text = parseFloat(meters.toFixed(1)) + 'm';
|
||||||
|
// }
|
||||||
|
return text; |
||||||
|
} |
||||||
|
|
||||||
|
return( |
||||||
|
<InfoModal modal={alertModal} setModal={setAlertModal} /> |
||||||
|
) |
||||||
|
}; |
Loading…
Reference in new issue