[javascript] 자바스크립트로 Mapbox 지도의 스케일 변경하기

22 Nov 2023

javascript

Mapbox는 인기있는 웹 기반 지도 서비스입니다. 자바스크립트를 사용하여 Mapbox 지도의 스케일을 변경하는 방법을 알아보겠습니다.

Mapbox 스케일 변경하기

Mapbox API는 Map 객체를 제공하여 맵을 생성하고 조작할 수 있습니다. 이 Map 객체의 setZoom 메서드를 사용하여 스케일을 변경할 수 있습니다.

아래는 Mapbox 지도의 스케일을 10으로 변경하는 예제 코드입니다.

// Mapbox 맵 생성
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.5, 40],
  zoom: 9
});

// 스케일 변경
map.setZoom(10);

위의 코드에서 YOUR_ACCESS_TOKEN 부분에는 자신의 Mapbox Access Token을 넣어야 합니다. Access Token을 얻으려면 Mapbox 웹 사이트에 가입하고 토큰을 생성해야 합니다.

더 많은 스케일 조작 기능

Mapbox API에는 스케일을 조작하는 다양한 메서드와 이벤트가 제공됩니다. 아래는 일부 유용한 메서드와 이벤트의 예시입니다.

setZoom(zoomLevel) : 스케일을 지정한 줌 레벨로 변경합니다.
getZoom() : 현재 스케일의 줌 레벨을 가져옵니다.
zoomIn() : 스케일을 한 단계 증가시킵니다.
zoomOut() : 스케일을 한 단계 감소시킵니다.
on('zoom', callback) : 스케일이 변경될 때 호출되는 콜백 함수를 등록합니다.

자세한 내용은 Mapbox API 문서를 참조하세요.

결론

이렇게 자바스크립트를 사용하여 Mapbox 지도의 스케일을 변경할 수 있습니다. setZoom 메서드를 사용하여 스케일을 직접 설정하거나 zoomIn, zoomOut 메서드를 사용하여 스케일을 조작할 수 있습니다. Mapbox API 문서를 통해 더 많은 기능과 이벤트를 알아보세요.