Quad Tree Composite Tiling for Web Mapping (in Japanese)

1. Quad Tree Composite Tiling / SVGMap 効果的なベクトルラスタータイリング Satoru Takagi

2. タイリング

3. 地図のタイリング • 表示領域に応じて、大きな地図の一部だけを効率よく読み込めるように Viewport

4. タイルのピラミッド • ズームに応じて、効率よく読み込めるように View port View port View port Zoom=0 Zoom=1 Zoom=2 Zoom=3 View port

5. Quad Tree Composite Tiling ベクトルタイリングの課題とその対策の検討

6. タイル生成の課題 • データの間引き・要約化をしない限り、小縮尺タイルでデータサイズが増大 • データ密度の場所依存性が著しいと、タイルサイズがばらつく課題の顕在化 • ビットイメージ：解像度により上限が固定されているため、問題は「さほど」顕在化しない • ベクトルデータ：致命的なほど顕在化することが多い

7. Quad Tree Tiling 閾値以下になるまで、再帰的に４等分この例ではポイントが２個以下特にベクターデータに対し、タイルあたりのデータサイズ均質化に効果

8. Quad Tree Tiling 閾値以下になるまで、再帰的に４等分この例ではポイントが２個以下特にベクターデータに対し、タイルあたりのデータサイズ均質化に効果しかしこれだけでは、得られたタイルサイズにより、適したズームレンジは決まってしまう Viewport これでは意味がない

9. Quad Tree Tiling 閾値以下になるまで、再帰的に４等分この例ではポイントが２個以下特にベクターデータに対し、タイルあたりのデータサイズ均質化に効果しかしこれだけでは、得られたタイルサイズにより、適したズームレンジは決まってしまう Viewport これは意味がある

10. Quad Tree Tilingのピラミッド [Quad Tree Composite Tiling] ベクトルタイル生成：これ以上のズーム率では、常にこのベクトルタイルを使用するラスタータイル生成：このズーム率でのみ、このタイルを使用する Note: 間引き・要約したベクトルタイルでも良い Zoom=0 Zoom=1 Zoom=2 Zoom=3

11. Quad Tree Tilingのピラミッド [Quad Tree Composite Tiling] ベクトルタイル生成：これ以上のズーム率では、常にこのベクトルタイルを使用するラスタータイル生成：このズーム率でのみ、このタイルを使用する Note: 間引き・要約したベクトルタイルでも良い Zoom=0 Zoom=1 Zoom=2 Zoom=3 Viewport この部分は、より低ズームレベルで生成済みのベクトルタイルが使用される

12. Quad Tree Composite Tilingの特長 • タイルのサイズが均質化できる • ピラミッドを考えたとき、タイルの総数を少なくできる • ベクトルデータをタイルとして使える • ラスターとベクターの利点を使い分けられる • 小縮尺・データ密集状態ではラスターで概観 • 個々のデータが識別できるまで拡大したらベクトルで詳細確認課題：異質な方式なので、実装にハードルがある

13. SVGMapへの適用

14. 既存の地図フレームワーク(FW) • TMS等の業界標準or固有タイリング方式組込 • これらの方式は全て、既存の均等タイリング・ピラミッド構造 • さらに、FWの基本アーキテクチャがこの方式に強依存 ⇒ Quad Tree Composite Tilingの導入は、 FWを新たに構築することに近い

15. SVGMap / SVG： • 組み込みのタイリング方式はない SVGMapとは? • JIS: X.7197 (地理情報―ＳＶＧに基づく地図の表現及びサービス) https://webdesk.jsa.or.jp/books/W11M0090/index/?bunsyo_id=JIS%20X%207197:2012 • SVGをもとに拡張した仕様 SVG: Scalable Vector Graphics：ウェブブラウザのための伸縮可能なグラフィックスデータ記述言語 http://w3.org/svg • W3Cで標準化作業中

16. SVGMap / SVG： • 任意矩形領域に任意データを埋め込む仕様と、 (svg2:iframe, svg1.2T:animation, svg1.1:image) Index.svg <Image x=“x0” y=“y0” width=“w0” height=“h0” xlink:href=“tile0.svg” /> <Image x=“x1” y=“y1” width=“w1” height=“h1” xlink:href=“tile1.svg” /> <Image x=“x2” y=“y2” width=“w2” height=“h2” xlink:href=“tile2.svg” /> tile1.svg tile0.svg tile2.svg

