贵翱厂厂4骋で地理院タイルを使ってみよう！
?Download as DOCX, PDF?
0 likes?4,941 views
第６回地理院地図において行ったハンズオンの资料の改订版になります。
![OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja
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 を用いて、地理院タイルを表示することが可能となります。
３．３ 独自タイルレイヤを追加する
次に、地理院タイルの標準レイヤ以外のタイルを追加する手順です。ここでは、むろらんオープンデ
ータライブラリの空中写真から作成した高解像度のタイル画像を使用することとします。また、そうし](https://image.slidesharecdn.com/foss4g-161202043022/85/FOSS4G-28-320.jpg)
![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> <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}.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
};
// 選択コントロールの追加
L.control.layers(baseMaps).addTo(map);](https://image.slidesharecdn.com/foss4g-161202043022/85/FOSS4G-29-320.jpg)
![OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja
ただしこのままでは、GeoJSON ファイルの範囲と、表示範囲があっていません。そこで、地図の表示
範囲を GeoJSON ファイルの範囲に合わせます。
まず、JAVASCRIPT BOX の//地理院タイル?室蘭市空中写真を用いた地図の生成の部分の
center: [42.317432,140.976820],
の行を削除します。
次に、以下を JAVASCRIPT BOX の最後にペーストし、RUN をクリックします。
//以下の行を最後にペーストする
//geojson データの中心にズーム
map.fitBounds(geolayer.getBounds());
すると、以下のように GeoJSON ファイルの範囲に対応して、地図の表示範囲が変更されます。
GeoJSON ファイルに対応した地図表示範囲の設定
さてこのままでは、個別の避難所についての情報が不明のままです。そこで、避難所の位置をクリッ
クすると情報が表示されるように修正します。まず、// leaflet に読み込み可能な形に変換の下の
var geolayer = L.geoJson(geodata);](https://image.slidesharecdn.com/foss4g-161202043022/85/FOSS4G-33-320.jpg)
![OSGeo.JP CC BY 4.0
https://creativecommons.org/licenses/by/4.0/deed.ja
に、
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);
}
}
layer.bindPopup(content.join("<br />"));
}
すると、避難所のマーカーをクリックした際にポップアップで属性が表示されるようになります。
属性データのポップアップでの表示](https://image.slidesharecdn.com/foss4g-161202043022/85/FOSS4G-34-320.jpg)
贵翱厂厂4骋で地理院タイルを使ってみよう！
- 1. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja FOSS4G で地理院タイルを使ってみよう！ OSGeo 財団日本支部 japan.osgeo@gmail.com
- 2. 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 １．本日の内容 このハンズオンでは、FOSS4G と呼ばれるオープンソース GIS のうち、代表的なデスクトップ GIS である QGISiと、Web の地図表示ライブラリである leafletiiを用いて、地理院タイルを利用する方法につ いて実習を行います。 利用するソフトウェアのバージョンは、QGIS は 2.14、leaflet は 1.0.2 とします。利用するデータは、 参加者自身が持参するデータも利用可能としますが、サンプルとしては、むろらんオープンデータライ ブラリiiiの避難所および空中写真データを用います。 QGIS Web ページ leaflet Web ページ
- 4. 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 ページ
- 5. 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 表示するように出力する (5) WMTS を使った地理院タイルの表示 実習に移る前に、QGIS におけるデータの扱いについて簡単に説明します。多くの GIS ソフトウェア は、表示するデータと、GIS 上で表示を、別々に管理します。例えばワープロソフトでは、書かれてい る文字自体の情報と、ページ設定、文字のサイズ、色、段落等のレイアウトに関する情報が、一括して 一つのファイルに保存されます。GIS ソフトウェアでは文字自体の情報と、上記のレイアウトに関する 情報が別々に保存されるイメージです。ですので、レイアウトに関する編集を行っても、元のデータは 変更されません。 以下に、QGIS におけるデータの表示例を示します QGIS では、表示範囲、レイヤの順序、シンボル のスタイルなどの項目を、プロジェクトという単位で管理します。プロジェクトに読み込まれているデ ータは、左のレイヤパネルに表示されます。パネルには、レイヤパネル以外のものも存在します。地図 データが表示されている部分を地図ビューと呼びます。メニューバー、ツールバーは、一般的なソフト ウェアと同じですが、下部のステータスバーには、GIS 独自の座標位置、縮尺、座標系といった情報が 表示されます。 QGIS の GUI とデータの表示例 ①メニューバー、②ツールバー、③パネル、④地図ビュー、⑤ステータスバー
- 6. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja ２．２ TileLayerPlugin のインストール?設定と地理院タイルの表示 次に、TileLayerPlugin をインストールします。メニューの プラグイン→プラグインの管理とインス トール をクリックします。表示されたウィンドの検索の部分に TileLayer と入力して下さい。に TileLayer Plugin が表示されますので、□にチェックを入れ、プラグインのインストールボタンをクリ ックします。これで、インストールの完了です。 プラグインの管理画面 次 に 、地 理院 タ イル を読 み 込め るよ うに 、 TileLayer Plugin の 設定 を 行い ます 。ま ず 、 https://gist.github.com/minorua/7654132 からGSIMaps.tsv という設定ファイルをダウンロードします。 ダウンロードしたファイルを、分かりやすいところにコピーして下さい。たとえば、C:?layers などがお 勧めです。この tsv ファイルに、タイルレイヤを読み込むための設定が書かれています。 GSIMaps.tsv ファイルの公開ページ
- 7. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 次に、Web→タイルレイヤプラグイン→タイルレイヤを追加する をクリックして下さい。表示された タイルレイヤを追加する ウィンドの左下に設定ボタンがありますので、それをクリックします。さらに 表示されたタイルレイヤプラグイン設定ウィンドの外部レイヤ定義ディレクトリに、先ほど GSIMaps.tsv ファイルを保存したディレクトリを指定します。そして、OK ボタンをクリックすると、 プラグインの設定は完了です。設定が正しく行われていれば、各種地理院タイルが表示されています。 「タイルレイヤを追加する」ウィンド タイルレイヤプラグイン設定 設定完了後の「タイルレイヤを追加する」ウィンド 設定完了後のタイルレイヤを追加するウィンドで、標準地図をダブルクリックして下さい。以上で、
- 8. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja QGIS 上に地理院地図が表示されました。 QGIS 上での地理院地図?標準タイルの表示例 なお、この様にして表示したデータや、後述するような凡例を変更したものを、プロジェクトとして 保存することができます。メニューのプロジェクト→保存をクリックして下さい。表示されたダイアロ グで、名前を付けて保存することにより、次回からは、作業の途中から再開することが可能になります。 プロジェクトの保存メニュー ２．３ 位置情報をもった CSV ファイルの表示 近年では、様々な地理空間情報が公開されています。一方で、自分が必要とする情報が公開されてい ない場合も、多くあります。その様な場合、GPS 等を使って位置情報を取得することが有効です。特に 最近では、多くのスマートフォンに GPS が搭載されているため、アプリを用いて位置情報を得ることが 格段に容易になりました。ここでは、むろらんオープンデータライブラリで公開されている室蘭市の避 難場所vを例に、CSV ファイルの表示を行います。CSV ファイルとは、表計算ソフトでいえば、セルと セルの間が、カンマで区切られた形の、テキストファイルになります。多くの表計算ソフトでは、それ
- 9. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja ぞれの独自形式とは別に、CSV 形式でファイルを保存することができます。 まず、配布した CCPN_DATA の中に含まれている hinan_20140623.csv ファイルを開いて下さい。施 設名称、住所等、様々な情報が含まれていますが、右端に、LON と LAT という列があります。これが、 それぞれの施設の座標になります。QGIS では、この座標の位置を点データとして表示することが可能で す。 表計算ソフトにより CSV ファイルの表示例 このデータを QGIS で開くには、メニューからレイヤ→レイヤの追加→デリミティッドテキストレイ ヤの追加をクリックして下さい デリミティッドテキストレイヤの追加 デリミティッドテキストファイルからレイヤを作成 ウィンドが表示されますので、参照をクリックし、 hinan_20140623.csv ファイルを選択して下さい。次に、以下を図を参考にして読み込みの設定を行って
- 10. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 下さい。設定が終了したら、OK をクリックして下さい。 「デリミティッドテキストファイルからレイヤを作成」の設定 すると、設定によっては空間参照システム選択ウィンドが表示されます。ここでフィルタに 4326 と入 力して下さい。ウィンドの上部または下部に WGS 84 と表示されますので、これをクリックして OK を クリックします。
- 11. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 空間参照システム選択ウィンドの設定 正しく設定されていると、室蘭市の位置に点が表示されます。 読み込んだ CSV ファイルの QGIS 上での表示 ただし日本全体が表示されているため、個々の点が判読できません。そこで、レイヤパネルの hinan_2014063 を右クリックし、表示されたメニューのレイヤの領域にズームするをクリックして下さ い。すると、QGIS の地図画面表示が、hinan_2014063 の全データが表示される最大ズームまで拡大さ れます。 「レイヤの領域にズームする」を選択
- 12. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja hinan_2014063 の拡大表示 ２．４ 属性に基づく表示の変更 この様な地理空間情報は、座標以外にも様々な情報が含まれていることが多いです。ここでは、含ま れている属性に基づき、地図上の表示を変更します。そのためにはまず、表示されているデータに、ど の様な情報が含まれているかを確認する必要があります。これには二つの方法があります。一つは、属 性テーブルを開いて確認する方法です。レイヤパネルの hinan_20140623 を右クリックし、表示された メニューの属性テーブルを開くをクリックして下さい。すると、hinan_20140623 の属性テーブルが表 示され、全ての情報を確認することができます。 「属性テーブルを開く」を選択
- 13. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 「hinan_20140623」に含まれる属性情報 もう一つの方法は、個々の点をクリックして確認する方法です。この場合、レイヤパネル上で hinan_20160623 が選択された状態で、メニューのビュー→地物情報表示をクリックして下さい。ツー ルバーの i に矢印のついたアイコンをクリックしてもクリックしても大丈夫です。この状態で、地図上の 表示されている避難所データをクリックすると、各避難所の属性情報が表示されます。 地図物情報表示モードへの変更 個別の地物の属性情報の表示例
- 14. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja ここでは、含まれる属性情報のうち津波避難所かどうかによって、色分けを行うこととします。手順 は以下の通りです。これまでと同様に、レイヤパネルの hinan_20160623 の上で右クリックし、プロパ ティを選択して下さい。すると、レイヤプロパティウィンドが表示されます。このウィンドでは、レイ ヤ自体についての情報や、表示方法を編集することができます。 「プロパティ」メニューの選択 レイヤプロパティ ウィンド ここで左側のスタイルをクリックすると、地物の表示方法や、色、サイズを選択できる画面になりま す。左上のプルダウンメニューで、地物の表示方法を選択できます。例えば、共通シンボルでは、全て の地物が同じ凡例で表示されます。分類されたでは、同じ属性をもつものが、同じ凡例で表示されます。 段階に分けられたは、数値形のデータについて適応可能なもので、一定の範囲の値を同じ属性で表示す
- 15. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja ることができます。 レイヤプロパティのスタイル設定画面。 ここでは、分類されたを選択します。次にカラムで津波避難所を選択し、分類をクリックします。以 上により、津波避難所カラムに含まれる値にもとづき、地図上に表示されるシンボルが自動的に設定さ れます。なおこの表示では、属性が含まれていない凡例が二つあるように見えますが、1 行目は属性が空 白（スペース）の場合で、3 行目は属性が含まれていない場合になります。 津波避難所カラムの属性値に基づくスタイル設定 さらに、表示するシンボルの色やサイズを変更することもできます。表示されているシンボルの上で、 ダブルクリックをして下さい。するとシンボルセレクタウィンドが開きます。大きさの値を変えること
- 16. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja でシンボルのサイズが、色のプルダウンメニューを操作することにより、シンボルの色を変更すること ができます。ここでは、シンボルのサイズは 3、空白の場合は赤、○の場合は緑で表示するようにします。 また、プルダウンメニューに含まれていない色を選択したい場合には、メニュー下部にある色の選択を 使用することにより、様々な色を選択することができます。 「シンボルセレクタ」ウィンド 「色選択」ウィンド
- 17. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 属性に基づくシンボル表示の変更例 ２．５ 作成したデータの３Ｄ出力 この様にして作成したデータですが、このままでは QGIS 上でしか確認できません。他の人にデータ を見てもらう場合、作成したデータとソフトウェアを一緒に渡して、確認してもらうことも可能ですが、 ソフトウェアをインストールすることや、使用方法を習得することが困難な場合もあります。その場合 の方法の一つは、表示されている画面を保存して共有することです。これは、メニューのプロジェクト →画像として保存から実行することが可能です。 別の方法として、表示されているデータを Web ブラウザーで閲覧可能な形式に変換することです。そ の場合に有効なのが、Qgis2threejsviプラグインです。ここでは Qgis2threejs の使用法を実習します。
- 18. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja Qgis2threejs プラグインのドキュメントページ まず、Qgis2threejs をインストールします。メニューの プラグイン→プラグインの管理とインストー ル をクリックします。表示されたウィンドの検索の部分に Qgis2threejs と入力して下さい。 Qgis2threejs Plugin が表示されますので、□にチェックを入れ、プラグインのインストールボタンをク リックします。これで、インストールの完了です。 プラグインの管理画面 次にメニューの Web→Qgis2threejs→Setting をクリックすると、Settings ウィンドが表示されます。 ここでは、Optional Features (Plugins)の GSI Elevation Tile Provider にチェックが入っていることを 確認して下さい。これは、Qgis2threejs で、地理院タイルの標高データを扱えるようにするための設定 です。
- 19. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja Qgis2threejs の設定画面 設定が確認できたら、メニューの Web→Qgis2threejs→Qgis2threejs をクリックして下さい。 Qgis2threejs の設定画面が表示されます。ここでまず、左の World をクリックして下さい。ここでは、 QGIS の地図ビューを出力する際の範囲や背景の色、高さ方向の強調率を設定します。地形が平坦な場合、 強調率を高くした方が分かりやすい図ができます。ここでは、Vertical exaggregation の値を３として下 さい。 Qgis2threejs の「World」設定画面 次に、DEM をクリックして下さい。ここは、DEM Layer が GSI Elevation Tile となっているのを確 認すれば大丈夫です。なお、解像度の高いデータを出力したい場合、Resampling のスライダーバーを右 端まで移動させて下さい。
- 20. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 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 等でも閲覧することが可能です。また、サーバーにア ップすることにより、インターネット上から閲覧することもできます。 Qgis2threejs の「Point」設定画面 なお、QGIS2threejs では、地図ビューに表示されている範囲の画像が出力されます。そのため、より 詳細なデータを出力したい場合は、地図ビュー上で出力したい範囲にズームインしてから作業を行う必 要があります。また、設定を変えることにより様々な表示が可能になりますので、余裕があればチャレ ンジしてみて下さい。
- 21. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja Qgis2threejs plugin の出力表示例 ２．６ WMTS レイヤとして地理院タイルの読み込み WMTS（OpenGIS Web Map Tile Service Implementation Standard）とは、OGC という地理空間に 関する標準化団体が定めた、タイル地図サービスに関する標準規格です。地理院タイルは、こちらのデ ータとしても利用することが可能です。WMTS レイヤについての設定は、国土地理院の GitHub にて「地 理院タイルの WMTS メタデータ提供実験」として公開されていますvii。 WMTS レイヤとして読み込む際には、メニューからレイヤ→レイヤの追加→WMS/WMTS レイヤの追 加をクリックして下さい。すると、WM(T)S サーバからレイヤを追加ウィンドが表示されるので、新規 をクリックします 「WM(T)S サーバからレイヤを追加」ウィンド
- 22. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja すると、新規 WMS 接続の作成 ウィンドが表示されるので、名称に地理院タイル 、URL に http://gsi-cyberjapan.github.io/experimental_wmts/gsitiles_wmts_light.xml と入力して OK をクリッ クして下さい。すると、WM(T)S サーバからレイヤを追加ウィンドに戻るのでプルダウンメニューで、 地理院タイルが選択されていることを確認した上で、接続をクリックして下さい。 「新規 WMS 接続の作成」設定画面 すると、タイルセットとして、選択可能なレイヤが表示されます。 WTMS レイヤとして選択可能な地理院タイル（軽量版） ここで、表示したいレイヤを選択して追加をクリックすれば、QGIS 上に地理院タイルが表示されます
- 23. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja なお、前述の URL は、地理院タイルのうち背景画像としてよく使われる 5 つのレイヤだけを選べる軽 量版です。入力する際の URL を、 http://gsi-cyberjapan.github.io/experimental_wmts/gsitiles_wmts.xml とすると、上記以外の様々な WMTS データも表示することができます。災害時に撮影されたレイヤ等も含まれるのですが、きわめて 多数のレイヤが含まれるため、必要とするレイヤを表示するのが少し難しいかもしれません。一方で， 最新のデータを迅速に利用することが可能なので、用途によって使い分けてもらえればと思います。 WTMS レイヤとして選択可能な地理院タイル（全体版）
- 24. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 熊本県阿蘇地方の災害対応撮影と標準地図の重ね合わせ表示 ３ leaflet を用いた地理院タイルの活用法 ３．１ 概要 leaflet は、Web ブラウザーを用いて地理空間情報を表示する際に使われるライブラリです。軽量で、 PC のブラウザーとスマホのブラウザーの両方で、シームレスに使用できることが特徴です。地理院地図 も leaflet をもとに作成されています。
- 25. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 地理院地図の表示画面 本ハンズオンでは、以下の手順で実習を行います。 (1) 地理院タイルを表示する (2) 独自タイルレイヤを追加する (3) 避難所のデータを追加する。 なお、実習にあたっては、HTML、CSS、JavaScript などの基礎的な知識があることが望ましいです。 ですが、それがなくても実習を行うことは可能です。また、実習の際に使用するスクリプト等は、以下 の URL にて公開しています。 https://public.etherpad-mozilla.org/p/CCPN6th_FOSS4G また、Web ブラウザーで閲覧できるサイトを構築する際には、外部のサーバーを利用するか、ローカ ル環境に www サーバーを構築することが必要になります。ここでは、JSfiddleviiiというサービスを使っ て、外部サーバーの環境を使用します。そのため、使用するデータには、個人情報等が含まれないよう ご注意下さい。 ３．２ leaflet に地理院タイルを表示する 初めに、leaflet に地理院地図を表示する手順です。まず、以下の URL から JSfiddle にアクセスして 下さい。 https://jsfiddle.net/ 以下のような画面が表示されます。
- 26. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 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 の登録手順 登録が成功すると、leaflet.css が表示されます。これで、leaflet が使用可能となりました。 次に、HTML BOX に以下を書き込んで下さい（コピーアンドペーストでも可）
- 27. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja <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> <a href="http://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>'; // 地理院標準タイルおよび出典の読み込み
- 28. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 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 を用いて、地理院タイルを表示することが可能となります。 ３．３ 独自タイルレイヤを追加する 次に、地理院タイルの標準レイヤ以外のタイルを追加する手順です。ここでは、むろらんオープンデ ータライブラリの空中写真から作成した高解像度のタイル画像を使用することとします。また、そうし
- 29. 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> <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}.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 }; // 選択コントロールの追加 L.control.layers(baseMaps).addTo(map);
- 30. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja すると、結果表示画面の右上の、レイヤ選択コントロールが追加され、以下の通り地理院地図と室蘭 空中写真を選択することが可能になります。 室蘭周辺の地理院タイルと空中写真の表示 ここで行われていることを解説すると、//室蘭市オープンデータ出典と// 室蘭市空中写真タイルおよび 出典の読み込みは、地理院タイルを読み込んだ際に行っていることと同様です。次に、// 地理院タイル? 室蘭市空中写真を用いた地図の生成も、地理院タイルを表示した際に行っていることと同じですが、こ
- 31. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja こでは、標準タイルと室蘭空中写真の二つを表示するレイヤとして選択しています。その次の// 地理院 タイル?室蘭空中写真の追加の部分は、レイヤを選択するための変数を作成しています。そして// 選択 コントロールの追加では、作成した変数を読み込み、地図にレイヤ選択コントロールを追加しています。 以上の手順で、複数のタイルレイヤを leaflet 上に読み込むことが可能となります。 ３．４ 避難所データを表示する 最後に、避難場所のデータを leaflet 上に表示します。leaflet 上に点データを表示するには様々な方法 がありますが、ここでは GeoJSON という形式のデータを読み込むことにします。この場合、既存のデ ータを GeoJSON 形式に変換する必要があります。ここでは、geojson.ioixというサービスを使って変換 することとします。このサイトでは、緯度経度情報を含んだ CSV ファイルをドラッグ&ドロップするだ けで、以下の図のように GeoJSON 形式に変換し、表示してくれます。ただしその際、緯度経度情報を もつカラムは LAT、LON といった名前であること、CSV ファイルの文字コードが UTF-8 である必要が あります。 ここで変換したファイルを上のメニューの SAVE→GeoJSON を選んで保存すれば、GeoJSON 形式の ファイルとして保存できます。 geojson.io を用いた CSV ファイルの GeoJSON 形式への変換と表示例 本ハンズオンでは時間の関係でこの手順については省略し、変換済みの map.geojson というファイル を使用することとします。 まず、JAVASCRIPT BOX の最後に、以下を追加します。 // STEP 3: 避難所 geojson 追加 ------------------------------------- // これまで入力した部分の下に、以下を追加
- 32. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja // 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 ファイルが表示され ます。 GeoJSON ファイルの表示
- 33. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja ただしこのままでは、GeoJSON ファイルの範囲と、表示範囲があっていません。そこで、地図の表示 範囲を GeoJSON ファイルの範囲に合わせます。 まず、JAVASCRIPT BOX の//地理院タイル?室蘭市空中写真を用いた地図の生成の部分の center: [42.317432,140.976820], の行を削除します。 次に、以下を JAVASCRIPT BOX の最後にペーストし、RUN をクリックします。 //以下の行を最後にペーストする //geojson データの中心にズーム map.fitBounds(geolayer.getBounds()); すると、以下のように GeoJSON ファイルの範囲に対応して、地図の表示範囲が変更されます。 GeoJSON ファイルに対応した地図表示範囲の設定 さてこのままでは、個別の避難所についての情報が不明のままです。そこで、避難所の位置をクリッ クすると情報が表示されるように修正します。まず、// leaflet に読み込み可能な形に変換の下の var geolayer = L.geoJson(geodata);
- 34. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja に、 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); } } layer.bindPopup(content.join("<br />")); } すると、避難所のマーカーをクリックした際にポップアップで属性が表示されるようになります。 属性データのポップアップでの表示
- 35. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 以上の手順で、leaflet 上に地理院タイルや独自データを表示し、属性データを示すことが可能になり ます。なお、JSfiddle ではアカウントを作成すれば、作業結果を共有することもできます。以下は、今 回のハンズオンのデータの表示例になります。 https://jsfiddle.net/wata909/0arucb9t/ また、JSfiddle 上のコードをコピー、以下のフォーマットのペースとし、HTML ファイルとして保存 して独自サーバーに置いて公開することにより、JSfiddle 以外のサーバーでも公開することが出来ます。 // STEP 7 自分の Web ページとして表示したい場合 // 以下を html として保存して、サーバーにアップロードして下さい。 // なお、保存の際の文字コードは UTF-8 として下さい。 <!DOCTYPE html> <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=/slideshow/foss4g-69748525/69748525/"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>
- 36. OSGeo.JP CC BY 4.0 https://creativecommons.org/licenses/by/4.0/deed.ja 以下に GitHub Pages で公開した例を表示します https://wata909.github.io/foss4g_miscellaneous/ccpn6th_FOSS4G.html ４ まとめ 本ハンズオンでは、FOSS4G の中でも代表的な QGIS と leaflet を使って、独自データを表示する手順 について説明しました。大変限られた時間ではありましたが、地理院タイルの読み込み自体は、それほ ど難しくないことを感じていただければ幸いです。 FOSS4G には、これ以外にも様々なアプリケーションが存在します。例えば Android 用のモバイル GIS では Geopaparazzi というソフトウェアがあります。Geopaparazzi では、オフライン用のデータを 作成することにより、ネットワークのない環境でも地理院タイルを利用することができますx。 この様に、様々な FOSS4G を使うことにより、地理院タイルの利用が広がることを期待します。また、 本セッションが、FOSS4G を扱うきっかけになれば幸いです。
- 37. 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 i http://www.qgis.org/ ii http://leafletjs.com/ iii http://www.city.muroran.lg.jp/main/org2260/odlib.php iv https://github.com/minorua/TileLayerPlugin v なお、元データでは平面直角座標系 第 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://github.com/gsi-cyberjapan/experimental_wmts viii https://jsfiddle.net/ ix http://geojson.io/ x 手順の詳細は、以下のアドレス等を参照 http://ccpn.gsi.go.jp/meeting_partners/data/20151128/CCPN4_jirei6.pdf http://koutochas.seesaa.net/article/439665495.html