[javascript] Mapbox지도에서 길이 측정하기

22 Nov 2023

javascript

Mapbox는 지도를 시각화하고 상호작용하는데 사용되는 강력한 도구입니다. 이번 글에서는 Mapbox를 사용하여 지도 상에서 두 지점 사이의 거리를 측정하는 방법을 알아보겠습니다. 이 기능을 활용하면 경로, 도로 등의 길이를 쉽게 확인할 수 있습니다.

Mapbox에 대한 기본 설정

먼저, Mapbox를 사용하기 위해 기본 설정을 해줍니다. Mapbox API 토큰을 발급받아야 하며, 이 토큰은 Mapbox 계정에 로그인하여 얻을 수 있습니다. 발급받은 토큰을 아래 코드의 accessToken에 입력해주세요.

mapboxgl.accessToken = 'your-mapbox-access-token';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11'
});

두 지점 사이의 거리 측정하기

Mapbox는 turf.js라는 라이브러리를 사용하여 공간 분석 기능을 제공합니다. 이 라이브러리를 사용하여 두 지점 사이의 거리를 측정할 수 있습니다.

var from = turf.point([lng1, lat1]);
var to = turf.point([lng2, lat2]);
var options = { units: 'kilometers' };
var distance = turf.distance(from, to, options);

위 코드에서 lng1, lat1은 출발지의 경도와 위도를, lng2, lat2는 도착지의 경도와 위도를 의미합니다. units 옵션은 거리의 단위를 설정할 수 있으며, 기본값은 킬로미터입니다.

거리는 distance 변수에 저장되고, 변수를 원하는 방식으로 활용할 수 있습니다.

결과 표시하기

지도 상에서 거리를 표시하려면 마커나 선분 등의 그래픽 요소를 추가해야 합니다. 아래 코드는 마커와 선분을 사용하여 거리를 표시하는 예시입니다.

var marker1 = new mapboxgl.Marker()
  .setLngLat([lng1, lat1])
  .addTo(map);

var marker2 = new mapboxgl.Marker()
  .setLngLat([lng2, lat2])
  .addTo(map);

var line = turf.lineString([
  [lng1, lat1],
  [lng2, lat2]
]);

map.on('style.load', function() {
  map.addLayer({
    'id': 'route',
    'type': 'line',
    'source': {
      'type': 'geojson',
      'data': line
    },
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': '#888',
      'line-width': 8
    }
  });
});

위 코드에서 lng1, lat1, lng2, lat2는 앞서 사용한 것과 동일한 출발지와 도착지의 경도와 위도입니다. marker 함수를 사용하여 지정된 위치에 마커를 추가하고, lineString 함수를 사용하여 출발지와 도착지를 연결하는 선분을 생성합니다. 생성된 선분을 지도에 추가하여 거리를 표시합니다.

길이 측정 기능을 구현하려면 이 코드를 추가로 개선하고 사용자 입력 등에도 따라서 동적으로 업데이트해야 할 수도 있습니다.

Mapbox에 대한 기본 설정

두 지점 사이의 거리 측정하기

결과 표시하기

참고 자료