Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Quad Tree Composite Tiling for Web Mapping (in Japanese)

83 views

Published on

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への適用について説明しています。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Quad Tree Composite Tiling for Web Mapping (in Japanese)

  1. 1. Quad Tree Composite Tiling / SVGMap 効果的なベクトルラスタータイリング Satoru Takagi
  2. 2. タイリング
  3. 3. 地図のタイリング • 表示領域に応じて、大きな地図の一部だけを効率よく読み込めるように Viewport
  4. 4. タイルのピラミッド • ズームに応じて、効率よく読み込めるように View port View port View port Zoom=0 Zoom=1 Zoom=2 Zoom=3 View port
  5. 5. Quad Tree Composite Tiling ベクトルタイリングの課題とその対策の検討
  6. 6. タイル生成の課題 • データの間引き・要約化をしない限り、 小縮尺タイルでデータサイズが増大 • データ密度の場所依存性が著しいと、 タイルサイズがばらつく 課題の顕在化 • ビットイメージ:解像度により上限が固定 されているため、問題は「さほど」顕在化 しない • ベクトルデータ:致命的なほど顕在化す ることが多い
  7. 7. Quad Tree Tiling 閾値以下になるまで、再帰的に4等分 この例ではポイントが2個以下 特にベクターデータに対し、タイルあたり のデータサイズ均質化に効果
  8. 8. Quad Tree Tiling 閾値以下になるまで、再帰的に4等分 この例ではポイントが2個以下 特にベクターデータに対し、タイルあたり のデータサイズ均質化に効果 しかしこれだけでは、 得られたタイルサイズにより、適したズー ムレンジは決まってしまう Viewport これでは意味がない
  9. 9. Quad Tree Tiling 閾値以下になるまで、再帰的に4等分 この例ではポイントが2個以下 特にベクターデータに対し、タイルあたり のデータサイズ均質化に効果 しかしこれだけでは、 得られたタイルサイズにより、適したズー ムレンジは決まってしまう Viewport これは意味がある
  10. 10. Quad Tree Tilingのピラミッド [Quad Tree Composite Tiling] ベクトルタイル生成 : これ以上のズーム率では、常にこのベクトルタイルを使用する ラスタータイル生成 : このズーム率でのみ、このタイルを使用する Note: 間引き・要約したベクトルタイルでも良い Zoom=0 Zoom=1 Zoom=2 Zoom=3
  11. 11. Quad Tree Tilingのピラミッド [Quad Tree Composite Tiling] ベクトルタイル生成 : これ以上のズーム率では、常にこのベクトルタイルを使用する ラスタータイル生成 : このズーム率でのみ、このタイルを使用する Note: 間引き・要約したベクトルタイルでも良い Zoom=0 Zoom=1 Zoom=2 Zoom=3 Viewport この部分は、より 低ズームレベル で生成済みのベ クトルタイルが使 用される
  12. 12. Quad Tree Composite Tilingの特長 • タイルのサイズが均質化できる • ピラミッドを考えたとき、タイルの総数を少なくできる • ベクトルデータをタイルとして使える • ラスターとベクターの利点を使い分けられる • 小縮尺・データ密集状態ではラスターで概観 • 個々のデータが識別できるまで拡大したらベクトルで詳細確認 課題:異質な方式なので、実装にハードルがある
  13. 13. SVGMapへの適用
  14. 14. 既存の地図フレームワーク(FW) • TMS等の業界標準or固有タイリング方式組込 • これらの方式は全て、既存の均等タイリング・ピラミッド構造 • さらに、FWの基本アーキテクチャがこの方式に強依存 ⇒ Quad Tree Composite Tilingの導入は、 FWを新たに構築することに近い
  15. 15. SVGMap / SVG: • 組み込みのタイリング方式はない SVGMapとは? • JIS: X.7197 (地理情報―SVGに基づく地図の表現及びサービス) 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. 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. 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. 18. SVGMap / SVG: • 表示する必要があるデータを必要に応じて読み込む仕様 があるのみ Index.svg tile1.svg tile0.svg tile2.svg 表示ズームレンジ外 で、非表示 Viewport Viewport外なので読み込み対象外 非表示状態なので読み込み対象外 表示状態且つViewportに入っているので読み込み対象
  19. 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. 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. 21. SVGMap / SVG: 故に、アーキテクチャの変更なしに、 Quad Tree Composite Tilingが容易に導入できる ただし、 全てのタイリングは、「インライン展開」するしかない? 否、 SVGでは<script>が使える 均等タイリング・ピラミッドは、 数列的DOM生成関数を作って容易に実装できる (100ステップ程度) 例:view-source:http://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r10.svg
  22. 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

×