17. SVGMap / SVG： • 任意縮尺レンジで任意データの表示非表示を制御する仕様と、 Index.svg <Image x=“x0” y=“y0” width=“w0” height=“h0” xlink:href=“tile0.svg” visibleMaxZoom=“400” /> <Image x=“x1” y=“y1” width=“w1” height=“h1” xlink:href=“tile1.svg” visibleMinZoom=“100” /> <Image x=“x2” y=“y2” width=“w2” height=“h2” xlink:href=“tile2.svg” visibleMaxZoom=“200” visibleMinZoom=“50”/> tile1.svg tile0.svg tile2.svg

18. SVGMap / SVG： • 表示する必要があるデータを必要に応じて読み込む仕様があるのみ Index.svg tile1.svg tile0.svg tile2.svg 表示ズームレンジ外で、非表示 Viewport Viewport外なので読み込み対象外非表示状態なので読み込み対象外表示状態且つViewportに入っているので読み込み対象

19. • “基本的には”タイルをimage要素でインライン展開したコンテンツを作る X0,y0 w h <svg> <image x=“x0” y=“y0” width=“w” height=“h” href=“t00.png”/> <image x=“x0+w” y=“y0” width=“w” height=“h” href=“t10.png”/> <image x=“x0+2w” y=“y0” width=“w” height=“h” href=“t20.png”/> <image x=“x0+3w” y=“y0” width=“w” height=“h” href=“t30.png”/> <image x=“x0” y=“y0+h” width=“w” height=“h” href=“t01.png”/> <image x=“x0+w” y=“y0+h” width=“w” height=“h” href=“t11.png”/> <image x=“x0+2w” y=“y0+h” width=“w” height=“h” href=“t21.png”/> <image x=“x0+3w” y=“y0+h” width=“w” height=“h” href=“t31.png”/> <image x=“x0” y=“y0+2h” width=“w” height=“h” href=“t02.png”/> <image x=“x0+w” y=“y0+2h” width=“w” height=“h” href=“t12.png”/> <image x=“x0+2w” y=“y0+2h” width=“w” height=“h” href=“t22.png”/> <image x=“x0+3w” y=“y0+2h” width=“w” height=“h” href=“t32.png”/> <image x=“x0” y=“y0+3h” width=“w” height=“h” href=“t03.png”/> <image x=“x0+w” y=“y0+3h” width=“w” height=“h” href=“t13.png”/> <image x=“x0+2w” y=“y0+3h” width=“w” height=“h” href=“t23.png”/> <image x=“x0+3w” y=“y0+3h” width=“w” height=“h” href=“t33.png”/> </svg> t00.png t33.png t30.png t03.png SVGMapでのタイリング

20. <svg> <g visibleMaxZoom=“200”> <image x=“x0” y=“y0” width=“w0” height=“h0” href=“z0_t00.png”/> </g> <g visibleMinZoom=“200” visibleMaxZoom=“400”> <image x=“x0” y=“y0” width=“w1” height=“h1” href=“z1_t00.png”/> …. </g> <g visibleMinZoom=“400”> <image x=“x0” y=“y0” width=“w2” height=“h2” href=“z2_t00.png”/> …. </g> </svg> X0,y0 w0 h0 z0_t00.png X0,y0 w2 h2 z2_t00.png z2_t33.png z2_t30.png z2_t03.png X0,y0 w1 h1 z1_t00.png z1_t11.png z1_t10.png z1_t01.png • インライン展開したタイル群に表示ズームレンジ属性をつける SVGMapでのタイルのピラミッド

21. SVGMap / SVG：故に、アーキテクチャの変更なしに、 Quad Tree Composite Tilingが容易に導入できるただし、全てのタイリングは、「インライン展開」するしかない？否、 SVGでは<script>が使える均等タイリング・ピラミッドは、数列的DOM生成関数を作って容易に実装できる（１００ステップ程度）例：view-source:http://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r10.svg

22. Quad Tree Composite Tiling / SVGMapTools：実装としては、コンテンツ生成時点でQuad Tree Composite Tileとして「インライン展開された」静的コンテンツを生成するツールを公開 SVGMapTools: csvやshapefileからSVGMapコンテンツ生成 https://github.com/svgmap/svgMapTools デモ： worldcities (全世界の都市(317万点) from MaxMind)を可視化 http://svgmap.org/devinfo/devkddi/lvl0.1/demos/demo0.html#visibleLayer=worldcities Back-end computer WebBrowserWebServer CSV, shapefile SVGMap Tools SVGMap Tiles SVGMap. js HTML 5 Internet