Explains a novel vector tilling method for constructing efficient Web Mapping Systems and explains its application to SVGMap in japanese.　The English version will be posted at a later date. 効率的なWebMappingシステムを構築するための、新なベクタータイルマップ方式の説明と、そのSVGMapへの適用について説明しています。

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