laanc 상세맵 작업중

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

@@ -12,6 +12,7 @@ export const LaancDrawControl = props => {
   const drawObj = props.drawObj;
   const mapObject = props.mapObject;
 
+  const [drawObjId, setDrawObjId] = useState();
   const [bufferId, setBufferId] = useState();
   const [geojson, setGeoJson] = useState();
 
@@ -27,7 +28,7 @@ export const LaancDrawControl = props => {
 
   useEffect(() => {
     if (mapObject) {
-      mapObject.on('draw.create', handlerCreateObj);
+      mapObject.on('draw.create', handlerSetId);
       mapObject.on('draw.update', handlerFormatAreaInfo);
 
       mapObject.on('click', handlerOnClick);
@@ -68,11 +69,12 @@ export const LaancDrawControl = props => {
   };
 
   // 도형 첫 생성하면 properties.id에 현재 drawType 넣어줌
-  const handlerCreateObj = e => {
+  const handlerSetId = e => {
     const id = e.features[0].id;
     const mode = handlerReturnMode(drawObj.getMode());
     if (mode) {
       drawObj.setFeatureProperty(id, 'id', mode);
+      setDrawObjId(id);
       handlerFormatAreaInfo(e);
     }
   };
@@ -137,8 +139,6 @@ export const LaancDrawControl = props => {
 
   const handlerPastDraw = () => {
     if (props.areaCoordList) {
-      console.log(props.areaCoordList[0], '>>>>areaCoordList---');
-
       const areas = props.areaCoordList[0];
       const paths = [];
       areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
@@ -147,8 +147,24 @@ export const LaancDrawControl = props => {
         console.log('pastDraw');
         const drawGeoJson = drawObj.getAll();
         if (areas.areaType === 'CIRCLE') {
+          console.log(paths, '>>>');
+          //   handlerCreateDrawObj(
+          //     drawObjId,
+          //     setDrawObjId,
+          //     'Polygon',
+          //     [paths],
+          //     'CIRCLE'
+          //   );
         } else {
           if (areas.areaType === 'LINE') {
+            handlerCreateDrawObj(
+              drawObjId,
+              setDrawObjId,
+              'LineString',
+              paths,
+              'LINE'
+            );
+
             // 버퍼 생성
             if (areas.bufferCoordList) {
               const bufferPaths = [];
@@ -157,17 +173,22 @@ export const LaancDrawControl = props => {
                 bufferPaths.push([bfCoord.lon, bfCoord.lat])
               );
 
-              const buffer = drawObj.get(bufferId);
-              if (buffer) drawObj.delete(bufferId);
-
-              const newBuffer = {
-                type: 'LineString',
-                coordinates: bufferPaths
-              };
-              const newBufferId = drawObj.add(newBuffer);
-              setBufferId(newBufferId);
+              handlerCreateDrawObj(
+                bufferId,
+                setBufferId,
+                'LineString',
+                bufferPaths,
+                'BUFFER'
+              );
             }
           } else if (areas.areaType === 'POLYGON') {
+            handlerCreateDrawObj(
+              drawObjId,
+              setDrawObjId,
+              'Polygon',
+              [paths],
+              'POLYGON'
+            );
           }
         }
         // 현재 그려진 도형 저장
@@ -180,6 +201,26 @@ export const LaancDrawControl = props => {
     }
   };
 
+  // 기존에 그려진 도형 지우고 새 도형 생성
+  const handlerCreateDrawObj = (id, setter, type, coord, propertyId) => {
+    const obj = drawObj.get(id);
+    if (obj) drawObj.delete(id);
+
+    const newObj = {
+      type: type,
+      coordinates: coord
+    };
+    const newObjId = drawObj.add(newObj);
+    drawObj.setFeatureProperty(newObjId[0], 'id', propertyId);
+    setter(newObjId[0]);
+
+    if (propertyId !== 'BUFFER') {
+      drawObj.changeMode('direct_select', {
+        featureId: newObjId[0]
+      });
+    }
+  };
+
   const handlerRemoveMarker = () => {
     const ele = document.getElementsByClassName('mapboxgl-popup');
     const eleArr = Array.from(ele);
@@ -198,6 +239,9 @@ export const LaancDrawControl = props => {
   };
 
   const handlerCreateAllMarker = coords => {
+    const areas = props.areaCoordList[0];
+
+    if (areas.areaType !== 'CIRCLE') {
       for (let i = 0; i < coords.length; i++) {
         if (i === 0) {
           handlerCreateOneMarker([0, -10], coords[i], 'Start');
@@ -207,11 +251,15 @@ export const LaancDrawControl = props => {
           handlerCreateOneMarker([0, 0], lngLat, text);
         }
       }
+    } else {
+      handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone);
+    }
   };
 
   const drawInit = () => {
     drawObj.deleteAll();
     handlerRemoveMarker();
+    setDrawObjId();
 
     props.handlerInitCoordinates();
 
@@ -229,7 +277,7 @@ export const LaancDrawControl = props => {
     } else if (mode === 'POLYGON') {
       drawObj.changeMode('draw_polygon');
     } else if (mode === 'CIRCLE') {
-      drawObj.changeMode('draw_circle');
+      drawObj.changeMode('draw_circle', { initialRadiusInKm: 100 / 1000 });
     }
   };
 

src/views/laanc/FlightArea.js

@@ -560,6 +560,22 @@ export default function FlightArea({
                 >
                   초기화
                 </Button>
+                <Button
+                  color='primary'
+                  onClick={() => {
+                    const drawObjCnt = drawObj
+                      .getAll()
+                      .features.filter(
+                        obj => obj.properties.id !== 'BUFFER'
+                      ).length;
+
+                    if (drawObjCnt > 2) {
+                      alert('구역은 2개까지만 설정 가능합니다.');
+                    }
+                  }}
+                >
+                  추가
+                </Button>
                 {wheather[0]?.coordList[0].lat != 0 ? (
                   <Button color='primary' onClick={handlerWeather}>
                     날씨 정보