FOSS4G で地理院タイルを使ってみよう！

Size: px

Start display at page:

Download "FOSS4G で地理院タイルを使ってみよう！"

えみしげい
5 years ago
Views:

1 FOSS4G で地理院タイルを使ってみよう! OSGeo 財団日本支部

利用するソフトウェアのバージョンは QGIS は 2.14 leaflet は 1.0.

3 1. 本日の内容このハンズオンでは FOSS4G と呼ばれるオープンソース GIS のうち代表的なデスクトップ GIS である QGIS i と Web の地図表示ライブラリである leaflet ii を用いて地理院タイルを利用する方法について実習を行います利用するソフトウェアのバージョンは QGIS は 2.14 leaflet はとします利用するデータは参加者自身が持参するデータも利用可能としますがサンプルとしてはむろらんオープンデータライブラリ iii の避難所および空中写真データを用います QGIS Web ページ leaflet Web ページ

4 むろらんオープンデータライブラリ Web ページ 2.QGIS を用いた地理院タイルの活用法 2.1 概要 QGIS は FOSS4G の中でも代表的なデスクトップ GIS ですがインターネット接続環境があればネットワーク経由で様々なデータを読み組むことができます地理院タイルを読み込むにもいくつかの方法があるのですがここでは TileLayerPlugin iv を使った方法を解説しますプラグインとは QGIS に追加することにより機能を拡張するためのツールですこれにより QGIS は多くの機能を使うことができます TileLayerPlugin の Web ページ

本ハンズオンでは以下の手順の作業を行います (1) QGIS に TileLayerPlugin をインストールと地理院タイルの表示 (2) 位置情報をもった CSV ファイルを QGIS 上に表示する (3) 表示したデータを属性に基づき凡例を変える (4) 作成した地図を Web で 3D 表示するように出力する実習に移る前に QGIS におけるデータの扱いについて簡単に説明します

5 本ハンズオンでは以下の手順の作業を行います (1) QGIS に TileLayerPlugin をインストールと地理院タイルの表示 (2) 位置情報をもった CSV ファイルを QGIS 上に表示する (3) 表示したデータを属性に基づき凡例を変える (4) 作成した地図を Web で 3D 表示するように出力する実習に移る前に QGIS におけるデータの扱いについて簡単に説明します多くの GIS ソフトウェアは表示するデータと GIS 上で表示を別々に管理します例えばワープロソフトでは書かれている文字自体の情報とページ設定文字のサイズ色段落等のレイアウトに関する情報が一括して一つのファイルに保存されます GIS ソフトウェアでは文字自体の情報と上記のレイアウトに関する情報が別々に保存されるイメージですですのでレイアウトに関する編集を行っても元のデータは変更されません以下に QGIS におけるデータの表示例を示します QGIS では表示範囲レイヤの順序シンボルのスタイルなどの項目をプロジェクトという単位で管理しますプロジェクトに読み込まれているデータは左のレイヤパネルに表示されますパネルにはレイヤパネル以外のものも存在します地図データが表示されている部分を地図ビューと呼びますメニューバーツールバーは一般的なソフトウェアと同じですが下部のステータスバーには GIS 独自の座標位置縮尺座標系といった情報が表示されます QGIS の GUI とデータの表示例 1 メニューバー 2 ツールバー 3 パネル 4 地図ビュー 5 ステータスバー 2.2 TileLayerPlugin のインストール設定と地理院タイルの表示次に TileLayerPlugin をインストールしますメニューのプラグインプラグインの管理とインス

トールをクリックします表示されたウィンドの検索の部分に TileLayer と入力して下さいに TileLayer Plugin が表示されますのでにチェックを入れプラグインのインストールボタンをクリックしますこれでインストールの完了ですプラグインの管理画面次に地理院タイルを読み込めるように TileLayer Plugin の設定を行いますまず https://gist.

