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

japan.osgeo@gmail.com

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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

QGIS Web ページ

leaflet Web ページ
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.jaむろらんオープンデータライブラリ Web ページ

２．QGIS を用いた地理院タイルの活用法
２．１ 概要QGIS は、FOSS4G の中でも代表的なデスクトップ GIS ですが、インターネット接続環境があれば、ネットワーク経由で様々なデータを読み組むことができます。地理院タイルを読み込むにも、いくつかの方法があるのですが、ここでは TileLayerPluginivを使った方法を解説します。プラグインとは、QGISに追加することにより機能を拡張するためのツールです。これにより、QGIS は多くの機能を使うことができます。

TileLayerPlugin の Web ページ
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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

QGIS の GUI とデータの表示例①メニューバー、②ツールバー、③パネル、④地図ビュー、⑤ステータスバー
２．２ TileLayerPlugin のインストール・設定と地理院タイルの表示
次に、TileLayerPlugin をインストールします。メニューの プラグイン→プラグインの管理とインス
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

トール をクリックします。表示されたウィンドの検索の部分に TileLayer と入力して下さい。にTileLayer Plugin が表示されますので、□にチェックを入れ、プラグインのインストールボタンをクリックします。これで、インストールの完了です。

プラグインの管理画面
次 に 、 地 理 院 タ イ ル を 読 み 込 め る よ う に 、 TileLayer Plugin の 設 定 を 行 い ま す 。 ま ず 、https://gist.github.com/minorua/7654132 から GSIMaps.tsv という設定ファイルをダウンロードします。
ダウンロードしたファイルを、分かりやすいところにコピーして下さい。たとえば、C:¥layers などがお勧めです。この tsv ファイルに、タイルレイヤを読み込むための設定が書かれています。

GSIMaps.tsv ファイルの公開ページ
次に、Web→タイルレイヤプラグイン→タイルレイヤを追加する をクリックして下さい。表示された
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.jaタイルレイヤを追加する ウィンドの左下に設定ボタンがありますので、それをクリックします。さらに表示されたタイルレイヤプラグイン設定 ウィンドの外部レイヤ定義ディレクトリに、先ほどGSIMaps.tsv ファイルを保存したディレクトリを指定します。そして、OK ボタンをクリックすると、プラグインの設定は完了です。設定が正しく行われていれば、各種地理院タイルが表示されています。

「タイルレイヤを追加する」ウィンドタイルレイヤプラグイン設定

設定完了後の「タイルレイヤを追加する」ウィンド
設定完了後のタイルレイヤを追加するウィンドで、標準地図をダブルクリックして下さい。以上で、
QGIS 上に地理院地図が表示されました。
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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

プロジェクトの保存メニュー
２．３ 位置情報をもった CSV ファイルの表示
近年では、様々な地理空間情報が公開されています。一方で、自分が必要とする情報が公開されていない場合も、多くあります。その様な場合、GPS 等を使って位置情報を取得することが有効です。特に最近では、多くのスマートフォンに GPS が搭載されているため、アプリを用いて位置情報を得ることが格段に容易になりました。ここでは、むろらんオープンデータライブラリで公開されている室蘭市の避難場所vを例に、CSV ファイルの表示を行います。CSV ファイルとは、表計算ソフトでいえば、セルとセルの間が、カンマで区切られた形の、テキストファイルになります。多くの表計算ソフトでは、それぞれの独自形式とは別に、CSV 形式でファイルを保存することができます。
まず、配布した CCPN_DATA の中に含まれている hinan_20140623.csv ファイルを開いて下さい。施OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

設名称、住所等、様々な情報が含まれていますが、右端に、LON と LAT という列があります。これが、それぞれの施設の座標になります。QGIS では、この座標の位置を点データとして表示することが可能です。

表計算ソフトにより CSV ファイルの表示例
このデータを QGIS で開くには、メニューからレイヤ→レイヤの追加→デリミティッドテキストレイヤの追加をクリックして下さい

デリミティッドテキストレイヤの追加

