FOSS4G 2013 Tokyo 基調講演

1. FOSS4G 2013 Tokyo
2013年11月1日（金）13:10∼13:40
於：東京大学 駒場リサーチキャンパス
コンベンション・ホール
FOSS4Gで地理院地図
国土地理院 情報普及課
藤村 英範
ture, Transport and Tourism
Geospatial Information Authority of Japan
【電子メール】
藤村 hfu@gsi.go.jp
1

2. Powered by FOSS4G
• 国土地理院のウェブ地図は、FOSS4Gに
支えられてきました。
電子国土Webシステムv4はOpenLayers上に構築
ラスタ系一部タイルデータ作成にGDALを使用
ベクトル系一部タイルデータ作成にTileMillを使用
サーバ側位置情報処理にPostGISを使用
!2

3. 伊豆大島オルソタイルはGDALで作成
伊豆大島オルソタイル作成にもGDALが活躍
この後、TMS→XYZ変換して
http://cyberjapandata.gsi.go.jp/xyz/
20131017dol2/{z}/{x}/{y}.png
!3

4. 10月30日「地理院地図」正式公開
!4

5. !5
Updates in a nutshell
FOSS4Gのアイディアを更に取り入れ、
様々なウェブ地図ライブラリから使いやすく
正式公開 試験公開
ウェブ地図
地理院地図
ウェブ地図ライブラリ
（独自URL規則）
電子国土
Web.NEXT
タイルデータ
国土地理院
（OpenLayers 2ベース）
電子国土Webシステム
Version 4
背景地図等データ
地理院タイル
（XYZ
*1）
様々な
ウェブ地図ライブラリ
(OpenLayers/Leaflet等)
(*1) Slippy map tilenames: 様々なウェブ地図ライブラリで標準的に対応しているURL規則

6. !6
Updates in a nutshell
FOSS4Gのアイディアを更に取り入れ、
様々なウェブ地図ライブラリから使いやすく
正式公開 試験公開
ウェブ地図
地理院地図
ウェブ地図ライブラリ
（独自URL規則）
電子国土
Web.NEXT
タイルデータ
国土地理院
（OpenLayers 2ベース）
電子国土Webシステム
Version 4
背景地図等データ
地理院タイル
（XYZ
*1）
様々な
ウェブ地図ライブラリ
(OpenLayers/Leaflet等)
(*1) Slippy map tilenames: 様々なウェブ地図ライブラリで標準的に対応しているURL規則

7. !7
地理院タイルのXYZ化

8. !8
いきさつ
その他様々なチャンネルから
頂いたお声を支えにして実現
!
ありがとうございました！
お待たせしました！

9. 地理院タイルのXYZ化
!9
様々なウェブ地図APIが標準的に対応しているXYZ方式へ
http://portal.cyberjapan.jp/help/development.html

10. 代表的なライン
標準地図（z=2∼18）
http://cyberjapandata.gsi.go.jp/xyz/std2012/{z}/{x}/{y}.png
白地図（z＝5∼14）
http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png
色別標高図（z=5∼15）
http://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png
オルソ画像（z=15∼17）
http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg
※ortをgazo1∼gazo4に変えると国土画像情報第1期∼第4期
!10

11. !11
様々なウェブ地図ライブラリからの利用

12. !12
OpenLayers 2.13.1
※地理院地図ヘルプにサンプルがあります
new OpenLayers.Layer.XYZ("標準地図",
"http://cyberjapandata.gsi.go.jp/xyz/std2012/${z}/${x}/$
{y}.png", {
attribution: "<a href='http://portal.cyberjapan.jp/
help/termsofuse.html' target='_blank'>国土地理院</a>",
maxZoomLevel: 18
});