6 トールをクリックします表示されたウィンドの検索の部分に TileLayer と入力して下さいに TileLayer Plugin が表示されますのでにチェックを入れプラグインのインストールボタンをクリックしますこれでインストールの完了ですプラグインの管理画面次に地理院タイルを読み込めるように TileLayer Plugin の設定を行いますまずから GSIMaps.tsv という設定ファイルをダウンロードしますダウンロードしたファイルを分かりやすいところにコピーして下さいたとえば C: layers などがお勧めですこの tsv ファイルにタイルレイヤを読み込むための設定が書かれています GSIMaps.tsv ファイルの公開ページ次に Web タイルレイヤプラグインタイルレイヤを追加するをクリックして下さい表示された

タイルレイヤを追加するウィンドの左下に設定ボタンがありますのでそれをクリックします

プラグインの設定は完了です設定が正しく行われていれば各種地理院タイルが表示されています

7 タイルレイヤを追加するウィンドの左下に設定ボタンがありますのでそれをクリックしますさらに表示されたタイルレイヤプラグイン設定ウィンドの外部レイヤ定義ディレクトリに先ほど GSIMaps.tsv ファイルを保存したディレクトリを指定しますそして OK ボタンをクリックするとプラグインの設定は完了です設定が正しく行われていれば各種地理院タイルが表示されていますタイルレイヤを追加するウィンドタイルレイヤプラグイン設定設定完了後のタイルレイヤを追加するウィンド設定完了後のタイルレイヤを追加するウィンドで標準地図をダブルクリックして下さい以上で QGIS 上に地理院地図が表示されました

QGIS 上での地理院地図標準タイルの表示例なおこの様にして表示したデータや後述するような凡例を変更したものをプロジェクトとして保存することができますメニューのプロジェクト保存をクリックして下さい表示されたダイアログで名前を付けて保存することにより次回からは作業の途中から再開することが可能になりますプロジェクトの保存メニュー 2.

8 QGIS 上での地理院地図標準タイルの表示例なおこの様にして表示したデータや後述するような凡例を変更したものをプロジェクトとして保存することができますメニューのプロジェクト保存をクリックして下さい表示されたダイアログで名前を付けて保存することにより次回からは作業の途中から再開することが可能になりますプロジェクトの保存メニュー 2.3 位置情報をもった CSV ファイルの表示近年では様々な地理空間情報が公開されています一方で自分が必要とする情報が公開されていない場合も多くありますその様な場合 GPS 等を使って位置情報を取得することが有効です特に最近では多くのスマートフォンに GPS が搭載されているためアプリを用いて位置情報を得ることが格段に容易になりましたここではむろらんオープンデータライブラリで公開されている室蘭市の避難場所 vを例に CSV ファイルの表示を行います CSV ファイルとは表計算ソフトでいえばセルとセルの間がカンマで区切られた形のテキストファイルになります多くの表計算ソフトではそれぞれの独自形式とは別に CSV 形式でファイルを保存することができますまず配布した CCPN_DATA の中に含まれている hinan_ csv ファイルを開いて下さい施

レイヤの追加デリミティッドテキストレイヤの追加をクリックして下さいデリミティッドテキストレイヤの追加

9 設名称住所等様々な情報が含まれていますが右端に LON と LAT という列がありますこれがそれぞれの施設の座標になります QGIS ではこの座標の位置を点データとして表示することが可能です表計算ソフトにより CSV ファイルの表示例このデータを QGIS で開くにはメニューからレイヤレイヤの追加デリミティッドテキストレイヤの追加をクリックして下さいデリミティッドテキストレイヤの追加デリミティッドテキストファイルからレイヤを作成ウィンドが表示されますので参照をクリックし hinan_ csv ファイルを選択して下さい次に以下を図を参考にして読み込みの設定を行って下さい設定が終了したら OK をクリックして下さい

10 デリミティッドテキストファイルからレイヤを作成の設定すると設定によっては空間参照システム選択ウィンドが表示されますここでフィルタに 4326 と入力して下さいウィンドの上部または下部に WGS 84 と表示されますのでこれをクリックして OK をクリックします空間参照システム選択ウィンドの設定

を右クリックし表示されたメニューのレイヤの領域にズームするをクリックして下さいすると QGIS

