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