13. !13
OpenLayers 3
※地理院地図ヘルプにサンプルがあります
new ol.layer.Tile({source: new ol.source.XYZ({
attributions: [
new ol.Attribution({html: "<a href='http://
portal.cyberjapan.jp/help/termsofuse.html'
target='_blank'>国土地理院</a>"})
],
url: "http://cyberjapandata.gsi.go.jp/xyz/std2012/{z}/
{x}/{y}.png",
projection: "EPSG:900913"

14. !14
Leaflet
※地理院地図ヘルプにサンプルがあります
L.tileLayer(
‘http://cyberjapandata.gsi.go.jp/xyz/std2012/{z}/{x}/
{y}.png',
{attribution: "<a href='http://portal.cyberjapan.jp/
help/termsofuse.html' target=‘_blank'>国土地理院</a>"}

15. ReadyMap (LGPL)
WebGLを使った地図描画エンジンの利用例
!15

16. !16
<script src=‘leaflet.js’></script>
<script src=‘readymap-debug-0.0.1.js’></script>
<script>
…
map = new L.Map('ViewContainer', { globe: true });
var layer = new L.TileLayer('http://
cyberjapandata.gsi.go.jp/xyz/std2012/{z}/{x}/{y}.png',
{…});
map.setView(new L.LatLng(38.3, 141.0),
7).addLayer(layer);
map.finalizeGlobe();
</script>

17. !17
X Y Z
ぜひ様々なウェブ地図でご利用ください

18. 利用規約の整理
【旧】
電子国土Webシステム利用規約
国土地理院背景地図等データ利用規約
【新】
地理院タイル利用規約
従前の規約を「地理院タイル利用規約」に一元化して整理
これまでの利用方法はこれまで通り実施していただいて大丈夫
印刷物の配布可能条件を緩和
アプリケーション開発の承認申請が不要に
※今後も利用動向を踏まえて、継続的に見直し
!18

19. 出所明示の方法について
!19
• 「国土地理院」又は「地理院」の語を入れて頂ければ、それぞれの状
況にふさわしい表現で構いません。
• ウェブ地図例：「国土地理院」「地理院タイル（標準地図）」
• 資料例：「出典：地理院地図」「地図：地理院地図」
• アプリ例：「国土地理院が提供する地理院タイルを表示します。」
• 【お願い】ハイパーリンクが可能な環境では、利用規約 http://
portal.cyberjapan.jp/help/termsofuse.html （または地理院地図）
へのリンクをかけていただければ幸いです。
地理院タイル利用規約（抜粋）
第3条 本規約で、出所の明示とは、「国土地理院」又は「地理院」の文字列を資料、ウェブサイト又はアプリ
ケーションソフトに含めることで地理院タイルの出所を明示することをいいます。
第5条 地理院タイルを利用する場合には、次に従ってください。
2 著作権法第30条における私的使用に相当する範囲を越える利用に際しては出所の明示を行ってください。
第6条 地理院タイルを利用できるウェブサイトを公開する又はアプリケーションソフトを提供する場合には、
次に従ってください。
2 出所の明示を行ってください。

20. 一般的な用途でA3サイズまで印刷可能に
A3
297mm
420mm
地理院タイル利用規約 第5条第4項
地理院タイルをA3サイズを超える範囲に印刷した印刷物を配布しない
でください。
!20

21. !21
従来版のシステムやデータ（「旧版」）には、
従来の利用規約が適用されます。
!
旧版の提供は、平成26年3月末をめどに
停止させていただく予定です。

22. !22
標高タイル

23. 標高タイル
!23
○ 標高API・標高タイルも試験公開から正式公開に移行
○ 標高タイルは地理院タイルの一種と位置づけ一元的に取り扱い
○ 地理院タイルの形式は画像にとどまらず、標高タイルにおいてはCSV形式
Elevation Tiles: Pixel-fine DEM for Web Maps
標高タイル：画面ピクセルの分解能を持つウェブ用DEM
○ 地図タイルと同一のタイル座標とピクセル座標で、CSV形式で標高を格納
○ http://cyberjapandata.gsi.go.jp/xyz/dem/{z}/{x}/{y}.txt (z=14)
○ 数値データをテキストで扱う形式のため、高速化の余地…

24. !24
標高タイルの高度利用のための協力
産業技術総合研究所 地質情報研究部門
国土地理院 地理空間情報部
シームレス地質情報研究グループ
情報普及課
• ウェブ地図における標高データ利用の高度化に向け、
「シームレス地質図の技術 地理院タイルのデータ」
• まずは「標高が分かるシームレス地質図」を目指す！

25. !25
PNG標高タイル（実証中の提案）
多量の標高データをWebブ
ラウザで高速に扱うことに
適したフォーマット
http://gsj-seamless.jp/
labs/elev/png_elev_tile.html
○ 現在の実装はcm精度を選択（エベレストやチェレンジャー海淵まで表現可能）
○ もちろんNODATAの割当も考慮
【エンコード】
標高値[m]に10m（現在はm=2）を掛け
整数化。2の補数表現とみなし、
下位から8ビットごとにRGBチャンネルに
割り当て（NODATAは負の最大を割当）
【デコード】
canvas でできる。
var image = new Image(); image.crossOrigin = 'anonymous';
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = 256; canvas.height = 256;
var context = canvas.getContext('2d');
context.drawImage( this, 0, 0 );
data = context.getImageData( 0, 0, 256, 256t ).data;
x = data[(i+j*256)*4] + data[(i+j*256)*4+1]*256;
h = ( x<32768 ) ? x : 65536-x;
console.log(h);
}
image.src = 'http://gsj-seamless.jp/labs/elev/m/9/202/453.png';

26. !26
「標高がわかるシームレス地質図」の実現
マウスカーソル位置の標高を
数∼数十ms以内のリアルタイムに表示
http://gsj-seamless.jp/labs/elev/denshiKokudoTest.html
「地質図表示ページに表示される標高値には，国土地理院の提供
する標高タイルデータから得られた値を掲載しています．」
http://gsj-seamless.jp/labs/elev/
にも同じ技術を実装！
• https://gbank.gsj.jp/seamless/
• 今後もさらに高度なアプリケーションに展開される予定

27. !27
コミュニケーション

28. @gsi_cyberjapan をフォローください
地理院地図固有の新着情報は、すべてtwitterに一元化
!28

29. !29
github.com/gsi-cyberjapan
Issues を掲示板として利用
gist でタイル利用方法を共有
開発者とつながるためのお知恵をお聞かせください

30. !30
まとめ

31. !31
X Y Z
XYZ方式での提供

32. !32
A3
420mm
A3印刷OK
297mm

33. !33
非画像タイルへの展開

34. !34
FOSS4Gで地理院タイルをご活用ください！