이번에는 자바스크립트와 Mapbox를 사용하여 지도에서 두 지점 사이의 거리를 계산하는 방법을 알아보겠습니다.

Mapbox란?

Mapbox는 오픈 소스 맵핑 플랫폼으로, 맞춤형 지도를 구축하고 데이터를 시각화할 수 있도록 도와줍니다. Mapbox에는 JavaScript SDK를 제공하므로 자바스크립트를 사용하여 맞춤형 기능을 구현할 수 있습니다.

거리 계산하기

먼저 Mapbox를 사용하기 위해 Mapbox 계정을 생성하고 액세스 토큰을 발급받아야 합니다. 액세스 토큰은 Mapbox를 사용할 때 인증 정보로 사용됩니다.

const accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

맵을 생성하고 두 지점의 좌표를 가져온 다음, turf.js 라이브러리를 사용하여 두 지점 사이의 거리를 계산할 수 있습니다. turf.js는 지리 공간 데이터를 다루기위한 유용한 함수를 제공합니다.

// Map 생성
mapboxgl.accessToken = accessToken;
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: 12
});

// 두 지점의 좌표
const point1 = turf.point([lng1, lat1]);
const point2 = turf.point([lng2, lat2]);

// 두 지점 사이의 거리 계산
const distance = turf.distance(point1, point2);
console.log('Distance (in kilometers):', distance);

lng과 lat은 맵의 중심 좌표이고, lng1, lat1, lng2, lat2는 각각 첫 번째 지점과 두 번째 지점의 경도와 위도입니다.

결과 확인하기

거리를 계산한 다음 결과를 콘솔에 출력하면 되며, 거리의 단위는 기본적으로 킬로미터(kilometers)로 나타납니다.

위의 코드를 실행하면 두 지점 사이의 거리가 출력되는 것을 확인할 수 있습니다.

정리

이번 포스트에서는 자바스크립트와 Mapbox를 사용하여 지도에서 두 지점 사이의 거리를 계산하는 방법을 알아보았습니다. Mapbox를 사용하면 맵의 시각화와 맞춤형 기능을 손쉽게 구현할 수 있습니다. turf.js 라이브러리를 활용하면 지리 공간 데이터를 다루는데 유용한 함수들을 사용할 수 있습니다.

참고 자료

• Mapbox
• Mapbox JavaScript SDK
• turf.js