11 正しく設定されていると室蘭市の位置に点が表示されます読み込んだ CSV ファイルの QGIS 上での表示ただし日本全体が表示されているため個々の点が判読できませんそこでレイヤパネルの hinan_ を右クリックし表示されたメニューのレイヤの領域にズームするをクリックして下さいすると QGIS の地図画面表示が hinan_ の全データが表示される最大ズームまで拡大されますレイヤの領域にズームするを選択

12 hinan_ の拡大表示 2.4 属性に基づく表示の変更この様な地理空間情報は座標以外にも様々な情報が含まれていることが多いですここでは含まれている属性に基づき地図上の表示を変更しますそのためにはまず表示されているデータにどの様な情報が含まれているかを確認する必要がありますこれには二つの方法があります一つは属性テーブルを開いて確認する方法ですレイヤパネルの hinan_ を右クリックし表示されたメニューの属性テーブルを開くをクリックして下さいすると hinan_ の属性テーブルが表示され全ての情報を確認することができます属性テーブルを開くを選択

13 hinan_ に含まれる属性情報もう一つの方法は個々の点をクリックして確認する方法ですこの場合レイヤパネル上で hinan_ が選択された状態でメニューのビュー地物情報表示をクリックして下さいツールバーの i に矢印のついたアイコンをクリックしてもクリックしても大丈夫ですこの状態で地図上の表示されている避難所データをクリックすると各避難所の属性情報が表示されます地図物情報表示モードへの変更個別の地物の属性情報の表示例

ここでは含まれる属性情報のうち津波避難所かどうかによって色分けを行うこととします手順は以下の通りですこれまでと同様にレイヤパネルの hinan_20160623 の上で右クリックし

レイヤプロパティウィンドここで左側のスタイルをクリックすると地物の表示方法や色サイズを選択できる画面になります左上のプルダウンメニューで地物の表示方法を選択できます例えば

14 ここでは含まれる属性情報のうち津波避難所かどうかによって色分けを行うこととします手順は以下の通りですこれまでと同様にレイヤパネルの hinan_ の上で右クリックしプロパティを選択して下さいするとレイヤプロパティウィンドが表示されますこのウィンドではレイヤ自体についての情報や表示方法を編集することができますプロパティメニューの選択レイヤプロパティウィンドここで左側のスタイルをクリックすると地物の表示方法や色サイズを選択できる画面になります左上のプルダウンメニューで地物の表示方法を選択できます例えば共通シンボルでは全ての地物が同じ凡例で表示されます分類されたでは同じ属性をもつものが同じ凡例で表示されます段階に分けられたは数値形のデータについて適応可能なもので一定の範囲の値を同じ属性で表示す

1 行目は属性が空白 ( スペース ) の場合で 3 行目は属性が含まれていない場合になります津波避難所カラムの属性値に基づくスタイル設定さらに

15 ることができますレイヤプロパティのスタイル設定画面ここでは分類されたを選択します次にカラムで津波避難所を選択し分類をクリックします以上により津波避難所カラムに含まれる値にもとづき地図上に表示されるシンボルが自動的に設定されますなおこの表示では属性が含まれていない凡例が二つあるように見えますが 1 行目は属性が空白 ( スペース ) の場合で 3 行目は属性が含まれていない場合になります津波避難所カラムの属性値に基づくスタイル設定さらに表示するシンボルの色やサイズを変更することもできます表示されているシンボルの上でダブルクリックをして下さいするとシンボルセレクタウィンドが開きます大きさの値を変えること

16 でシンボルのサイズが色のプルダウンメニューを操作することによりシンボルの色を変更することができますここではシンボルのサイズは 3 空白の場合は赤の場合は緑で表示するようにしますまたプルダウンメニューに含まれていない色を選択したい場合にはメニュー下部にある色の選択を使用することにより様々な色を選択することができますシンボルセレクタウィンド色選択ウィンド