デリミティッドテキストファイルからレイヤを作成 ウィンドが表示されますので、参照をクリックし、
hinan_20140623.csv ファイルを選択して下さい。次に、以下を図を参考にして読み込みの設定を行って下さい。設定が終了したら、OK をクリックして下さい。
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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

空間参照システム選択ウィンドの設定
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja正しく設定されていると、室蘭市の位置に点が表示されます。

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

「レイヤの領域にズームする」を選択

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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

「属性テーブルを開く」を選択

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

「hinan_20140623」に含まれる属性情報
もう一つの方法は、個々の点をクリックして確認する方法です。この場合、レイヤパネル上で

hinan_20160623 が選択された状態で、メニューのビュー→地物情報表示をクリックして下さい。ツー
ルバーの i に矢印のついたアイコンをクリックしてもクリックしても大丈夫です。この状態で、地図上の表示されている避難所データをクリックすると、各避難所の属性情報が表示されます。

地図物情報表示モードへの変更

個別の地物の属性情報の表示例
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.jaここでは、含まれる属性情報のうち津波避難所かどうかによって、色分けを行うこととします。手順は以下の通りです。これまでと同様に、レイヤパネルの hinan_20160623 の上で右クリックし、プロパ
ティを選択して下さい。すると、レイヤプロパティウィンドが表示されます。このウィンドでは、レイヤ自体についての情報や、表示方法を編集することができます。

「プロパティ」メニューの選択

レイヤプロパティ ウィンド
ここで左側のスタイルをクリックすると、地物の表示方法や、色、サイズを選択できる画面になります。左上のプルダウンメニューで、地物の表示方法を選択できます。例えば、共通シンボルでは、全ての地物が同じ凡例で表示されます。分類されたでは、同じ属性をもつものが、同じ凡例で表示されます。

段階に分けられたは、数値形のデータについて適応可能なもので、一定の範囲の値を同じ属性で表示す
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

ることができます。

レイヤプロパティのスタイル設定画面。
ここでは、分類されたを選択します。次にカラムで津波避難所を選択し、分類をクリックします。以
上により、津波避難所カラムに含まれる値にもとづき、地図上に表示されるシンボルが自動的に設定されます。なおこの表示では、属性が含まれていない凡例が二つあるように見えますが、1 行目は属性が空白（スペース）の場合で、3 行目は属性が含まれていない場合になります。

津波避難所カラムの属性値に基づくスタイル設定
さらに、表示するシンボルの色やサイズを変更することもできます。表示されているシンボルの上で、
ダブルクリックをして下さい。するとシンボルセレクタウィンドが開きます。大きさの値を変えること
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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

「シンボルセレクタ」ウィンド「色選択」ウィンドOSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

属性に基づくシンボル表示の変更例
２．５ 作成したデータの３Ｄ出力
この様にして作成したデータですが、このままでは QGIS 上でしか確認できません。他の人にデータを見てもらう場合、作成したデータとソフトウェアを一緒に渡して、確認してもらうことも可能ですが、
ソフトウェアをインストールすることや、使用方法を習得することが困難な場合もあります。その場合の方法の一つは、表示されている画面を保存して共有することです。これは、メニューのプロジェクト→画像として保存から実行することが可能です。
別の方法として、表示されているデータを Web ブラウザーで閲覧可能な形式に変換することです。その場合に有効なのが、Qgis2threejsviプラグインです。ここでは Qgis2threejs の使用法を実習します。

Qgis2threejs プラグインのドキュメントページ
まず、Qgis2threejs をインストールします。メニューの プラグイン→プラグインの管理とインストー

ル を ク リ ッ ク し ま す 。 表 示 さ れ た ウ ィ ン ド の 検 索 の 部 分 に Qgis2threejs と 入 力 し て 下 さ い 。
Qgis2threejs Plugin が表示されますので、□にチェックを入れ、プラグインのインストールボタンをク
リックします。これで、インストールの完了です。

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

