MapLibre - #2 나만의 맵 앱 만들기 2편

지난 글에 이어 나만의 맵 앱 만들기 소스 부분을 설명 드리겠습니다.

브이월드 배경지도 추가하기

Maplibre 맵을 생성하는 과정을 설명하면,

32라인의 Mapbox.getInstance(this); 로 MapLibre 객체를 초기화 합니다. 그런데 주의할 점은 MainActivity의 layout을 초기화 하기 전에, 즉 setContentView(R.layout.activity_main); 이전에 호출해 주어야 하는 것입니다. 만약 setContentView 이후에 Mapbox.getInstance를 호출하면 에러가 발생합니다. 

그런데 조금 이상하다고 생각되는 부분이 우리는 MapLibre SDK를 쓰고 있는데, 클래스 이름이 여전히 Mapbox 입니다. 아무래도 MapLibre SDK가 Mapbox로 시작했기 때문에 여전히 클래스, 패키지명을 유지하는 것 같습니다.

이후 중요한 부분은  38라인의 mapView.getMapAsync 부분입니다. 맵이 초기화 되고 호출되는 비동기 콜백함수 호출입니다. MainActivity에 OnMapReadyCallback 인터페이스 구현 함수에 해당하는 onMapReady 함수를 호출합니다. 이부분에서 맵의 형태와 동작을 정의합니다. 

45번째 라인에 맵 초기 스타일 파일을 불러옵니다.

{
  "version": 8,
  "id": "mymapStreets",
  "name": "mymapStreets",
  "sources": {},
  "layers": [{
    "id": "background",
    "type": "background",
    "layout": {
      "visibility": "visible"
    },
    "paint": {
      "background-color": {
        "stops": [[6, "rgba(252, 247, 229, 1)"], [10, "rgba(252, 247, 229, 1)"], [14, "rgba(246, 241, 229, 1)"], [15, "rgba(246, 241, 229, 1)"]]
      }
    }
  }
  ],
  "metadata": {
    "description": "my map style"
  },
  "bearing": 0,
  "pitch": 0,
  "center": [37.5, 127.5],
  "zoom": 6
}

맵 스타일은 레이어(주제도)의 소스와 형태를 지정하는 파일입니다. 여기에서 모든 레이어 소스와 형태를 한꺼번에 지정할 수도 있고, 기본적인 배경정도만 지정하고 동적으로 레이어 소스와 형태를 지정할 수도 있습니다. 자세한 style의 스펙은 여기에서 확인할 수 있습니다.

Sources | Style Specification | MapLibre GL JS Docs

이 글에서는 동적으로 레이어 소스와 스타일을 지정하는 방법을 설명 드리고 있습니다.

46, 47번 라이에서 브이월드 타일 배경지도들 중 항공사진과 하이브리드 레이어를 차례로 추가합니다. 그리고 카메라 위치를 강남역 부근으로 이동합니다. 카메라는 우리가 보는 영역을 의미합니다. 

55~65 라인에 정의한 AddWMTSLayer 메소드는 레이어 소스와 형태를 지정하는 부분입니다. 58~59 라인에서 발급받은 api 키를 이용해 wmts 주소를 만듭니다. 61~62 라인에서 레이어 소스를 설정하고 63~64번에서 레이어를 생성하고 스타일에 추가합니다.

끝났습니다. 이렇게하면 아래 그림처럼 지도가 표시되는 것을 확인할 수 있습니다.

실행화면

기본적으로 지도 확대, 축소, 이동, 회전이 되며 나침반과 attribution이 표시됩니다.

 

다음 시간에는 브이월드 WMS 서비스를 통해 지적 데이터를 지도에 표시해 보겠습니다.