diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index 98791e93..68d5fe5c 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -100,8 +100,10 @@ export default function MapBoxMap() { // 지도 초기 셋팅 useLayoutEffect(() => { - mapBoxMapInit(); - }, []); + if (mapState.mapType === 'TERRAIN' || mapState.mapType === 'SATELLITE') { + mapBoxMapInit(); + } + }, [mapState.mapType]); // 공역 표출 정보에 따른 공역 변경 useEffect(() => { @@ -299,7 +301,7 @@ export default function MapBoxMap() { const map = new mapboxgl.Map({ container: 'map', // container ID - style: 'mapbox://styles/mapbox/streets-v12', // style URL + style: mapState.mapStyleUrl, // style URL center: [127.85101412107547, 37.520357], // starting position [lng, lat] zoom: 8.5, // starting zoom antialias: true, diff --git a/src/containers/flight/NewFlightApprovalsContainer.js b/src/containers/flight/NewFlightApprovalsContainer.js index 094f19c8..234fcc80 100644 --- a/src/containers/flight/NewFlightApprovalsContainer.js +++ b/src/containers/flight/NewFlightApprovalsContainer.js @@ -23,8 +23,17 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk'; import logo from '../../assets/images/logo/kac_logo_ icon.svg'; import { AiOutlinePoweroff } from 'react-icons/ai'; import WebsocketClient from '../../components/websocket/WebsocketClient'; -import { Card, ButtonGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from '@component/ui'; -import { FiUsers, FiFileText } from "react-icons/fi"; +import { + Card, + ButtonGroup, + Button, + Modal, + ModalHeader, + ModalBody, + ModalFooter, + Table +} from '@component/ui'; +import { FiUsers, FiFileText } from 'react-icons/fi'; export default function NewFlightApprovalsContainer({ mode }) { const dispatch = useDispatch(); @@ -37,7 +46,7 @@ export default function NewFlightApprovalsContainer({ mode }) { const [filter, setFilter] = useState(''); // 지도 const [mapObject, setMapObject] = useState(); - const [mapType, setMapType] = useMapType(); + const [setMapType] = useMapType(); const { areaCoordList, isOpenModal } = useSelector(state => state.laancState); const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD')); @@ -54,7 +63,7 @@ export default function NewFlightApprovalsContainer({ mode }) { // 미니맵 레이어 const [previewLayer, setPreviewLayer] = useState(); - const map = useSelector(state => state.mapState.map); + const { map, mapType } = useSelector(state => state.mapState); // popup const [isPopup, setIsPopup] = useState(false); @@ -340,7 +349,7 @@ export default function NewFlightApprovalsContainer({ mode }) { return ( <>
-
+
{' '} diff --git a/src/redux/features/control/map/mapSlice.ts b/src/redux/features/control/map/mapSlice.ts index c3aa1e32..73e02caa 100644 --- a/src/redux/features/control/map/mapSlice.ts +++ b/src/redux/features/control/map/mapSlice.ts @@ -4,6 +4,7 @@ import { IMapState } from './mapState'; const initMap: IMapState = { map: undefined, mapType: 'TERRAIN', + mapStyleUrl: 'mapbox://styles/mapbox/streets-v12', objectId: '', isClickObject: false, area0001: true, @@ -26,6 +27,16 @@ const mapSlice = createSlice({ }, clientMapTypeChange: (state, action) => { const value = action.payload; + let styleUrl = ''; + if (value === 'TERRAIN' || value === 'SATELLITE') { + if (value === 'TERRAIN') { + styleUrl = 'mapbox://styles/mapbox/streets-v12'; + } else { + styleUrl = 'mapbox://styles/mapbox/satellite-streets-v12'; + } + state.mapStyleUrl = styleUrl; + } + state.mapType = value; }, clientObjectClick: (state, action) => { diff --git a/src/redux/features/control/map/mapState.ts b/src/redux/features/control/map/mapState.ts index 86adf32d..ed58bdcd 100644 --- a/src/redux/features/control/map/mapState.ts +++ b/src/redux/features/control/map/mapState.ts @@ -1,6 +1,7 @@ export interface IMapState { map: any; mapType: string; + mapStyleUrl: string; objectId: string; isClickObject: boolean; area0001: boolean; diff --git a/src/utility/hooks/useMapType.ts b/src/utility/hooks/useMapType.ts index 1aa0d870..96e254d1 100644 --- a/src/utility/hooks/useMapType.ts +++ b/src/utility/hooks/useMapType.ts @@ -24,17 +24,23 @@ const useMapType = () => { mapState.map.setMaxPitch(85); mapState.map.dragRotate.enable(); } else if (type === '2D') { - mapState.map.setMaxPitch(0); - mapState.map.setBearing(0); - mapState.map.dragRotate.disable(); + // mapState.map.setMaxPitch(0); + // mapState.map.setBearing(0); + // mapState.map.dragRotate.disable(); } else if (type === 'SATELLITE') { mapState.map.setStyle('mapbox://styles/mapbox/satellite-streets-v12'); + mapState.map.setTerrain({ + source: 'mapbox-dem', + exaggeration: 1 + }); + mapState.map.setMaxPitch(85); + mapState.map.dragRotate.enable(); } dispatch(clientMapTypeChange(type)); - setMapType(type); + // setMapType(type); }; - return [mapType, handlerMapType]; + return [handlerMapType]; }; export default useMapType; diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js index 701ff6d1..1d76ceb3 100644 --- a/src/views/control/setting/ControlSetting.js +++ b/src/views/control/setting/ControlSetting.js @@ -18,7 +18,7 @@ import flatGimpo from '../../../components/map/geojson/flatGimpoAirportAirArea.j import { clientDispatchTopMenu } from '@src/redux/features/layout/layoutSlice'; const ControlSetting = props => { - const [mapType, setMapType] = useMapType(); + const [setMapType] = useMapType(); const dispatch = useDispatch(); const history = useHistory(); @@ -140,19 +140,19 @@ const ControlSetting = props => {