プラグインの管理画面
次にメニューの Web→Qgis2threejs→Setting をクリックすると、Settings ウィンドが表示されます。
ここでは、Optional Features (Plugins)の GSI Elevation Tile Provider にチェックが入っていることを確認して下さい。これは、Qgis2threejs で、地理院タイルの標高データを扱えるようにするための設定です。

Qgis2threejs の設定画面
設定が確認できたら、メニューの Web→Qgis2threejs→Qgis2threejs をクリックして下さい。
Qgis2threejs の設定画面が表示されます。ここでまず、左の World をクリックして下さい。ここでは、
QGIS の地図ビューを出力する際の範囲や背景の色、高さ方向の強調率を設定します。地形が平坦な場合、強調率を高くした方が分かりやすい図ができます。ここでは、Vertical exaggregation の値を３として下さい。

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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

Qgis2threejs の「DEM」設定画面
最後に、Point の hinan_20140623 を選択し、横にチェックが入っているのを確認します。この画面でも多くは設定しなくてもよいですが、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 等でも閲覧することが可能です。また、サーバーにアップすることにより、インターネット上から閲覧することもできます。

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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

Qgis2threejs plugin の出力表示例

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

３leaflet を用いた地理院タイルの活用法

３．１ 概要leaflet は、Web ブラウザーを用いて地理空間情報を表示する際に使われるライブラリです。軽量で、PC のブラウザーとスマホのブラウザーの両方で、シームレスに使用できることが特徴です。地理院地図
も leaflet をもとに作成されています。

地理院地図の表示画面
本ハンズオンでは、以下の手順で実習を行います。
(1) 地理院タイルを表示する(2) 独自タイルレイヤを追加する(3) 避難所のデータを追加する。
なお、実習にあたっては、HTML、CSS、JavaScript などの基礎的な知識があることが望ましいです。
ですが、それがなくても実習を行うことは可能です。また、実習の際に使用するスクリプト等は、以下の URL にて公開しています。
https://public.etherpad-mozilla.org/p/CCPN6th_FOSS4G
また、Web ブラウザーで閲覧できるサイトを構築する際には、外部のサーバーを利用するか、ローカ
ル環境に www サーバーを構築することが必要になります。ここでは、JSfiddleviiというサービスを使って、外部サーバーの環境を使用します。そのため、使用するデータには、個人情報等が含まれないようご注意下さい。
３．２ leaflet に地理院タイルを表示する
初めに、leaflet に地理院地図を表示する手順です。まず、以下の URL から JSfiddle にアクセスして
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

下さい。
https://jsfiddle.net/
以下のような画面が表示されます。

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

leaflet.js と表示されます。同様にして、
https://unpkg.com/leaflet@1.0.2/dist/leaflet.css
を登録して下さい。

External Resources の登録手順
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

登録が成功すると、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="http://www.gsi.go.jp">国土地理院</a> <aOSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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}.png',{attribution:
attribution_ct});// 地理院タイルを用いた地図の生成
var map = L.map('map', {layers:[basemap_ct],
center: [42.317432,140.976820],
zoom: 11});すると、下図のように室蘭周辺の地図が表示されます。

室蘭周辺の地理院タイルの表示
ここで少し解説すると、// 地理院タイル 出典以下では、leaflet 上で表示する地理院タイルへのリンク等を設定しています。// 地理院標準タイルおよび出典の読み込みでは、上記の出典と表示する地理院タ
イルを設定しています。そして、// 地理院タイルを用いた地図の生成において、最初に作成した枠に表示する地図データを生成しています。
以上の手順で、leaflet を用いて、地理院タイルを表示することが可能となります。

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

３．３ 独自タイルレイヤを追加する
次に、地理院タイルの標準レイヤ以外のタイルを追加する手順です。ここでは、むろらんオープンデータライブラリの空中写真から作成した高解像度のタイル画像を使用することとします。また、そうした高解像度の空中写真がない場合は、地理院タイルの空中写真レイヤを使用することも可能です。
JAVASCRIPT BOX の中を全て削除し、以下をペーストして、RUN をクリックして下さい。

