121 벡터기반 지하철 노선도...

벡터기반 지하철 노선도 렌더링 엔진

안덕용 과장 / 지도앱 개발팀 Naver

CONTENTS 1.SVG to Model Data����������� ������������������  

2.Vector Rendering Engine����������� ������������������  

3.Q&A����������� ������������������  ����������� ������������������  

����������� ������������������  

1. SVG to Model Data

1.1 Intro

1.1 Intro

1.1 Intro

1.2 벡터 개발의 시작

1.3 벡터 데이터 포멧

Designer Easy Programmer

Easy for Designer 1. 많은 사람들이 사용하는 벡터 디자인 툴을 이용해서 쉽게 디자인 할 수 있어야 할 것

2. 디자이너가 각 벡터 오브젝트에 이름을 쉽게 명시 할 수 있을 것

Easy for Programmer 1. File Import 및 개발하기 편해야 할 것

2. 쉽게 디버깅이 가능해야 할 것

SVG AI CDR CGM DXF EVA EMF Gerber HVIF IGES PGML VML WMF Xar SVG

1.3 벡터 데이터 포멧

SVG(Scalable Vector Graphic) : XML 기반

1.3 벡터 데이터 포멧

SVG(Scalable Vector Graphic) : XML 기반 1. 지하철과 같이 복잡한 SVG에 적합한 오픈 소스가 없다

2. 필요한 데이타만 Import

1.3 벡터 데이터 포멧

Element 비고 지하철 노선 path

line polyline polygon rect

지하철 역 circle 역 좌표 text 역 이름

SVG(Scalable Vector Graphic) : XML 기반 1. 지하철과 같이 복잡한 SVG에 적합한 오픈 소스가 없다

2. 필요한 데이타만 Import

1.4 모델 데이터 만들기

SVG File

Rendering Data VM 2 Meta Data

SVG File Model Data 1. Rendering Data (호선별 전체 라인)

2. Meta Data (호선별 구간 라인, 지하철 역)

1.4 모델 데이터 만들기

호선별 전체 라인

호선별����������� ������������������  구간����������� ������������������  라인����������� ������������������  

지하철����������� ������������������  역����������� ������������������  

1.4 모델 데이터 만들기

SVG File

호선별 전체 라인

호선별 구간 라인

지하철역

Data Model

렌더링 데이터

메타 데이터

1.4 모델 데이터 만들기

SVG File

호선별 구간 라인

지하철역

메타 데이터

Data Model Server Data

위경도 좌표

지하철 역 이름 / ID

1.4 모델 데이터 만들기

SVG File

호선별 전체 라인

호선별 구간 라인

지하철역

Server Data

위경도 좌표

지하철 역 이름 / ID

SVG Processer

렌더링 데이터 최적화

메타 데이터

Data Model

1.5 모델 데이터 자동화

SVG File 호선별 전체 라인

호선별 구간 라인

지하철역

Server Data

위경도 좌표

지하철 역 이름 / ID

SVG Processor

렌더링 최적화

Rendering

지하철역 정보

Meta Data

노선 구간 정보

1.5 모델 데이터 자동화

IOS Android WEB

2. Vector Rendering Engine

2.1 Vector Rendering Engine

Tile Bitmap One Bitmap

대표적인 지하철 노선도 렌더링 방식

2.1 Vector Rendering Engine

Full Vector Rendering 1. 적은 용량의 벡터 데이터만 있으면 된다

2. 해상도에 전혀 상관이 없다

3. 렌더링이 느리다

Bitmap Rendering 1. 서버를 통해 Bitmap을 받아오거나, Bitmap을 저장할 공간이 필요하다

2. 해상도에 따라 이미지 뭉개짐

3. 렌더링이 빠르다

Bitmap Rendering Based On Vector Model 1. 적은 용량의 벡터 데이터만 있으면 된다

2. 해상도에 따라 이미지 뭉개짐이 덜하다

3. 렌더링이 빠르다

2.1 Vector Rendering Engine

Vector Data

Rendering

지하철 노선도 렌더링 방식 : 벡터 타일 방식

2.1 Vector Rendering Engine

지하철 노선도 렌더링 방식 : 벡터 타일 방식

Vector Data

Rendering

2.1 Vector Rendering Engine

지하철 노선도 렌더링 방식 : 벡터 타일 방식

2.1 Vector Rendering Engine

지하철 노선도 렌더링 방식 : 벡터 타일 방식 장점 1. 적은 용량의 벡터 데이터만 있으면 된다

2. 해상도에 따라 이미지 뭉개짐이 덜하다

3. 렌더링이 빠르다

4. 화면에 보이지 않는 타일은 로딩되지 않는다

단점 1. 벡터 데이터로 타일을 하나를 만들때 소요되는 시간이 기기별로 틀리다.

2.1 Vector Rendering Engine

Vector Model to Bitmap Tile

2.1 Vector Rendering Engine

Vector Model to Bitmap Tile : SVGRenderer

2.2 Bitmap Tile Cache

SoftReference / WeekReference Cache 1. Android 2.3(API9) : SoftReference / WeekReference GC 빈번

2. 즉, StrongReference 가 사라지면 바로 GC 대상

LruCache 1. LruCache는 LinkedHashMap에 의해 StrongReference 유지

2. Cache에 사용할 메모리 사이즈를 지정 (지정된 메모리 사이즈가 넘을 시, Hit가 되지 않는 것들은 제거)

3. Support Library

4. http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html

2.2 Bitmap Tile Cache

Bitmap Tile Cache : Use LRU Cache

Strong Reference

LRU Cache

2.2 Bitmap Tile Cache

Bitmap Tile Cache : Use LRU Cache

New Strong

Reference

LRU Cache 로 이동

2.2 Bitmap Tile Cache

Bitmap Tile Cache : Use LRU Cache 1. LRUCacheSize < Memory : Tile 제거

2. OOM 발생시

- LRUCache clear

- Bitmap.Config.RGB_565 변경

2.2 Bitmap Tile Cache

Bitmap Tile Cache : Use LRU Cache

2.2 Bitmap Tile Cache

Bitmap Tile Cache : Use LRU Cache

2.3 The End

Q&A

THANK YOU