From dd318874d91ef3d1ccf8d9cbb0e76b0245a4d418 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: Thu, 11 Aug 2022 14:50:52 +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=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/naver/draw/FlightPlanDraw.js | 95 ++++++++++++++----- 1 file changed, 71 insertions(+), 24 deletions(-) diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js index 5d36d0b4..99b7be97 100644 --- a/src/components/map/naver/draw/FlightPlanDraw.js +++ b/src/components/map/naver/draw/FlightPlanDraw.js @@ -2,6 +2,7 @@ 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(); @@ -20,6 +21,12 @@ export const FlightPlanDraw = props => { const [areaDetail, setAreaDetail] = useState(); + const [alertModal, setAlertModal] = useState({ + isOpen: false, + title: '', + desc: '' + }) + const naver = props.naver; const map = props.map; let mode = props.mode; @@ -188,6 +195,11 @@ export const FlightPlanDraw = props => { setPolyline(polyline); setAreaInfo(polypaths); } else { + setAlertModal({ + isOpen: true, + title: '우회 여부 확인', + desc: '좌표를 두 개 점으로 이어주세요.' + }) polyline.setMap(null); polyline = ''; } @@ -204,7 +216,7 @@ export const FlightPlanDraw = props => { lastDistance = guideline.getDistance(); guideline.getPath().push(polygonpaths[0]); var distance = guideline.getDistance(); - addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance)); + // addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance)); setMarker(distanceMarker); distanceMarker.forEach(c => c.setMap(null)) @@ -254,7 +266,8 @@ export const FlightPlanDraw = props => { polyline.getPath().push(coord); var distance = polyline.getDistance(); - addMileStone(coord, fromMetersToText(distance - lastDistance)); + // addMileStone(coord, fromMetersToText(distance - lastDistance)); + addMileStone(polyline.getPath()._array, fromMetersToText(distance - lastDistance)); lastDistance = distance; } } @@ -303,8 +316,13 @@ export const FlightPlanDraw = props => { 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(coord, fromMetersToText(distance - lastDistance)); + addMileStone(guideline.getPath()._array, fromMetersToText(distance - lastDistance)); lastDistance = distance; } } @@ -638,7 +656,7 @@ export const FlightPlanDraw = props => { position: paths[i], icon: { content: '
'+ 'Start' +'
', - anchor: new naver.maps.Point(-5, -5) + anchor: new naver.maps.Point(45, 35) }, map: map }) ) @@ -648,9 +666,14 @@ export const FlightPlanDraw = props => { 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: paths[i], + position: midPoint, icon: { content: '
'+ text +'
', anchor: new naver.maps.Point(-5, -5) @@ -705,48 +728,58 @@ 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[i], + position: paths[0], icon: { - content: '
'+ 'Start' +'
', - anchor: new naver.maps.Point(-5, -5) + 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: paths[0], + position: midPoint, icon: { content: '
'+ text +'
', - anchor: new naver.maps.Point(45, 35) + anchor: new naver.maps.Point(0, 35) }, map: map }) ) - } else if(i == paths.length-1) { - // let tt = new naver.maps.EPSG3857.getDistance(paths[i], paths[]) - + //그 외 나머지 } 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: paths[i], + position: midPoint, icon: { content: '
'+ text +'
', - anchor: new naver.maps.Point(-5, -5) + anchor: new naver.maps.Point(20, 35) }, map: map }) @@ -801,17 +834,25 @@ export const FlightPlanDraw = props => { //div로 보여주기 const addMileStone = (coord, text) => { let content; + let midPoint; + let anchor; if(text == 'Start') { - content = '
'+ text +'
' + 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]; + 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: coord, + position: midPoint, icon: { content: content, - anchor: new naver.maps.Point(-5, -5) + anchor: anchor }, // map: map }); @@ -832,14 +873,20 @@ export const FlightPlanDraw = props => { 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'; - } + // if(meters >= km) { + // text = parseFloat((meters / km).toFixed(1)) + 'km'; + // } else { + // text = parseFloat(meters.toFixed(1)) + 'm'; + // } return text; } - return null; + // return null; + return( + + ) }; \ No newline at end of file