지도에 그리기

지도 위에 정보를 표현하기 위한 다양한 그래픽 요소들에 대해 이해합니다.

1. 지도에 그리기 위한 API

카카오지도 SDK 는 지도 위에 표시 할 수 있는 Label, Shape, RouteLine, MapWidget 이라는 크게 4가지 타입의 기능을 제공합니다. 이 API 들은 각각 아래와 같은 패턴으로 클래스가 구성으로 되어 있습니다.

  • 모든 컨트롤의 진입점이 되는 Manager 클래스
  • Object 가 되는 클래스들을 묶어서 관리할 수 있는 Layer 클래스
  • 개별적으로 하나씩 컨트롤 할 수 있는 Objects 클래스
Manager Layer Objects
Label LabelManager LabelLayer, LodLabelLayer Label, LodLabel, PolylineLabel
Shape ShapeManager, DimScreenManager ShapeLayer, DimScreenLayer Polygon, Polyline
RouteLine RouteLineManager RouteLineLayer RouteLine
MapWidget MapWidgetManager MapWidgetLayer, InfoWindowLayer MapWidget, InfoWindow

Manager 클래스들은 직접 생성할 수 없고 KakaoMap 에서 아래와 같이 가져옵니다.

// Label
LabelManager labelManager = kakaoMap.getLabelManager();

// Shape
ShapeManager shapeManager = kakaoMap.getShapeManager();

// RouteLine
RouteLineManager routeLineManager = kakaoMap.getRouteLineManager();

// MapWidget
MapWidgetManager mapWidgetManager = kakaoMap.getMapWidgetManager();

2. 렌더링 우선순위

지도 위 Label, Shape, RouteLine, MapWidget 간에 겹쳐서 보여져야 할 때 어떤 것이 위 또는 아래로 보여질지 렌더링 우선순위는 고정되어 있습니다.

렌더링 우선순위
MapWidget 가장 위에 위치한다. 4
Label Shape, RouteLine 보다 위에 MapWidget 보다는 아래에 위치한다. 3
RouteLine Shape 보다 위에 Label, MapWidget 아래에 위치한다. 2
Shape 가장 아래에 위치한다. 1
image

3. 스타일 설정

MapWidget 을 제외하고 Label, RouteLine, Shape 은 색깔, 이미지, 두께 등을 가지고 있는 스타일을 설정해서 지도에 표시할 수 있습니다. 스타일은 지도의 줌 레벨마다 다르게 설정 할 수 있고 스타일 관련 API 는 아래와 같은 패턴으로 구성되어 있습니다.

1. 클래스 이름이 —Style 로 끝날 때: 줌 레벨 마다 설정할 수 있는 스타일 API 의 최소 단위 클래스

2. 클래스 이름이 —Styles 로 끝날 때: —Style 스타일 객체를 1개 이상 갖고있는 컨테이너 클래스

3. 클래스 이름이 —StylesSet 로 끝날 때: —Styles 스타일 객체를 1개 이상 갖고있는 컨테이너 클래스

Object 별 스타일 API
Label LabelStyle, PolylineLabelStyle LabelStyles, PolylineLabelStyles 없음
Shape PolygonStyle, PolylineStyle PolygonStyles, PolylineStyles PolygonStylesSet, PolylineStylesSet
RouteLine RouteLineStyle RouteLineStyles RouteLineStylesSet
  • 스타일 클래스 간의 집합 관계 그림

image


지도의 줌 레벨 마다 스타일 다르게 설정

Label, Shape, RouteLine, MapWidget 들은 지도의 줌 레벨마다 다른 스타일로 설정할 수 있습니다.

아래의 예제코드와 그림은 줌 레벨마다 다른 스타일을 설정하는 Label 예제 입니다.

// Min ZoomLevel ~ 7 까지   : 스타일 안나옴
// 8 ~ 10 까지              : red_marker 이미지 나옴
// 11 ~ 14 까지             : blue_marker 이미지 나옴
// 15 ~ Max ZoomLevel 까지  : blue_marker 이미지와 텍스트 나옴
LabelStyles styles = LabelStyles.from("myStyleId",
    LabelStyle.from(R.drawable.red_marker).setZoomLevel(8),
    LabelStyle.from(R.drawable.blue_marker).setZoomLevel(11),
    LabelStyle.from(R.drawable.blue_marker).setTextStyles(32, Color.BLACK, 1, Color.GRAY).setZoomLevel(15));

// 라벨 스타일 추가
styles = kakaoMap.getLabelManager().addLabelStyles(styles);

// 라벨 생성
Label label = kakaoMap.getLabelManager().getLayer().addLabel(LabelOptions.from(pos)
    .setStyles(styles).setTexts("★맛있는 치킨★", "123-4567"));
Min Level ~ 7 8 ~ 10 11 ~ 14 15 ~ Max Level
스타일 없음 image image image