laanc 그려진 도형에 맞추어 지도 센터 및 줌 설정

src/components/map/mapbox/draw/LanncDraw.js

@@ -75,6 +75,7 @@ export const LanncDraw = props => {
     //자세히보기 두번째에는 area가 사라져..! 왜?!
     //첫번째 열면 도형 그려진 다음에 areaCoordList가 사라짐 왜????
     //clearMode가 자동으로 실행돼서 props.handlerInitCoordinates도 실행되기 때문 ㅠㅠ 그래서 초기화 됨
+    //해결완료. 나중에 꼬일 때 까먹지 말라고 주석 삭제 안함
     if (area.areaType && area.areaType !== '') {
       if (props.centeredModal && detailLayer) handlerPastDraw();
     }
@@ -143,7 +144,6 @@ export const LanncDraw = props => {
     point = [];
 
     geojson.features = [];
-    // mapObject.getSource('detail').setData(geojson);
     handlerGetSourceSetData();
   };
 
@@ -168,7 +168,6 @@ export const LanncDraw = props => {
           props.handlerDrawType('RESET');
           // mapObject.on('click', clickEve);
         }
-        // mapObject.getSource('detail').setData(geojson);
         handlerGetSourceSetData();
       } else if (drawType === 'POLYGON') {
         if (path.length > 2) {
@@ -188,7 +187,6 @@ export const LanncDraw = props => {
         }
       }
       handlerGetSourceSetData();
-      // mapObject.getSource('detail').setData(geojson);
     }
   };
 
@@ -251,7 +249,6 @@ export const LanncDraw = props => {
       );
       addMileStone(formatCoord, '');
     }
-    // mapObject.getSource('detail').setData(geojson);
     handlerGetSourceSetData();
   };
 
@@ -264,7 +261,6 @@ export const LanncDraw = props => {
     }
     guideLine.geometry.coordinates.push(formatCoord);
 
-    // mapObject.getSource('detail').setData(geojson);
     handlerGetSourceSetData();
   };
 
@@ -285,7 +281,6 @@ export const LanncDraw = props => {
 
     // 이거.. 왜 안해도 잘 되지....?
     // handlerReplaceDuplicate('polygon', polygon);
-    // mapObject.getSource('detail').setData(geojson);
     handlerGetSourceSetData();
   };
 
@@ -306,7 +301,6 @@ export const LanncDraw = props => {
     handlerSaveAreaInfo('');
 
     addMileStone(formatCoord, 100);
-    // mapObject.getSource('detail').setData(geojson);
     handlerGetSourceSetData();
   };
 
@@ -366,7 +360,6 @@ export const LanncDraw = props => {
       });
     }
 
-    // mapObject.getSource('detail').setData(geojson);
     handlerGetSourceSetData();
   };
 
@@ -525,8 +518,7 @@ export const LanncDraw = props => {
         handlerRemoveMarker();
         handlerCreateAllMarker(paths);
 
-        // mapObject.getSource('detail').setData(geojson);
+        mapObject.setPaintProperty('waypoint', 'circle-radius', 8);
-        mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
         handlerGetSourceSetData();
       }
     }

src/utility/DrawUtil.js

@@ -1,4 +1,5 @@
 import * as turf from '@turf/turf';
