チュートリアル9

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(データの内容)
60行: 60行:
 
*3桁目:県名
 
*3桁目:県名
 
*2桁目:市区町村名
 
*2桁目:市区町村名
 +
 +
==Container.svg==
 +
*メッシュデータを表示する主題レイヤと、背景地図(OpenStreetMap)をanimation要素で読み込んでいます。
 +
*[[チュートリアル6#Container.svg|チュートリアル6]]同様にクリッカブルなレイヤーを指定しています。
 +
**後述のように、メッシュデータをベクトルデータとして可視化し対話性を実現するため、class属性でclickableを指定しています。
 +
<pre>
 +
<?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>
 +
</pre>

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

目次

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

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

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

表示するデータ

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

データの内容

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

データの準備

元データの準備

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

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

  • 1行目:空白行
  • 2行目以降:
    • 1桁目:自治体コード(県コード 数字2文字)
    • 2桁目以降:2次メッシュコード

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

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

  • ファイル名の[4桁の数字]:1次メッシュコード
  • 1行目:1次メッシュコード
  • 2行目以降:
    • 1桁目:自治体コード(市区町村コード 数字5桁)
    • 2桁目以降:3次メッシュコードの下4桁(1行目の1次メッシュコードを先頭に付与することで3次メッシュコードが得られる:簡易的なデータ圧縮のため)

注記

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

code_name.csv

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

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>
個人用ツール
名前空間

変種
操作
案内
ツール
Translate