Mapbox은 인터랙티브 맵을 구축하는 데 매우 유용한 오픈소스 맵 플랫폼입니다. 이 플랫폼은 다양한 기능을 제공하며, 그 중 하나는 측정 도구입니다. 측정 도구를 사용하면 지도 상에서 거리, 면적 등을 측정할 수 있습니다.

이번 예제에서는 자바스크립트를 활용하여 Mapbox지도에서 측정 도구를 사용하는 방법을 알아보겠습니다.

필요한 패키지 설치하기

먼저, Mapbox를 사용하기 위해 필요한 패키지를 설치해야 합니다. 다음 명령을 사용하여 필요한 패키지를 설치합니다:

npm install mapbox-gl mapbox-gl-draw

맵 생성하기

다음으로, Mapbox지도를 생성합니다. 아래 코드를 사용하여 맵을 생성합니다:

import mapboxgl from 'mapbox-gl';
import MapboxDraw from 'mapbox-gl-draw';

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

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

const draw = new MapboxDraw();
map.addControl(draw);

맵 생성 코드에서 YOUR_MAPBOX_ACCESS_TOKEN 부분에는 실제 Mapbox에서 발급받은 액세스 토큰을 사용해야 합니다. 또한, longitude 및 latitude 부분은 원하는 중심 지점으로 변경해야 합니다.

측정 도구 사용하기

이제 맵 생성이 완료되었으므로 측정 도구를 사용할 준비가 되었습니다. 다음 코드를 사용하여 측정 도구를 활성화합니다:

map.on('draw.create', ({ features }) => {
  const measurement = features[0].geometry.coordinates;
  console.log('Measurement:', measurement);
});

map.on('draw.delete', () => {
  console.log('Measurement deleted');
});

위 코드는 맵에서 측정한 결과를 콘솔에 출력하는 예시입니다. 필요에 따라 결과를 다른 방식으로 처리할 수 있습니다.

결론

이제 자바스크립트를 활용하여 Mapbox지도에서 측정 도구를 사용하는 방법에 대해 알아보았습니다. 이를 응용하여 원하는 기능을 추가할 수 있습니다. 추가적인 정보와 기능은 Mapbox 공식 문서를 참고하시기 바랍니다.

참고 자료:

• Mapbox 공식 문서