From af8d907cb07c5caf0ef233c52e6b2d3256ee2fd6 Mon Sep 17 00:00:00 2001 From: junh_eee Date: Wed, 31 Aug 2022 11:47:13 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20-=20?= =?UTF-8?q?=EB=A7=88=EC=BB=A4=20=EC=83=9D=EC=84=B1=20=EA=B0=84=EB=9E=B5?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/naver/draw/FlightPlanDraw.js | 142 +-- .../map/naver/draw/FlightPlanDraw_Test.js | 913 ++++++++++++++++++ 2 files changed, 958 insertions(+), 97 deletions(-) create mode 100644 src/components/map/naver/draw/FlightPlanDraw_Test.js diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js index 1958b48..9bcccd7 100644 --- a/src/components/map/naver/draw/FlightPlanDraw.js +++ b/src/components/map/naver/draw/FlightPlanDraw.js @@ -487,40 +487,6 @@ export const FlightPlanDraw = props => { setPolygon(polygon); setAreaInfo(path); setFigure(polygon); - - // if(pastMarker.length !=0) { - // //마커 위치 변경 - // pastMarker[index].setPosition(path[index]); - - // //마커 content 변경 - // if(index == 0) { - // //시작 지점 이동 - // pastMarker[index].setIcon({ - // content: '
'+ 'Start' +'
', - // 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: '
'+ text +'
', - // anchor: new naver.maps.Point(-5, -5) - // }) - // } - // } - // } } $(document).off('mousemove.measure'); @@ -584,6 +550,18 @@ export const FlightPlanDraw = props => { } } + const createMarker = (data) => { + distanceMarker.push( + new naver.maps.Marker({ + position: data.position, + icon: { + content: '
'+ data.content +'
', + anchor: data.anchor + }, map: map + }) + ) + } + const handleDetailDraw = () => { if (props.areaCoordList) { // console.log('handleDetailDraw') @@ -668,15 +646,13 @@ export const FlightPlanDraw = props => { for(let i = 0; i < paths.length; i++) { if(i == 0) { - distanceMarker.push( - new naver.maps.Marker({ - position: paths[i], - icon: { - content: '
'+ 'Start' +'
', - anchor: new naver.maps.Point(45, 35) - }, map: map - }) - ) + const data = {}; + data.position = paths[i]; + data.color = '#ff0000'; + data.content = 'Start'; + data.anchor = new naver.maps.Point(45, 35); + createMarker(data); + } else { var proj = map.getProjection(), r = proj.getDistance(paths[i-1], paths[i]); @@ -687,16 +663,12 @@ export const FlightPlanDraw = props => { 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: '
'+ text +'
', - anchor: new naver.maps.Point(20, 35) - }, map: map - }) - ) + const data = {}; + data.position = midPoint; + data.color = '#737373'; + data.content = text; + data.anchor = new naver.maps.Point(20, 35); + createMarker(data); } } setMarker(distanceMarker); @@ -748,16 +720,13 @@ export const FlightPlanDraw = props => { for(let i = 0; i < paths.length+1; i++) { //start if(i == 0) { - distanceMarker.push( - new naver.maps.Marker({ - position: paths[0], - icon: { - content: '
'+ 'Start' +'
', - anchor: new naver.maps.Point(45, 35) - }, - map: map - }) - ) + const data = {}; + data.position = paths[0]; + data.color = '#ff0000'; + data.content = 'Start'; + data.anchor = new naver.maps.Point(45, 35); + createMarker(data); + //첫좌표이자 마지막 좌표 } else if(i == paths.length) { var proj = map.getProjection(), @@ -769,17 +738,12 @@ export const FlightPlanDraw = props => { 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: '
'+ text +'
', - anchor: new naver.maps.Point(0, 35) - }, - map: map - }) - ) + const data = {}; + data.position = midPoint; + data.color = '#737373'; + data.content = text; + data.anchor = new naver.maps.Point(0, 35); + createMarker(data); //그 외 나머지 } else { var proj = map.getProjection(), @@ -791,17 +755,12 @@ export const FlightPlanDraw = props => { 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: '
'+ text +'
', - anchor: new naver.maps.Point(20, 35) - }, - map: map - }) - ) + const data = {}; + data.position = midPoint; + data.color = '#737373'; + data.content = text; + anchor: new naver.maps.Point(20, 35) + createMarker(data); } } @@ -892,18 +851,7 @@ export const FlightPlanDraw = props => { //거리 재기 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'; - // } + let text = parseFloat(meters.toFixed(1)) + 'm'; return text; } diff --git a/src/components/map/naver/draw/FlightPlanDraw_Test.js b/src/components/map/naver/draw/FlightPlanDraw_Test.js new file mode 100644 index 0000000..1958b48 --- /dev/null +++ b/src/components/map/naver/draw/FlightPlanDraw_Test.js @@ -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: '
'+ 'Start' +'
', + // 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: '
'+ text +'
', + // 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: '
'+ 'Start' +'
', + 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: '
'+ text +'
', + 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: '
'+ 'Start' +'
', + 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: '
'+ text +'
', + 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: '
'+ text +'
', + 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: '
'+ text +'
', + 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 = '
'+ text +'
' + midPoint = coord + anchor = new naver.maps.Point(45, 35) + } else { + content = '
'+ text +'
' + 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( + + ) +}; \ No newline at end of file