17 属性に基づくシンボル表示の変更例 2.5 作成したデータの3D 出力この様にして作成したデータですがこのままでは QGIS 上でしか確認できません他の人にデータを見てもらう場合作成したデータとソフトウェアを一緒に渡して確認してもらうことも可能ですがソフトウェアをインストールすることや使用方法を習得することが困難な場合もありますその場合の方法の一つは表示されている画面を保存して共有することですこれはメニューのプロジェクト画像として保存から実行することが可能です別の方法として表示されているデータを Web ブラウザーで閲覧可能な形式に変換することですその場合に有効なのが Qgis2threejs vi プラグインですここでは Qgis2threejs の使用法を実習します Qgis2threejs プラグインのドキュメントページまず Qgis2threejs をインストールしますメニューのプラグインプラグインの管理とインストールをクリックします表示されたウィンドの検索の部分に Qgis2threejs と入力して下さい Qgis2threejs Plugin が表示されますのでにチェックを入れプラグインのインストールボタンをクリックしますこれでインストールの完了です

設定が確認できたらメニューの Web Qgis2threejs Qgis2threejs をクリックして下さい Qgis2threejs の設定画面が表示されますここでまず左の World をクリックして下さい

18 プラグインの管理画面次にメニューの Web Qgis2threejs Setting をクリックすると Settings ウィンドが表示されますここでは Optional Features (Plugins) の GSI Elevation Tile Provider にチェックが入っていることを確認して下さいこれは Qgis2threejs で地理院タイルの標高データを扱えるようにするための設定です Qgis2threejs の設定画面設定が確認できたらメニューの Web Qgis2threejs Qgis2threejs をクリックして下さい Qgis2threejs の設定画面が表示されますここでまず左の World をクリックして下さいここでは QGIS の地図ビューを出力する際の範囲や背景の色高さ方向の強調率を設定します地形が平坦な場合強調率を高くした方が分かりやすい図ができますここでは Vertical exaggregation の値を3として下さい

Qgis2threejs の World 設定画面次に DEM をクリックして下さいここは DEM Layer が GSI Elevation Tile となっているのを確認すれば大丈夫ですなお解像度の高いデータを出力したい場合 Resampling のスライダーバーを右

Mode を Relative to DEM とし Height を 100 として下さい最後に作成したデータの保存場所を選択します下部の Output HTML file path を C:/CCPN_DATA/qgis2threejs/index.

19 Qgis2threejs の World 設定画面次に DEM をクリックして下さいここは DEM Layer が GSI Elevation Tile となっているのを確認すれば大丈夫ですなお解像度の高いデータを出力したい場合 Resampling のスライダーバーを右端まで移動させて下さい Qgis2threejs の DEM 設定画面最後に Point の hinan_ を選択し横にチェックが入っているのを確認しますこの画面でも多くは設定しなくてもよいですが 3D の効果を見たいのであれば Z coordinate の Mode を Relative to DEM とし Height を 100 として下さい最後に作成したデータの保存場所を選択します下部の Output HTML file path を C:/CCPN_DATA/qgis2threejs/index.html と設定して下さいこれで Run をクリックすれば C:/CCPN_DATA/qgis2threejs/ の中に 3D の地図が出力されます出力したフォルダ内に含まれるファイルを全てコピーすれば他の PC 等でも閲覧することが可能ですまたサーバーにアップすることによりインターネット上から閲覧することもできます

20 Qgis2threejs の Point 設定画面なお QGIS2threejs では地図ビューに表示されている範囲の画像が出力されますそのためより詳細なデータを出力したい場合は地図ビュー上で出力したい範囲にズームインしてから作業を行う必要がありますまた設定を変えることにより様々な表示が可能になりますので余裕があればチャレンジしてみて下さい Qgis2threejs plugin の出力表示例

21 3 leaflet を用いた地理院タイルの活用法 3.1 概要 leaflet は Web ブラウザーを用いて地理空間情報を表示する際に使われるライブラリです軽量で PC のブラウザーとスマホのブラウザーの両方でシームレスに使用できることが特徴です地理院地図も leaflet をもとに作成されています地理院地図の表示画面本ハンズオンでは以下の手順で実習を行います (1) 地理院タイルを表示する (2) 独自タイルレイヤを追加する (3) 避難所のデータを追加するなお実習にあたっては HTML CSS JavaScript などの基礎的な知識があることが望ましいですですがそれがなくても実習を行うことは可能ですまた実習の際に使用するスクリプト等は以下の URL にて公開していますまた Web ブラウザーで閲覧できるサイトを構築する際には外部のサーバーを利用するかローカル環境に www サーバーを構築することが必要になりますここでは JSfiddle vii というサービスを使って外部サーバーの環境を使用しますそのため使用するデータには個人情報等が含まれないようご注意下さい 3.2 leaflet に地理院タイルを表示する初めに leaflet に地理院地図を表示する手順ですまず以下の URL から JSfiddle にアクセスして

