[javascript] 자바스크립트를 이용한 Mapbox지도의 카메라 제어하기

Mapbox는 지도 및 위치 기반 서비스를 제공하는 플랫폼으로, 자바스크립트를 사용하여 Mapbox 지도의 카메라를 제어할 수 있습니다. 카메라 제어를 통해 지도의 위치, 줌 레벨, 기울기 및 방향을 조정할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 Mapbox 지도의 카메라를 제어하는 방법을 알아보겠습니다.

카메라 위치 조정하기

Mapbox 지도의 카메라 위치를 조정하려면, setCenter 메서드를 사용하여 원하는 위치로 지정할 수 있습니다. 아래의 예제 코드에서는 Mapbox 지도의 중심을 (longitude, latitude) 좌표로 설정합니다.

map.setCenter([longitude, latitude]);

줌 레벨 조정하기

Mapbox 지도의 카메라 줌 레벨을 조정하려면, setZoom 메서드를 사용하여 원하는 줌 레벨 값으로 설정할 수 있습니다. 아래의 예제 코드에서는 Mapbox 지도의 줌 레벨을 zoom 값으로 설정합니다.

map.setZoom(zoom);

기울기 조정하기

Mapbox 지도의 카메라 기울기를 조정하려면, setPitch 메서드를 사용하여 원하는 기울기 값으로 설정할 수 있습니다. 아래의 예제 코드에서는 Mapbox 지도의 기울기를 pitch 값으로 설정합니다.

map.setPitch(pitch);

방향 조정하기

Mapbox 지도의 카메라 방향을 조정하려면, setBearing 메서드를 사용하여 원하는 방향값으로 설정할 수 있습니다. 아래의 예제 코드에서는 Mapbox 지도의 방향을 bearing 값으로 설정합니다.

map.setBearing(bearing);

결론

위에서 설명한 메서드들을 조합하여 자바스크립트를 사용하여 Mapbox 지도의 카메라를 제어할 수 있습니다. 카메라의 위치, 줌 레벨, 기울기 및 방향을 조정하여 원하는 화면을 구성할 수 있습니다. Mapbox의 API 문서를 참조하여 더 자세한 기능과 사용법을 확인할 수 있습니다.

참고 자료