// STEP 2: 室蘭市空中写真追加 ------------------------------------// これまで入力した部分を消して、以下をペースト// 地理院タイル 出典
var attribution_ct = '<a href="http://www.gsi.go.jp">国土地理院</a> <ahref="http://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>';// 地理院標準タイルおよび出典の読み込み
var basemap_ct = L.tileLayer( 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',{attribution:
attribution_ct});// 室蘭市オープンデータ出典
var attribution_muroran = '<a href="http://www.city.muroran.lg.jp/main/org2260/odlib.php"
target="_blank">室蘭市オープンデータ</a>';// 室蘭市空中写真タイルおよび出典の読み込み
var basemap_muroran = L.tileLayer('http://habs.dc.affrc.go.jp/FOSS4G/muroran_tile/{z}/{x}/{y}.png',{attribution: attribution_muroran, tms: true});// 地理院タイル・室蘭市空中写真を用いた地図の生成
var map = L.map('map', {layers:[basemap_ct, basemap_muroran],
center: [42.317432,140.976820],
zoom: 11});// 地理院タイル・室蘭空中写真の追加
var baseMaps = {"地理院タイル": basemap_ct,"室蘭市空中写真": basemap_muroran};
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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

室蘭周辺の地理院タイルと空中写真の表示

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.jaここで行われていることを解説すると、//室蘭市オープンデータ出典と// 室蘭市空中写真タイルおよび

出典の読み込みは、地理院タイルを読み込んだ際に行っていることと同様です。次に、// 地理院タイル・
室蘭市空中写真を用いた地図の生成も、地理院タイルを表示した際に行っていることと同じですが、こ
こでは、標準タイルと室蘭空中写真の二つを表示するレイヤとして選択しています。その次の// 地理院

タイル・室蘭空中写真の追加の部分は、レイヤを選択するための変数を作成しています。そして// 選択
コントロールの追加では、作成した変数を読み込み、地図にレイヤ選択コントロールを追加しています。
以上の手順で、複数のタイルレイヤを leaflet 上に読み込むことが可能となります。
３．４ 避難所データを表示する
最後に、避難場所のデータを leaflet 上に表示します。leaflet 上に点データを表示するには様々な方法がありますが、ここでは GeoJSON という形式のデータを読み込むことにします。この場合、既存のデータを GeoJSON 形式に変換する必要があります。ここでは、geojson.ioviiiというサービスを使って変換することとします。このサイトでは、緯度経度情報を含んだ CSV ファイルをドラッグ&ドロップするだ
けで、以下の図のように GeoJSON 形式に変換し、表示してくれます。ただしその際、緯度経度情報をもつカラムは LAT、LON といった名前であること、CSV ファイルの文字コードが UTF-8 である必要があります。
ここで変換したファイルを上のメニューの SAVE→GeoJSON を選んで保存すれば、GeoJSON 形式のファイルとして保存できます。

geojson.io を用いた CSV ファイルの GeoJSON 形式への変換と表示例
本ハンズオンでは時間の関係でこの手順については省略し、変換済みの map.geojson というファイルを使用することとします。
まず、JAVASCRIPT BOX の最後に、以下を追加します。
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

// 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 ファイルが表示されます。

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

GeoJSON ファイルの表示
ただしこのままでは、GeoJSON ファイルの範囲と、表示範囲があっていません。そこで、地図の表示
範囲を GeoJSON ファイルの範囲に合わせます。
まず、JAVASCRIPT BOX の//地理院タイル・室蘭市空中写真を用いた地図の生成の部分のcenter: [42.317432,140.976820],の行を削除します。
次に、以下を JAVASCRIPT BOX の最後にペーストし、RUN をクリックします。

//以下の行を最後にペーストする//geojson データの中心にズーム
map.fitBounds(geolayer.getBounds());
すると、以下のように GeoJSON ファイルの範囲に対応して、地図の表示範囲が変更されます。

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

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);
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja}}layer.bindPopup(content.join("<br />"));}
すると、避難所のマーカーをクリックした際にポップアップで属性が表示されるようになります。

