Label

지도의 특정 위치에 이미지와 텍스트로 정보를 표시할 수 있습니다.

1. Label 종류


라벨은 지도의 특정 위치에 점, 혹은 선형으로 이미지나 텍스트를 표시할 수 있습니다. 사용하는 방법에 따라 Label, LodLabel, PolylineLabel 3가지 종류의 라벨이 있습니다.

Label Type Description
Label 특정 위치에 이미지나 텍스트로 정보를 표시 할 수 있고 스타일 변경과 이동이 가능합니다.
LodLabel Lod(Level Of Detail) 기능이 적용되어 있어 한번에 많은 양의 Label 을 빠르게 표시할 수 있습니다.
PolylineLabel 선형으로 된 텍스트를 표시할 때 사용합니다.

다양한 스타일과 기능을 활용한 Label 예제들

Icon 만 있는
Text 만 있는
Icon 과 Text 가 같이 있는
Badge 가 있는
움직임이 있는
구부러진 텍스트

2. Label 관련 주요 클래스들


Label 을 표시하기 위해서는 라벨과 관련 된 클래스들의 역할과 관계를 이해해야 합니다.

  • LabelManager - Label 과 관련 된 모든 진입점. LabelLayer, LodLabelLayer, LabelStyles, PolylineLabelStyles, LabelAnimator 를 추가 및 삭제 할 수 있는 컨테이터 클래스.

  • LabelLayer, LodLabelLayer - Label 과 LodLabel 을 그룹 별로 관리. 레이어마다 렌더링 우선순위를 다르게 지정 할 수 있고 Label, LodLabel 을 추가 및 삭제 할 수 있는 컨테이너 클래스.

  • LabelStyles, PolylineLabelStyles - Label, LodLabel, PolylineLabel 의 이미지 또는 텍스트 색깔, 크기 등을 설정하는 클래스. 라벨 객체 하나 당 하나의 스타일을 갖고 있다.

  • LabelAnimator - Label 에 애니메이션 효과를 주고 제어하는 클래스. 여러 개의 라벨을 동시에 효과 줄 수 있다.

Depth 1 Depth 2 Depth 3
LabelManager LabelLayer Label
PolylineLabel
LodLabelLayer LodLabel
LabelStyles LabelStyle
PolylineLabelStyles PolylineLabelStyle
LabelAnimator

LabelManager


LabelManager 는 Label 과 관련 된 최상위 클래스이며 LabelLayer, LodLabelLayer 생성 및 삭제, Label 과 관련 된 객체관리를 하는 컨테이너 역할을 합니다. 아래의 예제코드는 LabelManager 를 가져오는 방법입니다.

// LabelManager 를 가져오는 방법
kakaoMap.getLabelManager();

LabelLayer, LodLabelLayer


LabelLayer 는 Label 과 PolylineLabel 의 생성 및 삭제와 같은 객체관리를 하는 컨테이너 역할을 합니다. 뿐만 아니라, zOrder 값을 이용해 LabelLayer 간에 Label 들이 겹칠 때 어떤 것이 우선적으로 보여지게 할 지 렌더링 우선순위를 설정할 수 있습니다. 그리고, CompetitionType, CompetitionUnit, OrderingType 옵션을 이용해 Label 이 다른 Label 들과 겹쳐질 때 어떤 식으로 보여지게 할지 세부적으로 설정 할 수 있습니다.

LodLabelLayer 는 LodLabel 만 관리 합니다.

Layer 생성하기

LabelLayer 와 LodLabelLayer 는 LabelLayerOptions 을 통해 초기값을 설정하고 생성할 수 있습니다. 아래 표는 LabelLayerOptions 의 주요 속성값 입니다.

Type Description
layerId layer 의 고유한 Id. Id 는 중복이 될 수 없습니다.
CompetitionType 다른 Label 과 경쟁하는 방법을 결정합니다. 자세한 설명은 경쟁옵션 을 참조하세요.
CompetitionUnit 다른 Label 과 경쟁하는 단위를 결정합니다. 자세한 설명은 경쟁옵션 을 참조하세요.
OrderingType competitionType이 same일 때 경쟁하는 기준이 됩니다. 자세한 설명은 경쟁옵션 을 참조하세요.
zOrder layer 의 렌더링 우선순위를 정의합니다. 자세한 설명은 여기를 을 참조하세요.
lodRadius LOD(Level of Detail) 기능을 위해 Label 을 표시할 반경(px)을 정합니다. LodLabelLayer 에서만 사용됩니다.

LabelLayer 는 LabelManager 에 미리 생성 된 디폴트 LabelLayer 를 사용하는 방법과 사용자가 직접 LabelLayer 를 생성해서 사용하는 2가지 방법이 있습니다.