22 下さい以下のような画面が表示されます JSfiddle の初期画面 JSfiddle の画面は上部がメニュー左が設定部分大部分を占めるコード入力画面に分割されますコード入力画面は左上が HTML 右上が CSS 左下が JavaScript を入力する画面で右下に入力した結果が表示されますまず初めに JSfiddle から leaflet を使用できるよう設定します左の設定部分の External Resources をクリックしますすると外部の JavaScript や CSS を使用できるように設定できますここにと入力し Add resource ボタンをクリックして下さい登録が成功すれば入力したところの下に leaflet.js と表示されます同様にしてを登録して下さい External Resources の登録手順

23 登録が成功すると leaflet.css が表示されますこれで leaflet が使用可能となりました次に HTML BOX に以下を書き込んで下さい ( コピーアンドペーストでも可 ) <div id="map"></div> 続けて CSS BOX に以下を書き込んで下さい #map { position: absolute; top:0; right:0; bottom:0; left:0; border: 2px solid blue; } 書き込みが終了したたら上のメニューの RUN をクリックして下さいすると以下の図のように右下の BOX に青い枠が表示されますここまでの作業で地図を表示するための箱ができたと考えて下さい次に以下を JAVASCRIPT BOX にペーストして RUN をクリックして下さい // STEP 1: 地図の生成 // 地理院タイル出典 var attribution_ct = '<a href=" 国土地理院 </a> <a

$href="http://maps.gsi.go.jp/development/ichiran.html"> 地理院タイル </a>'; // 地理院標準タイルおよび出典の読み込み var basemap_ct = L.tileLayer( 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.$

24 href=" 地理院タイル </a>'; // 地理院標準タイルおよび出典の読み込み var basemap_ct = L.tileLayer( ' attribution_ct}); // 地理院タイルを用いた地図の生成 var map = L.map('map', { layers:[basemap_ct], center: [ , ], zoom: 11 }); すると下図のように室蘭周辺の地図が表示されます室蘭周辺の地理院タイルの表示ここで少し解説すると // 地理院タイル出典以下では leaflet 上で表示する地理院タイルへのリンク等を設定しています // 地理院標準タイルおよび出典の読み込みでは上記の出典と表示する地理院タイルを設定していますそして // 地理院タイルを用いた地図の生成において最初に作成した枠に表示する地図データを生成しています以上の手順で leaflet を用いて地理院タイルを表示することが可能となります

25 3.3 独自タイルレイヤを追加する次に地理院タイルの標準レイヤ以外のタイルを追加する手順ですここではむろらんオープンデータライブラリの空中写真から作成した高解像度のタイル画像を使用することとしますまたそうした高解像度の空中写真がない場合は地理院タイルの空中写真レイヤを使用することも可能です JAVASCRIPT BOX の中を全て削除し以下をペーストして RUN をクリックして下さい // STEP 2: 室蘭市空中写真追加 // これまで入力した部分を消して以下をペースト // 地理院タイル出典 var attribution_ct = '<a href=" 国土地理院 </a> <a href=" 地理院タイル </a>'; // 地理院標準タイルおよび出典の読み込み var basemap_ct = L.tileLayer( ' attribution_ct}); // 室蘭市オープンデータ出典 var attribution_muroran = '<a href=" target="_blank"> 室蘭市オープンデータ </a>'; // 室蘭市空中写真タイルおよび出典の読み込み var basemap_muroran = L.tileLayer(' {attribution: attribution_muroran, tms: true}); // 地理院タイル室蘭市空中写真を用いた地図の生成 var map = L.map('map', { layers:[basemap_ct, basemap_muroran], center: [ , ], zoom: 11 }); // 地理院タイル室蘭空中写真の追加 var basemaps = { " 地理院タイル ": basemap_ct, " 室蘭市空中写真 ": basemap_muroran };

