Merge branch 'master' of http://gitea.palntour.com/pav/pav-home

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: '<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');
@@ -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',
+            strokeStyle: [2, 3],
-            // fillOpacity: 0.1,
             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: '<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)
+                }, 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: '<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);
       }
 
       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: '<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)
+                },
+                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: '<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)
+                },
+                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: '<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);
       }
       
+
       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: '<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]);
       }
     }
   }
 
-  const addMileStone = (coord, text, css) => {
+  //div로 보여주기
-    if(distanceMarker) distanceMarker = [];
+  const addMileStone = (coord, text) => {
-  
     let content;
     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>'
     } else {
-      content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><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>'
     }
   
-    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) {
+    if(circle) {
-      msElement.css(css);
+      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;