[javascript] 자바스크립트를 활용하여 Mapbox지도에서 3D 효과 적용하기

22 Nov 2023

javascript

Mapbox는 웹 기반 지도 서비스로, 자바스크립트를 사용하여 다양한 효과와 기능을 구현할 수 있습니다. 이번 글에서는 Mapbox의 3D 효과를 활용하여 지도에 입체적인 느낌을 적용하는 방법에 대해 알아보겠습니다.

Mapbox 기본 설정

먼저, Mapbox를 사용하기 위해 필요한 설정을 해보겠습니다.

Mapbox 계정을 생성하고, 액세스 토큰을 받아옵니다.
HTML 파일에 Mapbox 라이브러리를 추가합니다. 아래 코드를 <head> 태그 내에 추가합니다.

<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />

<body> 내에서 지도를 보여줄 <div> 요소를 생성합니다. 해당 <div>에는 고유한 id를 부여합니다.

<div id='map'></div>

자바스크립트 코드에서 액세스 토큰을 사용하여 Mapbox를 초기화합니다.

<script>
mapboxgl.accessToken = '<your-access-token>';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11', // 지도 스타일
    center: [lng, lat], // 지도 중심 좌표
    zoom: 12 // 지도 확대/축소 레벨
});
</script>

<your-access-token> 부분에는 위에서 받은 액세스 토큰을 입력해야 합니다.

3D 효과 적용하기

이제 3D 효과를 적용해보겠습니다. Mapbox는 gl 객체를 제공하여 3D 기능에 접근할 수 있습니다.

<script>
mapboxgl.accessToken = '<your-access-token>';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [lng, lat],
    zoom: 12,
    pitch: 45, // 지도의 기울기 설정
    bearing: -17.6 // 지도의 회전각 설정
});
</script>

위 코드에서 pitch는 지도의 기울기를 설정하는 값이고, bearing은 지도의 회전각을 설정하는 값입니다. 이를 조절하면 지도가 입체적으로 보이게 됩니다.

추가 기능

Mapbox에서는 다양한 추가 기능을 제공합니다. 예를 들어, 3D 렌더링된 건물, 실시간 트래픽 정보, 경로 표시 등을 구현할 수 있습니다. 자세한 내용은 Mapbox 공식 문서를 참고하시기 바랍니다.

마무리

이번 글에서는 자바스크립트를 활용하여 Mapbox 지도에 3D 효과를 적용하는 방법을 알아보았습니다. Mapbox는 다양한 기능과 API를 제공하여 사용자들이 맞춤형 지도를 만들 수 있도록 도와주고 있습니다. 많은 예제 코드와 문서가 제공되니 자유롭게 활용해보세요.