Shape

1. Overview

Shape 에는 일련의 연결 된 선분으로 표시하는 Polyline 과 닫힌 도형을 표시하는 Polygon 클래스가 있습니다. 이것들을 통칭하여 Shape 이라고 정의합니다. 아래의 다양한 도형과 스타일의 Shape 들은 샘플 프로젝트 에서 예제코드를 확인 할 수 있습니다.

Polygon 으로 표시할 수 있는 다양한 형태의 도형과 스타일

Circle	Rectangle	Area	Multi	Animation

Polyline 으로 표시할 수 있는 다양한 형태의 도형과 스타일

Circle	Rectangle	Area	Multi

2. ShapeManager

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

// ShapeManager 를 가져오는 방법
kakaoMap.getShapeManager();

3. ShapeLayer

ShapeLayer 는 Polygon 과 Polyline 의 생성 및 삭제와 같은 객체관리를 하는 컨테이너 역할을 합니다. 뿐만 아니라, zOrder 값을 이용해 ShapeLayer 간에 Shape 들이 겹칠 때 어떤 것이 보여지게 할 지 렌더링 우선순위를 설정할 수 있고, VectorLayerPass 값을 이용해 Shape 이 지도의 Overlay 와 RouteLine 사이에서 어떤 순서로 그려질 지 렌더링 우선순위를 설정 할 수 있습니다.

ShapeLayer 생성하기

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

// 1. ShapeManager 에 미리 생성 된 디폴트 ShapeLayer 가져오는 방법 
shapeManager.getLayer();

// 2. 사용자 커스텀으로 ShapeLayer 생성 및 가져오는 방법
shapeManager.addLayer(ShapeLayerOptions.from("myShape", 10001, VectorLayerPass.Default));

Shape 의 렌더링 우선순위 설정하기

Shape 들 간에 또는 다른 그래픽 오브젝트들과 겹쳐질 때, 어떤 것을 겹치게 보여지게 할지 설정 할 수 있습니다. 기본적으로 지도의 렌더링 우선순위 안에서 동작합니다.

• zOrder - ShapeLayer 또는 Shape 각각에 설정 할 수 있고, zOrder 값이 클수록 더 위에 보여짐.
• VectorLayerPass - ShapeLayer 에 설정 할 수 있고, Shape 이 지도의 Overlay 와 RouteLine 사이에서 어떤 순서로 그려질 지 설정하는 옵션.

zOrder

• zOrder 값이 클수록 더 위에 보여진다.
  

VectorLayerPass

4. ShapeAnimator 적용하기

ShapeAnimator 를 이용하여 Shape 에 애니메이션 효과를 줄 수 있습니다. 현재 Shape 에 지원되고 있는 Animation 은 CircleWaves 만 있습니다. CircleWaves 애니메이션은 CircleWave 의 컨테이너 역할을 합니다.

CircleWaves 애니메이션의 Property

CircleWave 의 Property

ShapeAnimator 적용 예제코드

ShapeAniamtor 는 Polyline 도 똑같이 적용됩니다.

// 1. AnimationOptions 설정
CircleWaves circleWaves = CircleWaves.from("CircleWaveAnimatorId")
      .setRepeatCount(3)
      .setDuration(1000)
      .setInterpolation(Interpolation.CubicIn)
      .addCircleWave(CircleWave.from(0.7f, 0.0f, 0.0f, 100.0f));

// 2. ShapeAnimator 생성         
ShapeAnimator animator = shapeManager.addAnimator(circleWaves);

// 3. 애니메이션을 적용 할 Shape 준비
Polygon circle = layer.addPolygon(getCircleOptions(LatLng.from(37.3849851, 127.1174393), 1));

// 4. ShapeAnimator 에 Shape 추가 
animator.addPolygons(circle);

// 5. 애니메이션 시작
animator.start();