+import mapboxgl from 'mapbox-gl';
 
 export const InitFeature = (type, id) => {
   return {
@@ -89,6 +90,23 @@ export const handlerCreatePoint = (coord, index, type) => {
   return wayPoint;
 };
 
+// 그려진 도형이 지도 전체화면에 보여지도록
+export const handlerFitBounds = (map, paths, padding, type) => {
+  const bounds = new mapboxgl.LngLatBounds(paths[0], paths[0]);
+
+  if (type !== 'CIRCLE') {
+    for (const coord of paths) {
+      bounds.extend(coord);
+    }
+  } else {
+    for (let i = 0; i < paths.length; i += 30) {
+      bounds.extend(paths[i]);
+    }
+  }
+
+  map.fitBounds(bounds, { padding: padding });
+};
+
 // draw 레이어
 export const layerWayPoint = source => {
   return {

src/views/laanc/FlightArea.js

@@ -16,6 +16,7 @@ import LaancAreaMap from './LaancAreaMap';
 import {
   InitFeature,
   handlerCreatePoint,
+  handlerFitBounds,
   handlerGetCircleCoord,
   layerBuffer,
   layerPolygon,
@@ -257,6 +258,8 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) {
 
       previewGeo.features = [];
 
+      let fitZoomPaths = [];
+
       if (areas.areaType) {
         if (areas.areaType === 'CIRCLE') {
           const radius = areas.bufferZone;
@@ -269,6 +272,8 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) {
           previewGeo.features.push(circle);
 
           mapObject.setCenter(circle.properties.center);
+
+          fitZoomPaths = circleCoords[0];
         } else {
           const lineString = InitFeature('LineString', 'polyline');
           const bufferPolyline = InitFeature('LineString', 'buffer');
@@ -289,26 +294,12 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) {
               bufferPolyline.geometry.coordinates = bufferPaths;
               previewGeo.features.push(bufferPolyline);
             }
-
-            const lineCoord = lineString.geometry.coordinates.concat();
-            lineCoord.push(lineString.geometry.coordinates[0]);
-
-            const obj = turf.polygon([lineCoord]);
-            const centerOfMass = turf.centerOfMass(obj);
-            mapObject.setCenter(centerOfMass.geometry.coordinates);
           } else if (areas.areaType === 'POLYGON') {
             polygon.geometry.coordinates = [paths];
             previewGeo.features.push(polygon);
-
-            const polygonCoord = polygon.geometry.coordinates[0].concat();
-            polygonCoord.push(polygon.geometry.coordinates[0][0]);
-
-            const obj = turf.polygon([polygonCoord]);
-            const centerOfMass = turf.centerOfMass(obj);
-            mapObject.setCenter(centerOfMass.geometry.coordinates);
           }
 
-          //포인트 생성
+          // 포인트 생성
           paths.forEach((p, i) => {
             const wayPoint = handlerCreatePoint(p, i, areas.areaType);
             point.push(wayPoint);
@@ -318,11 +309,16 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) {
           );
           point.forEach(p => previewGeo.features.push(p));
 
-          //마커 삭제
+          //지도 줌 좌표 설정
+          fitZoomPaths = paths.concat();
+
+          // 마커 삭제
           // const ele = document.getElementById('mapboxgl-popup');
           // const eleArr = Array.from(ele);
           // eleArr?.forEach(marker => marker.remove());
         }
+        handlerFitBounds(mapObject, fitZoomPaths, 50, areas.areaType);
+
         mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
         mapObject.getSource('preview').setData(previewGeo);
       }

src/views/laanc/LaancAreaMap.js

@@ -26,6 +26,9 @@ import {
   mapInitAction
 } from '../../modules/control/map/actions/controlMapActions';
 import {
+  FormattingCoord,
+  handlerFitBounds,
+  handlerGetCircleCoord,
   layerBuffer,
   layerGuideLine,
   layerPolygon,
@@ -76,10 +79,28 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
         areaCoordList[0].coordList[0]?.lon !== 0
       ) {
         if (number === 0) {
-          mapObject.setCenter([
+          // 지도 줌 설정
-            areaCoordList[0].coordList[0].lon,
+          let paths = [];
-            areaCoordList[0].coordList[0].lat
+          const areas = areaCoordList[0];
-          ]);
+
+          areaCoordList[0].coordList.forEach(coord =>
+            paths.push([coord.lon, coord.lat])
+          );
+
+          if (areas.areaType === 'CIRCLE') {
+            const formatting = FormattingCoord([paths[0][0], paths[0][1]]);
+            const circleCoord = handlerGetCircleCoord(
+              formatting,
+              areas.bufferZone
+            );
+            paths = circleCoord[0];
+          }
+          handlerFitBounds(mapObject, paths, 100, areas.areaType);
+
+          // mapObject.setCenter([
+          //   areaCoordList[0].coordList[0].lon,
+          //   areaCoordList[0].coordList[0].lat
+          // ]);
           setNumber(number + 1);
         }
       }