2022年2月9日 (水) 09:16時点における版

チュートリアル9 WebApp Layer メッシュタイル

タイル分割されたメッシュデータを表示するチュートリアルです。読み込むメッシュデータはチュートリアル8と異なり、Gridded XYZタイプのデータを扱ってみます。

また、チュートリアル8よりも大きいデータ（メッシュ数が多い、細かい）を扱います。そのためタイリングに加えて簡単なタイルピラミッドを構築し、小縮尺と大縮尺で表示するデータを変化させる機能(Level of Detail)も実装します。

表示するデータ

使用するグリッド化ルール

• 地域基準メッシュをグリッド化のルールとしたデータを使用します。

データの内容

• 統計局の市区町村別メッシュ・コード一覧で公開されているデータを使います
• 各メッシュがどの自治体に属しているのかを可視化することにします
• 小縮尺では２次メッシュ（約10Km四方のメッシュ）で県レベル、　大縮尺では３次メッシュ（約1Km四方）で市区町村レベルの可視化をしてみます。

データの準備

元データの準備

• こちらのWebAppでデータを取得します。
• このwebAppは 統計局の市区町村別メッシュ・コード一覧からすべてのCSVを自動的に取得し、指定したメッシュレベルのCSVデータが保存できます。（すべてブラウザ上で実行）
• 操作方法
  • japanMesh_r3.htmlにアクセス
    • CSVデータの収集が完了するまでしばらく待ちます。
  • 市区町村を選択
  • ３次メッシュを選択
  • 集計実行を押す
  • CSVをダウンロード　を選択するとCSVが保存できる (mesh.csvで保存)

タイルピラミッドの構築

本チュートリアルはバックエンドにDBや動的なwebサービスを配置しない、Jamstackな構成とします。

取得した元データから静的なタイルぴピラミッドデータ（CSVファイル群）を生成します。生成のためのツールはこちらに用意したmesh2tileBasic.pyを使います。

• mesh2tileBasic.pyをローカルPCに保存
• 作業ディレクトリにtilesディレクトリを用意
• python mesh2tileBasic.py mesh.csv　で実行(mesh.csvはDLした元データのファイルパス)
• tilesディレクトリにタイル分割されたメッシュデータが保存されています。

タイルピラミッドデータの説明

top.csv

小縮尺用のデータ（タイルピラミッドの頂点のデータ）

• １行目：空白行
• ２行目以降：
  • １桁目：自治体コード（県コード　数字２文字）
  • ２桁目以降：２次メッシュコード

[４桁の数字].csv　例:5339.csv

大縮尺用のタイル分割されたデータ（１次メッシュ単位で分割しています）

• ファイル名の[４桁の数字]：１次メッシュコード
• １行目：１次メッシュコード
• ２行目以降：
  • １桁目：自治体コード（市区町村コード　数字５桁）
  • ２桁目以降：３次メッシュコードの下４桁（１行目の１次メッシュコードを先頭に付与することで３次メッシュコードが得られる：簡易的なデータ圧縮のため）

注記

• 上記２種類のファイルがGridded XYZデータに相当します。XYデータが一見ないように見えますが、メッシュコードはグリッド化されたXY座標を符号化した情報であるためです。
• また、本来のもっとも一般的なGridded XYZデータは、１行に１個ずつのXYZデータがあります。　一方、今回のデータは１行に　 Z,XY1,XY2,XY3.....XYn　という形で、共通のZ値を持った複数のXY値を１行に可変長で符号化した少し変則的なデータになっています。（データサイズが小さくなるため）

code_name.csv

• チュートリアル9bのためのデータ。市区町村コードと自治体名称との間の辞書データです。
• １桁目：市区町村コード
• ２桁目：国名
• ３桁目：県名
• ２桁目：市区町村名

Container.svg

• メッシュデータを表示する主題レイヤと、背景地図(OpenStreetMap)をanimation要素で読み込んでいます。
• チュートリアル6同様にクリッカブルなレイヤーを指定しています。
  • 後述のように、メッシュデータをベクトルデータとして可視化し対話性を実現するため、class属性でclickableを指定しています。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="122.9800817, -45.398095, 21.97626, 21.0533039" >
 <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />

<!-- OpenStretMap背景地図を表示状態として読み込む -->
<animation xlink:href="../tutorial5/dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" visibility="visible"/>

<!-- 自治体コード3次メッシュデータレイヤーを表示状態として読み込む -->
<animation xlink:href="meshTileViewer.svg" x="-3000" y="-3000" width="6000" height="6000" title="admCode" class="Mesh clickable" visibility="visible" opacity="0.6"/>
</svg>

meshTileViewer.svg

• ドキュメントルート要素(svg要素)の、data-controller属性で、このレイヤーを操作するwebAppを指定しています。
  • data-controller="meshTileViewer.html#exec=hiddenOnLayerLoad
  • exec=hiddenOnLayerLoadは、レイヤが表示状態になるとwebAppのウィンドが隠れた状態で動作する設定です。（詳しくはこちら）

<?xml version="1.0" encoding="UTF-8"?>
<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-42.8202042942663, -49.9999999999999, 513.842451531196, 600" xmlns:go="http://purl.org/svgmap/profile"  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" property="Local government codes" data-controller="meshTileViewer.html#exec=hiddenOnLayerLoad">

<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100,0,0,-100,0,0)" />
</svg>