map 거리측정 초기설정

src/components/map/MapControl.js

@@ -1,5 +1,5 @@
 import MapBoxMap from './mapbox/MapBoxMap';
 
-export const MapControl = props => {
+export const MapControl = ({ handlerDrawObjInit }) => {
-  return <MapBoxMap />;
+  return <MapBoxMap handlerDrawObjInit={handlerDrawObj} />;
 };

src/components/map/mapbox/MapBoxMap.js

@@ -19,14 +19,13 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
 import mapboxgl from 'mapbox-gl';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
+import threebox from 'threebox-plugin';
 
 import { DronToast } from './dron/DronToast';
 import { DronMarker } from './dron/DronMarker';
 import { DronPlan } from './dron/DronPlan';
 import FeatureAirZone from './feature/FeatureAirZone';
 
-import threebox from 'threebox-plugin';
-
 // v월드 공역
 import { airArea } from '../geojson/_AirArea';
 
@@ -38,7 +37,7 @@ import gimPoGrid from '../../../components/map/geojson/airportAirArea.json';
 import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json';
 
 import { clientMapInit } from '@src/redux/features/control/map/mapSlice';
-import axios from '@src/utility/customAxiosUtil';
+import { getDraw } from '@src/utility/MapUtils';
 
 let gridCoords = [];
 let altitudeMarker = [];
@@ -82,7 +81,7 @@ let linerAltitude = [
 ];
 let linerAltitudeMarker = [];
 
-export default function MapBoxMap() {
+export default function MapBoxMap({ handlerDrawObjInit }) {
   const dispatch = useDispatch();
   // 공역표출 타입
   const mapState = useSelector(state => state.mapState);
@@ -329,7 +328,8 @@ export default function MapBoxMap() {
     map.addControl(language);
     // 거리 축적
     map.addControl(new mapboxgl.ScaleControl());
-
+    const drawObj = getDraw();
+    map.addControl(drawObj);
     // 드래그 제한 2d
     // map.dragRotate.disable();
 
@@ -566,7 +566,7 @@ export default function MapBoxMap() {
 
       setMapLoaded(true);
     });
-
+    handlerDrawObjInit(drawObj);
     setMapObject(map);
     dispatch(clientMapInit(map));
   };

src/containers/flight/OperationApprovalsContainer.js

@@ -8,11 +8,15 @@ import {
   flightlayerWayPoint,
   flightlayerPolyline,
   flightlayerPolygon,
-  flightlayerBuffer
+  flightlayerBuffer,
+  handlerStartMode
 } from '../../utility/MapUtils';
 import { useHistory } from 'react-router-dom';
 import useMapType from '@hooks/useMapType';
-import { clientSaveAreaCoordinateList } from '@src/redux/features/laanc/laancSlice';
+import {
+  clientSaveAreaCoordinateList,
+  clientChangeDrawType
+} from '@src/redux/features/laanc/laancSlice';
 import { MapControl } from '../../components/map/MapControl';
 import { clientSetIsMapLoading } from '@src/redux/features/laanc/laancSlice';
 import { clientMapInit } from '@src/redux/features/control/map/mapSlice';
@@ -45,7 +49,7 @@ export default function OperationApprovalsContainer({ mode }) {
   const [selected, setSelected] = useState(null);
   const [isMapLoading, setIsMapLoading] = useState(false);
   // 비행구역 그리기
-
+  const [drawObj, setDrawObj] = useState();
   const [filter, setFilter] = useState('');
 
   // 지도
@@ -410,6 +414,20 @@ export default function OperationApprovalsContainer({ mode }) {
     });
   };
 
+  const handlerDrawTypeChange = val => {
+    dispatch(clientChangeDrawType(val));
+    handlerStartMode(val, drawObj);
+  };
+
+  const handlerDrawObjInit = obj => {
+    setDrawObj(obj);
+  };
+
+  const handlerMapTypeChange = val => {
+    dispatch(clientChangeDrawType(''));
+    setMapType(val);
+  };
+
   const handlerLogout = async () => {
     const { payload } = await dispatch(setLogout());
 
@@ -643,19 +661,19 @@ export default function OperationApprovalsContainer({ mode }) {
                   <ButtonGroup>
                     <Button
                       color={mapType === 'TERRAIN' ? 'primary' : ''}
-                      onClick={e => setMapType('TERRAIN')}
+                      onClick={() => handlerMapTypeChange('TERRAIN')}
                     >
                       지형지도
                     </Button>
                     <Button
                       color={mapType === 'SATELLITE' ? 'primary' : ''}
-                      onClick={e => setMapType('SATELLITE')}
+                      onClick={() => handlerMapTypeChange('SATELLITE')}
                     >
                       위성지도
                     </Button>
                     <Button
                       color={mapType === '2D' ? 'primary' : ''}
-                      onClick={e => setMapType('2D')}
+                      onClick={() => handlerMapTypeChange('2D')}
                     >
                       2D
                     </Button>
@@ -666,15 +684,29 @@ export default function OperationApprovalsContainer({ mode }) {
                 <h4>거리측정</h4>
                 <div className='map-btn'>
                   <ButtonGroup>
-                    <Button primary>직선</Button>
+                    <Button
-                    <Button primary>다각형</Button>
+                      color={drawType === 'LINE' ? 'primary' : ''}
+                      onClick={() => {
+                        handlerDrawTypeChange('LINE');
+                      }}
+                    >
+                      직선
+                    </Button>
+                    <Button
+                      color={drawType === 'POLYGON' ? 'primary' : ''}
+                      onClick={() => {
+                        handlerDrawTypeChange('POLYGON');
+                      }}
+                    >
+                      다각형
+                    </Button>
                   </ButtonGroup>
                 </div>
               </div>
             </Card>
           </div>
         </div>
-        <MapControl />
+        <MapControl handlerDrawObjInit={handlerDrawObjInit} />
       </div>
       <div className='left-menu'>
         <h1 className='logo'>

src/utility/MapUtils.js

@@ -566,3 +566,17 @@ export const getDraw = () =>
       }
     ]
   });
+
+/**
+ * 그리기모드 셋팅
+ * @param {'LINE' | 'POLYGON' | 'CIRCLE'} mode custom 타입
+ */
+export const handlerStartMode = (mode, drawObj) => {
+  if (mode === 'LINE') {
+    drawObj.changeMode('draw_line_string');
+  } else if (mode === 'POLYGON') {
+    drawObj.changeMode('draw_polygon');
+  } else if (mode === 'CIRCLE') {
+    drawObj.changeMode('draw_circle', { initialRadiusInKm: 100 / 1000 });
+  }
+};