属性データのポップアップでの表示
以上の手順で、leaflet 上に地理院タイルや独自データを表示し、属性データを示すことが可能になります。なお、JSfiddle ではアカウントを作成すれば、作業結果を共有することもできます。以下は、今回のハンズオンのデータの表示例になります。
https://jsfiddle.net/wata909/0arucb9t/
また、JSfiddle 上のコードをコピー、以下のフォーマットのペースとし、HTML ファイルとして保存
して独自サーバーに置いて公開することにより、JSfiddle 以外のサーバーでも公開することが出来ます。

// STEP 7 自分の Web ページとして表示したい場合// 以下を html として保存して、サーバーにアップロードして下さい。
// なお、保存の際の文字コードは UTF-8 として下さい。
<!DOCTYPE html>
OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

<html lang="jp"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>お好きなタイトルを入れて下さい。</title><link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" media="screen, print" rel="stylesheet"><script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script><style type="text/css">/* CSS の部分を以下にペースト*/</style></head><body><!-- HTML の部分を以下にペースト--><script type="text/javascript">// JavaScript の部分を以下にペースト</script></body></html>
以下に GitHub Pages で公開した例を表示します
https://wata909.github.io/foss4g_miscellaneous/ccpn6th_FOSS4G.html

４

まとめ

本ハンズオンでは、FOSS4G の中でも代表的な QGIS と leaflet を使って、独自データを表示する手順について説明しました。大変限られた時間ではありましたが、地理院タイルの読み込み自体は、それほど難しくないことを感じていただければ幸いです。
FOSS4G には、これ以外にも様々なアプリケーションが存在します。例えば Android 用のモバイル
GIS では Geopaparazzi というソフトウェアがあります。Geopaparazzi では、オフライン用のデータを作成することにより、ネットワークのない環境でも地理院タイルを利用することができますix。
この様に、様々な FOSS4G を使うことにより、地理院タイルの利用が広がることを期待します。また、
本セッションが、FOSS4G を扱うきっかけになれば幸いです。

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja

本テキストは、クリエイティブ・コモンズ 表示 4.0 ライセンスの下に提供されています。



本実習で使用したデータは、室蘭市／むろらんオープンデータライブラリにおいて公開されているデータを使用しました。
http://www.city.muroran.lg.jp/main/org2260/odlib.php



使用したデータは、以下のサイトからダウンロード可能です。
https://www.dropbox.com/sh/wvoy9787muoowfl/AACcys4uIYKC5jZgR_tXD87aa?dl=0



本テキストは 2016/11/23 現在で書かれております。ソフトウェアのアップデートや Web サービ
スの変更により、同様の手順が行える保障はございません。ご了承下さい。

本テキストに関するご意見ご質問は、japan.osgeo@gmail.com、もしくは以下の OSGeo 財団日本
支部のメーリングリストからお問い合わせ下さい。
http://lists.osgeo.org/listinfo/osgeojapan-discuss

http://www.qgis.org/
http://leafletjs.com/
iii http://www.city.muroran.lg.jp/main/org2260/odlib.php
iv https://github.com/minorua/TileLayerPluginv なお、元データでは平面直角座標系 第 II 系の位置情報が記載されているが、ここでは、実際に GPSで取得できる座標と同様のものにするため、WGS84 地理座標系に変換した座標値を用いている。元データは、 http://www.city.muroran.lg.jp/main/org2260/opendata/hinan_20140623.csv からダウンロードできる。
vi http://qgis2threejs.readthedocs.io/ja/docs-release/vii https://jsfiddle.net/
viii http://geojson.io/ix 手順の詳細は、以下のアドレス等を参照
http://ccpn.gsi.go.jp/meeting_partners/data/20151128/CCPN4_jirei6.pdf
http://koutochas.seesaa.net/article/439665495.html
iii

OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja