728x90
핵심코드 위성사진 지도를 지원하는 style 사용
style: 'mapbox://styles/mapbox/satellite-v9', // 스타일 URL
전체코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox GL JS map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// Mapbox GL JS의 액세스 토큰을 설정 (반드시 Mapbox 계정에서 발급받은 토큰을 입력해야 함)
mapboxgl.accessToken = 'minwooToken';
// Mapbox 지도 객체 생성
const map = new mapboxgl.Map({
container: 'map', // HTML 내 지도를 표시할 컨테이너의 ID (즉, <div id="map"></div> 요소에 지도 표시)
style: 'mapbox://styles/mapbox/satellite-v9', // 스타일 URL
projection: 'globe', // 지도를 구형(Globe) 형태로 표시 (기본적으로 위성 스타일은 Mercator 투영법을 사용)
center: [126.735901, 37.348980],
zoom: 9 // 초기 줌 레벨 설정 (9단계 줌 - 비교적 넓은 지역을 볼 수 있음)
});
map.on('style.load', () => { // 스타일이 로드되었을 때 실행될 이벤트 핸들러 등록
map.setFog({}); // 기본 대기권 효과(Atmosphere) 추가 (위성 스타일에는 기본적으로 대기권 효과가 없음)
});
</script>
</body>
</html>
vscode에 복붙 후 확인
결과1
결과2
'API사용' 카테고리의 다른 글
| [Mapbox] 한국 지적도 geoJSON파일 만들기 (1) | 2025.04.03 |
|---|---|
| [Mapbox] 맵 박스에 행정안전구역 범죄주의구간 표시하기 (0) | 2025.03.21 |
| [Mapbox] 맵 박스 눈/비 내리는 효과 예제 (0) | 2025.03.13 |
| [Mapbox] 맵 박스 3D 건물 세우기 예제 (0) | 2025.03.13 |
| [Mapbox] 맵 박스 기본 사용법 및 셋팅하기 (0) | 2025.03.13 |
