121 벡터기반 지하철 노선도...
TRANSCRIPT
벡터기반 지하철 노선도 렌더링 엔진
안덕용 과장 / 지도앱 개발팀 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