From 0201ad9c8057724821634e3fe3dc9f0701827bbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Fri, 5 Aug 2022 18:54:11 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20-=20=EA=B1=B0=EB=A6=AC=EC=9E=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/naver/draw/FlightPlanDraw.js | 244 ++++++++++++++---- 1 file changed, 200 insertions(+), 44 deletions(-) diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js index 7d5a967c..90568607 100644 --- a/src/components/map/naver/draw/FlightPlanDraw.js +++ b/src/components/map/naver/draw/FlightPlanDraw.js @@ -69,7 +69,6 @@ export const FlightPlanDraw = props => { console.log(">>>>>>>>>>>>>>>>>>>>") handleBufferList(); } - }, [areaDetail]) const drawInit = () => { @@ -130,7 +129,8 @@ export const FlightPlanDraw = props => { } if (pastMarker.length != 0) { console.log('clear marker ', pastMarker) - pastMarker.forEach(m => m.setMap(null)); + pastMarker.forEach(m => m.setMap(null)) + setMarker([]); } finishDraw(); @@ -181,11 +181,14 @@ export const FlightPlanDraw = props => { let polypaths = polyline.getPath()._array; + setMarker(distanceMarker) + distanceMarker.forEach(c => c.setMap(null)) + if (polypaths.length >= 2) { setPolyline(polyline); setAreaInfo(polypaths); } else { - polyline.setMap(null); + // polyline.setMap(null); polyline = ''; } @@ -198,6 +201,15 @@ export const FlightPlanDraw = props => { 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)) + setPolygon(polygon); setAreaInfo(polygonpaths); @@ -219,7 +231,7 @@ export const FlightPlanDraw = props => { path: [coord], map: map }); - lastDistance = guideline.getDistance(); + // lastDistance = guideline.getDistance(); //실제 사용되는 라인 polyline = new naver.maps.Polyline({ @@ -227,7 +239,7 @@ export const FlightPlanDraw = props => { strokeLineJoin: 'round', // strokeColor: '#283046', strokeColor: '#ff0000', - strokeWeight: 3, + // strokeWeight: 3, strokeOpacity: 1, path: [coord], map: map @@ -264,6 +276,7 @@ export const FlightPlanDraw = props => { const onClickPolygon = (e) => { console.log('onClickPolygon') var coord = e.coord; + // let guide; if (!polygon) { polygon = new naver.maps.Polygon({ @@ -275,10 +288,25 @@ export const FlightPlanDraw = props => { 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); + + var distance = guideline.getDistance(); + addMileStone(coord, fromMetersToText(distance - lastDistance)); + lastDistance = distance; } } @@ -306,7 +334,7 @@ export const FlightPlanDraw = props => { strokeStyle: [4, 4], strokeOpacity: 0.6, path: [coord], - map: map + // map: map }) lastDistance = radiusline.getDistance(); @@ -317,18 +345,22 @@ export const FlightPlanDraw = props => { fillOpacity: 0.1, center: coord, radius: 100, - // map: map, + 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(''); - setFigure(circle.center) + setMarker(distanceMarker); + setFigure(circle.center); } const onMouseDownDrag = (index) => { @@ -349,7 +381,7 @@ export const FlightPlanDraw = props => { } $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); - $(document).on('mouseup.measure', function () { onMouseUpDrag() }); + $(document).on('mouseup.measure', function () { onMouseUpDrag(index) }); } const onMouseMoveDrag = (e, index) => { @@ -390,16 +422,9 @@ export const FlightPlanDraw = props => { 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); } @@ -408,7 +433,7 @@ export const FlightPlanDraw = props => { } } - const onMouseUpDrag = () => { + const onMouseUpDrag = (index) => { console.log('onMouseUpDrag') map.setOptions({ @@ -433,6 +458,40 @@ 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'); @@ -495,7 +554,7 @@ export const FlightPlanDraw = props => { const handleDetailDraw = () => { if (props.areaCoordList) { - // console.log('handleDetailDraw') + console.log('handleDetailDraw') const areas = props.areaCoordList[0]; @@ -516,7 +575,7 @@ export const FlightPlanDraw = props => { strokeLineCap: 'round', strokeLineJoin: 'round', strokeColor: '#283046', - strokeWeight: 3, + strokeWeight: 1, strokeOpacity: 1, path: paths, map: map @@ -543,6 +602,7 @@ export const FlightPlanDraw = props => { setDragCircle(dragCircle); + //bufferline 생성 if (areas.bufferCoordList) { const bufferPaths = []; @@ -557,19 +617,50 @@ export const FlightPlanDraw = props => { pastBuffer.setMap(null); } - // console.log(bufferPaths) - //bufferline 생성 bufferPolygon = new naver.maps.Polyline({ strokeColor: '#283046', strokeOpacity: 1, - // fillColor: '#7367F0', - // fillOpacity: 0.1, + strokeStyle: [2, 3], path: bufferPaths, map: map }); - // console.log(bufferPolygon); 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(-5, -5) + }, map: map + }) + ) + } else { + var proj = map.getProjection(), + r = proj.getDistance(paths[i-1], paths[i]); + + let text = fromMetersToText(r); + + distanceMarker.push( + new naver.maps.Marker({ + position: paths[i], + icon: { + content: '
'+ text +'
', + anchor: new naver.maps.Point(-5, -5) + }, map: map + }) + ) + } + } + setMarker(distanceMarker); } if (areas.areaType && areas.areaType === 'POLYGON') { @@ -607,19 +698,70 @@ export const FlightPlanDraw = props => { } setDragCircle(dragCircle); + + + //marker 생성 + if(pastMarker) { + pastMarker.forEach(c => c.setMap(null)) + } + + for(let i = 0; i < paths.length+1; i++) { + if(i == 0) { + distanceMarker.push( + new naver.maps.Marker({ + position: paths[i], + icon: { + content: '
'+ 'Start' +'
', + anchor: new naver.maps.Point(-5, -5) + }, + map: map + }) + ) + } else if(i == paths.length) { + var proj = map.getProjection(), + r = proj.getDistance(paths[0], paths[i-1]); + + let text = fromMetersToText(r); + + distanceMarker.push( + new naver.maps.Marker({ + position: paths[0], + icon: { + content: '
'+ text +'
', + 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); + + distanceMarker.push( + new naver.maps.Marker({ + position: paths[i], + icon: { + content: '
'+ text +'
', + anchor: new naver.maps.Point(-5, -5) + }, + map: map + }) + ) + } + } + + setMarker(distanceMarker); } + if (areas.areaType && areas.areaType === 'CIRCLE') { //circle 생성 if(pastCircle) { pastCircle.forEach(prev => prev.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, @@ -634,41 +776,55 @@ export const FlightPlanDraw = props => { 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]); } } } - const addMileStone = (coord, text, css) => { - if(distanceMarker) distanceMarker = []; - + //div로 보여주기 + const addMileStone = (coord, text) => { let content; if(text == 'Start') { content = '
'+ text +'
' } else { - content = '
'+ text +'
' + content = '
'+ text +'
' } - var _ms = new naver.maps.Marker({ + var marker = new naver.maps.Marker({ position: coord, icon: { content: content, anchor: new naver.maps.Point(-5, -5) }, - map: map + // map: map }); + // marker.setVisible(false) - var msElement = $(_ms.getElement()); - - if(css) { - msElement.css(css); + + if(circle) { + distanceMarker = marker; } else { - msElement.css('font-size', '13px'); + marker.setMap(map); + distanceMarker.push(marker); } - - distanceMarker.push(_ms); - setMarker(prev => ([...prev, _ms])) } + //거리 재기 const fromMetersToText = (meters) => { meters = meters || 0;