Mapbox API(Mapbox GL JS)

지도 api는 그동안 카카오,네이버,구글을 많이 봐서 친숙했는데, 

회사에서는 Mapbox API + Mapbox GL JS를 사용하여 드론을 띄운다!

 

익숙해질 수 있게 사수분이 과제도 내주셨지만, 결국 해결하지못해서 매번 사수분이 힌트를 알려주셨다ㅠㅠ

 

	Mapbox API	Mapbox GL JS
목적	데이터 검색 및 처리	지도 시각화 및 상호작용
사용 방식	HTTP 요청으로 데이터 가져오기	JavaScript 라이브러리로 지도 구현

 

Mapbox api 예시 코드

// 지오코딩 API 호출
async function geocodeAddress(address) {
  const response = await fetch(
    `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(address)}.json?access_token=YOUR_TOKEN`
  );
  const data = await response.json();
  return data.features[0].center;
}

// 경로 검색 API 호출
async function getDirections(start, end) {
  const response = await fetch(
    `https://api.mapbox.com/directions/v5/mapbox/driving/${start[0]},${start[1]};${end[0]},${end[1]}?access_token=YOUR_TOKEN`
  );
  const data = await response.json();
  return data.routes[0].geometry;
}

 

Mapbox GL JS 예시 코드

// 지도 초기화
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v11',
  center: [127.0246, 37.5326],
  zoom: 12
});

// 경로 표시
map.on('load', () => {
  map.addSource('route', {
    type: 'geojson',
    data: {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: routeCoordinates
      }
    }
  });

  map.addLayer({
    id: 'route',
    type: 'line',
    source: 'route',
    layout: {
      'line-join': 'round',
      'line-cap': 'round'
    },
    paint: {
      'line-color': '#ff0000',
      'line-width': 2
    }
  });
});

*밑에 내용은 Mapbox GL JS임!

개요

• 웹 기반의 인터랙티브 지도를 구현할수 있는 js 라이브러리
• 래스터 이미지가 아닌 벡터 데이터를 사용하여 지도를 렌더링
• 3D 지원
• 지도 스타일을 실시간으로 변경 가능
• 데이터 기반 스타일링 지원

주요 개념

Source

• 지도에 표시할 데이터의 원본
• GeoJSON 소스, 벡터 타일 소스, 래스터 DEM 소스(3D 지형용)

// GeoJSON 소스
map.addSource('my-data', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: { name: '서울' },
        geometry: {
          type: 'Point',
          coordinates: [126.9780, 37.5665]
        }
      }
    ]
  }
});

// 벡터 타일 소스
map.addSource('terrain-data', {
  type: 'vector',
  url: 'mapbox://mapbox.mapbox-terrain-v2'
});

// 래스터 DEM 소스 (3D 지형용)
map.addSource('dem', {
  type: 'raster-dem',
  url: 'mapbox://mapbox.mapbox-terrain-dem-v1'
});

 

Layer

• source의 데이터를 어떻게 시각화할지 정의
• 채우기 레이어(폴리곤)
• 선 레이어
• 심볼 레이어(텍스트나 아이콘)

// 채우기 레이어 (폴리곤)
map.addLayer({
  id: 'buildings',
  type: 'fill',
  source: 'my-data',
  paint: {
    'fill-color': '#ff0000',
    'fill-opacity': 0.5
  }
});

// 선 레이어
map.addLayer({
  id: 'roads',
  type: 'line',
  source: 'my-data',
  paint: {
    'line-color': '#000000',
    'line-width': 2
  }
});

// 심볼 레이어 (텍스트나 아이콘)
map.addLayer({
  id: 'labels',
  type: 'symbol',
  source: 'my-data',
  layout: {
    'text-field': ['get', 'name'],
    'text-size': 12
  }
});

 

Control

• 지도에 추가적인 UI 요소를 제공

// 줌 컨트롤
map.addControl(new mapboxgl.NavigationControl());

// 스케일 컨트롤 (거리 표시)
map.addControl(new mapboxgl.ScaleControl());

// 풀스크린 컨트롤
map.addControl(new mapboxgl.FullscreenControl());

// 언어 컨트롤 (지도 텍스트 언어 변경)
const language = new MapboxLanguage();
map.addControl(language);

 

Filtering

• 특정 조건에 맞는 데이터만 표시

// 단순 필터링
filter: ['==', ['get', 'type'], 'building']

// 복합 필터링
filter: [
  'all',
  ['==', ['get', 'type'], 'building'],
  ['>=', ['get', 'height'], 100]
]

// 조건부 필터링
filter: [
  'case',
  ['==', ['get', 'type'], 'building'], true,
  ['==', ['get', 'type'], 'road'], true,
  false
]

// 범위 필터링
filter: [
  'all',
  ['>=', ['get', 'height'], 50],
  ['<=', ['get', 'height'], 100]
]

 

기본 설정

// Mapbox 토큰 설정
mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

// 기본 지도 초기화
const map = new mapboxgl.Map({
  container: 'map',           // 지도를 표시할 HTML 요소의 ID
  style: 'mapbox://styles/mapbox/light-v11',  // 지도 스타일
  center: [127.0246, 37.5326],  // 중심점 [경도, 위도]
  zoom: 12,                    // 줌 레벨
  pitch: 0,                    // 지도 기울기 (3D 효과)
  bearing: 0,                  // 지도 회전 각도
  antialias: true,            // 안티앨리어싱 활성화
  attributionControl: false,   // 속성 컨트롤 표시 여부
  localIdeographFontFamily: 'NotoSansKR'  // 한글 폰트 설정
});

 

[참고링크]MapBox GL JS 공식문서

Getting Started | Mapbox GL JS