26 // 選択コントロールの追加 L.control.layers(baseMaps).addTo(map); すると結果表示画面の右上のレイヤ選択コントロールが追加され以下の通り地理院地図と室蘭空中写真を選択することが可能になります室蘭周辺の地理院タイルと空中写真の表示

ここで行われていることを解説すると // 室蘭市オープンデータ出典と // 室蘭市空中写真タイルおよび出典の読み込みは地理院タイルを読み込んだ際に行っていることと同様です次に // 地理院タイル室蘭市空中写真を用いた地図の生成も地理院タイルを表示した際に行っていることと同じですがここでは標準タイルと室蘭空中写真の二つを表示するレイヤとして選択していますその次の // 地理院タイル

27 ここで行われていることを解説すると // 室蘭市オープンデータ出典と // 室蘭市空中写真タイルおよび出典の読み込みは地理院タイルを読み込んだ際に行っていることと同様です次に // 地理院タイル室蘭市空中写真を用いた地図の生成も地理院タイルを表示した際に行っていることと同じですがここでは標準タイルと室蘭空中写真の二つを表示するレイヤとして選択していますその次の // 地理院タイル室蘭空中写真の追加の部分はレイヤを選択するための変数を作成していますそして // 選択コントロールの追加では作成した変数を読み込み地図にレイヤ選択コントロールを追加しています以上の手順で複数のタイルレイヤを leaflet 上に読み込むことが可能となります 3.4 避難所データを表示する最後に避難場所のデータを leaflet 上に表示します leaflet 上に点データを表示するには様々な方法がありますがここでは GeoJSON という形式のデータを読み込むことにしますこの場合既存のデータを GeoJSON 形式に変換する必要がありますここでは geojson.io viii というサービスを使って変換することとしますこのサイトでは緯度経度情報を含んだ CSV ファイルをドラッグ & ドロップするだけで以下の図のように GeoJSON 形式に変換し表示してくれますただしその際緯度経度情報をもつカラムは LAT LON といった名前であること CSV ファイルの文字コードが UTF-8 である必要がありますここで変換したファイルを上のメニューの SAVE GeoJSON を選んで保存すれば GeoJSON 形式のファイルとして保存できます geojson.io を用いた CSV ファイルの GeoJSON 形式への変換と表示例本ハンズオンでは時間の関係でこの手順については省略し変換済みの map.geojson というファイルを使用することとしますまず JAVASCRIPT BOX の最後に以下を追加します

28 // STEP 3: 避難所 geojson 追加 // これまで入力した部分の下に以下を追加 // geojson ファイルをテキストエディタで開いて以下にペースト var geostring = ' ここにテキストをペースト '; // geojson 文字列を json に変換 var geodata = JSON.parse(geostring); // leaflet に読み込み可能な形に変換 var geolayer = L.geoJson(geodata); // 地図に geojson データを追加 geolayer.addto(map); 次に map.geojson をメモ帳等のテキストエディタで開きその中身をコピーしここにテキストをペーストにペースとしますその際に前後の '( コーテーションマーク ) を消さないように注意して下さい map.geojson を貼り付ける位置ペーストがすんだら RUN をクリックしますこれで以下のように GeoJSON ファイルが表示されます

29 GeoJSON ファイルの表示ただしこのままでは GeoJSON ファイルの範囲と表示範囲があっていませんそこで地図の表示範囲を GeoJSON ファイルの範囲に合わせますまず JAVASCRIPT BOX の // 地理院タイル室蘭市空中写真を用いた地図の生成の部分の center: [ , ], の行を削除します次に以下を JAVASCRIPT BOX の最後にペーストし RUN をクリックします // 以下の行を最後にペーストする //geojson データの中心にズーム map.fitbounds(geolayer.getbounds()); すると以下のように GeoJSON ファイルの範囲に対応して地図の表示範囲が変更されます

GeoJSON ファイルに対応した地図表示範囲の設定さてこのままでは個別の避難所についての情報が不明のままですそこで避難所の位置をクリックすると情報が表示されるように修正しますまず // leaflet に読み込み可能な形に変換の下の var geolayer = L.geoJson(geodata); に var geolayer = L.

