diff --git a/src/components/map/MapControl.js b/src/components/map/MapControl.js index 1aa4318a..05c4f963 100644 --- a/src/components/map/MapControl.js +++ b/src/components/map/MapControl.js @@ -1,5 +1,5 @@ import MapBoxMap from './mapbox/MapBoxMap'; -export const MapControl = props => { - return ; +export const MapControl = ({ handlerDrawObjInit }) => { + return ; }; diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 3f11aa50..dbc6927c 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/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)); }; diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index 41b53250..9edd49c2 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/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 }) { @@ -666,15 +684,29 @@ export default function OperationApprovalsContainer({ mode }) {

거리측정

- - + +
- +

diff --git a/src/utility/MapUtils.js b/src/utility/MapUtils.js index 203287e9..f61faec3 100644 --- a/src/utility/MapUtils.js +++ b/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 }); + } +};