비행구역설정 - 거리재기 수정

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: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ 'Start' +'</span></div>',
-                  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: '<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)
@@ -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: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ 'Start' +'</span></div>',
+                  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)
+                  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: '<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(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: '<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)
+                  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 = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>'
+      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];
+      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
     });
@@ -833,13 +874,19 @@ export const FlightPlanDraw = props => {
     var km = 1000,
       text = meters;
 
-    if(meters >= km) {
+    text = parseFloat(meters.toFixed(1)) + 'm';
-      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(
+    <InfoModal modal={alertModal} setModal={setAlertModal} />
+  )
 };