30 GeoJSON ファイルに対応した地図表示範囲の設定さてこのままでは個別の避難所についての情報が不明のままですそこで避難所の位置をクリックすると情報が表示されるように修正しますまず // leaflet に読み込み可能な形に変換の下の var geolayer = L.geoJson(geodata); に var geolayer = L.geoJson(geodata, {oneachfeature: showpopup}); をペースとします次に以下を JAVASCRIPT BOX の最後にペーストし RUN をクリックします // 一番最後に以下を追加 // ポップアップ機能の追加 function showpopup(feature, layer) { var key, val; var content = []; for (key in feature.properties) { val = feature.properties[key]; if (val!= "") { content.push("<strong>" + key + ":</strong> " + val);

31 } } } layer.bindpopup(content.join("<br />")); すると避難所のマーカーをクリックした際にポップアップで属性が表示されるようになります属性データのポップアップでの表示以上の手順で leaflet 上に地理院タイルや独自データを表示し属性データを示すことが可能になりますなお JSfiddle ではアカウントを作成すれば作業結果を共有することもできます以下は今回のハンズオンのデータの表示例になりますまた JSfiddle 上のコードをコピー以下のフォーマットのペースとし HTML ファイルとして保存して独自サーバーに置いて公開することにより JSfiddle 以外のサーバーでも公開することが出来ます // STEP 7 自分の Web ページとして表示したい場合 // 以下を html として保存してサーバーにアップロードして下さい // なお保存の際の文字コードは UTF-8 として下さい <!DOCTYPE html>

32 <html lang="jp"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> お好きなタイトルを入れて下さい </title> <link media="screen, print" rel="stylesheet"> <script <style type="text/css"> /* CSS の部分を以下にペースト */ </style> </head> <body>  <script type="text/javascript"> // JavaScript の部分を以下にペースト </script> </body> </html> 以下に GitHub Pages で公開した例を表示します 4 まとめ本ハンズオンでは FOSS4G の中でも代表的な QGIS と leaflet を使って独自データを表示する手順について説明しました大変限られた時間ではありましたが地理院タイルの読み込み自体はそれほど難しくないことを感じていただければ幸いです FOSS4G にはこれ以外にも様々なアプリケーションが存在します例えば Android 用のモバイル GIS では Geopaparazzi というソフトウェアがあります Geopaparazzi ではオフライン用のデータを作成することによりネットワークのない環境でも地理院タイルを利用することができます ix この様に様々な FOSS4G を使うことにより地理院タイルの利用が広がることを期待しますまた本セッションが FOSS4G を扱うきっかけになれば幸いです

33 本テキストはクリエイティブコモンズ表示 4.0 ライセンスの下に提供されています本実習で使用したデータは室蘭市 / むろらんオープンデータライブラリにおいて公開されているデータを使用しました使用したデータは以下のサイトからダウンロード可能です本テキストは 2016/11/23 現在で書かれておりますソフトウェアのアップデートや Web サービスの変更により同様の手順が行える保障はございませんご了承下さい本テキストに関するご意見ご質問は japan.osgeo@gmail.com もしくは以下の OSGeo 財団日本支部のメーリングリストからお問い合わせ下さい i ii iii iv v なお元データでは平面直角座標系第 II 系の位置情報が記載されているがここでは実際に GPS で取得できる座標と同様のものにするため WGS84 地理座標系に変換した座標値を用いている元データはからダウンロードできる vi vii viii ix 手順の詳細は以下のアドレス等を参照

インストールマニュアル

インストールマニュアル国土数値情報閲覧マニュアル (QGIS) 2017 年 3 月国土交通省国土政策局目次 Ⅰ.QGIS のインストール... 2 Ⅱ. 国土数値情報からのデータダウンロード... 7 Ⅲ.QGIS の操作... 12 1. QGIS の起動... 12 2. QGIS の画面構成... 13 3. 国土数値情報データの読み込み... 14 4. 地理院地図の読み込み... 17 5. 地図の画像を保存...