// 1. LabelManager 에 미리 생성 된 디폴트 LabelLayer 가져오는 방법 
labelManager.getLayer();
labelManager.getLodLayer();

// 2. 사용자 커스텀으로 LabelLayer 생성 및 가져오는 방법
LabelLayer layer = labelManager.addLayer(LabelLayerOptions.from("myLayerId")
        .setOrderingType(OrderingType.Rank)
        .setCompetitionUnit(CompetitionUnit.IconAndText)
        .setCompetitionType(CompetitionType.All));

// 2-1. 사용자 커스텀으로 LodLabelLayer 생성 및 가져오는 방법
LodLabelLayer lodLayer = labelManager.addLodLayer(LabelLayerOptions.from("myLayerId")
        .setOrderingType(OrderingType.Rank)
        .setCompetitionUnit(CompetitionUnit.IconAndText)
        .setCompetitionType(CompetitionType.All));        

3. LabelLayer 의 렌더링 우선순위


LabelLayer 의 zOrder 값은 LabelLayer 가 여러 개일 때, zOrder 값의 크기비교로 LabelLayer 간에 라벨들의 보여지는 우선순위를 조절 할 수 있습니다. LabelLayer의 zOrder 값은 아래와 같이 미리 정의된 사용 가능한 범위 내에서 사용해야 합니다. 예약된 범위의 값을 사용하게 되면 의도와 다르게 그려지거나 별도의 공지 없이 렌더링 결과가 달라질 수 있습니다.

image

zOrder 값 Description
0~999 지도 내부용 (내부 기본 POI)
1000~1999 사용 가능
2000~2999 지도 내부용
3000~3999 사용 가능
4000~4999 지도 내부용(주요 시군구 등)
5000~ 사용 가능

경쟁 옵션 설정하기


Layer 의 경쟁 옵션 값들을 이용해 Label 이 다른 Label 들과 겹쳐질 때 어떤 라벨을 어떻게 보여질지 세부적으로 설정 할 수 있습니다.

Property Description
CompetitionType 다른 Label 과 경쟁하는 방법을 결정합니다. 기본 룰은 타입 순서에 따라 순서가 빠를수록 우선순위가 높습니다.
- None : 경쟁하지 않고 겹쳐서 그려집니다.
- Upper : 자신보다 우선순위가 높은 Label 과 경쟁합니다. 상위 Label 에게 우선권이 있으므로 상위 Label 와 겹쳐질 경우 그려지지 않습니다.
- Same : 자신과 같은 우선순위를 가진 Label 과 경쟁합니다. 이때 경쟁의 기준은 OrderingType 에 따라 결정됩니다.
- Lower : 자신보다 우선순위가 낮은 Label 과 경쟁합니다. 상위 Label 에 우선권이 있으므로 자신이 그려진 위치에 Upper 속성을 가진 Label 은 그려지지 않습니다.
CompetitionUnit 라벨의 경쟁하는 단위를 결정합니다.
- IconAndText : Icon 과 Text 모두 경쟁을 통과해야 그려집니다.
- IconFirst : Icon 만 경쟁의 기준이 됩니다. 텍스트는 경쟁에서 통과하지 못하는 경우 아이콘만 그려집니다.
OrderingType competitionType이 same일 때 경쟁하는 기준이 됩니다.
- Rank : 각 Label 별로 가지고 있는 rank 속성에 따라 rank 값이 높을수록 높은 우선순위를 갖습니다.
- LeftBottom : 화면 왼쪽 하단과 거리가 가까울수록 높은 우선순위를 갖습니다.

Label 이 겹쳐질 때 렌더링 처리 순서


  • zOrder의 값이 클수록 일반적으로 위에 그려집니다(우선 순위가 높음).
  • CompetitionType이 none 혹은 background인 경우 다른 라벨과 겹치더라도 관계없이 그려집니다. (위 아래 겹치는 순서는 zOrder 순서에 따름.)
  • CompetitionType의 upper속성을 가지는 label은 자신이 속한 layer보다 zOrder가 높은 layer에 속한 label 중에 lower속성을 가지는 label과 겹칠 경우 그려지지 않습니다.
  • CompetitionType의 same속성을 가지는 label끼리는 겹칠 경우 orderType에 따라 우선 순위가 높은 label이 그려집니다.

Label

지도의 특정 위치에 이미지와 텍스트로 정보를 표시할 수 있습니다.

LodLabel

LodLabel 은 Lod(Level of Detail)이 적용되어 많은 갯수의 Label 을 표시해야 할 때 Label 의 보여지는 우선순위를 미리 계산하여 빠르게 표시할 수 있습니다. LodLabel 은 이동 및 회전 기능이 없습니다.

PolylineLabel

PolylineLabel 은 흐르는 글씨, 구부러진 글씨를 표현할 때 사용합니다.