김장현
2 months ago
3 changed files with 68 additions and 32 deletions
@ -0,0 +1,40 @@
|
||||
import { useEffect, useState } from 'react'; |
||||
import { useDispatch, useSelector } from '@src/redux/store'; |
||||
import { clientMapTypeChange } from '@src/redux/features/control/map/mapSlice'; |
||||
|
||||
type mapType = 'TERRAIN' | 'NORMAL' | '2D' | 'SATELLITE'; |
||||
|
||||
const useMapType = () => { |
||||
const [mapType, setMapType] = useState<mapType>('TERRAIN'); |
||||
const dispatch = useDispatch(); |
||||
// 지도, 지도타입, 공역 타입 컨트롤
|
||||
const mapState = useSelector(state => state.mapState); |
||||
|
||||
const handlerMapType = (type: mapType) => { |
||||
if (type === 'TERRAIN') { |
||||
mapState.map.setStyle('mapbox://styles/mapbox/streets-v12'); |
||||
mapState.map.setTerrain({ |
||||
source: 'mapbox-dem', |
||||
exaggeration: 1 |
||||
}); |
||||
mapState.map.setMaxPitch(85); |
||||
mapState.map.dragRotate.enable(); |
||||
} else if (type === 'NORMAL') { |
||||
mapState.map.setTerrain(); |
||||
mapState.map.setMaxPitch(85); |
||||
mapState.map.dragRotate.enable(); |
||||
} else if (type === '2D') { |
||||
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'); |
||||
} |
||||
dispatch(clientMapTypeChange(type)); |
||||
setMapType(type); |
||||
}; |
||||
|
||||
return [mapType, handlerMapType]; |
||||
}; |
||||
|
||||
export default useMapType; |
Loading…
Reference in new issue