More Related Content
Similar to タイル地図がおもしろい(20)
More from Kohei Otsuka(20)
タイル地図がおもしろい
- 1. 今、タイル地図がおもしろい
モバイル位置情報サービスクリエイター
歴史国土プロジェクト/地図タイル工法協会
大塚恒平
資料URL:http://www.slideshare.net/kokogiko/ss-‐15067961
2012/11/08
1
- 2. 誰?
² こちずふぁんこと大塚恒平(元ここギコ)
² 2001年、KDDIがケータイにGPSをつけたのを機に位置情報に目覚める
² 2002年〜2006年頃まで、ケータイ位置情報実験サイト「ここギコ!」を運
営
² 2002年頃、個人で位置ゲーの走り「アンテナ奪取」を運営
² 2007年〜2010年、株式会社マピオンで位置ゲー「ケータイ国盗り合戦」
事業立ち上げ、技術/企画両面をディレクション
² 2010年〜2012年、株式会社ATR-‐PromotionsでiOSアプリ「ちずぶらりシ
リーズ」「震災記憶地図」事業立ち上げ、技術/企画両面をディレクション
² 2012年6月、「歴史国土」サービスの企画で国土地理院Geoアクティビティ
フェスタ優秀賞受賞、2013年のサービスインを目指す
² タイル地図技術の研究/普及を目指す秘密結社「地図タイル工法協会」
局長
2012/11/08
2
- 3. タイル地図とは?
² 広義には、ズーム/領域毎に異なる小画像に分割された大
画像地図(スクロール地図)の総称
³ 大きな画像を小さな画像に分割し、領域内に入った部分を読
み込み、出た部分を開放する事で、メモリ消費を最小化し軽い
地図インタフェースを実現
³ ズームイン/ズームアウトで異なるタイルセットを呼ぶ事で、縮尺
に応じた精度の地図画像を表示できる
2012/11/08
SVG
Map
Labブログより引用
©
SVG
Map
Lab
3
http://blog.svg-‐map.com/2007/05/post_8a9a.html
- 4. タイル地図とは?
² 狭義には、GoogleがGoogle
Mapsで発明した、球面メ
ルカトル図法を使った四分木タイル地図
³ 南北緯85度付近以上を除く世界全域が正方形の画像で
表せる(最小ズームでは256px四方で表現)
³ ズームを一つ大きくする度、タイルを四分割していく
³ 競合他社(MS等)やオープンソースも採用し、事実上の
Web地図標準
2012/11/08
Microsoft
Bing
Maps
Tile
System
リファレンスより引用
©
Microsoft
2012
4
http://msdn.microsoft.com/en-‐us/library/bb259689.aspx
- 5. タイル地図仕様を使うと
² 同じ仕様でデータを作れば、Google
Maps
APIや
OpenLayers,
LeaYlet等のAPIを使って、いろんな地図
(Google
Maps,
Bing
Maps,
OpenStreetMap,
電子国土v4)
と重ね合わせられます
² 例えばこんな例:
主題図:日本シームレス地質図
©
産業技術総合研究所
古地図:2万分の1迅速測図
http://riodb02.ibase.aist.go.jp/db084/maps.html
©
農業環境技術研究所
http://habs.dc.affrc.go.jp/habs_map.html?zoom=13&lat=35.68428&lon=139.75339&layers=B0
2012/11/08
5
- 6. タイル地図仕様を使うと
² FOSS4G
Tokyoで物議を醸した問題作
『Openlayersとgdalを使ってPreziみたいなプレゼンをする方法』
…もタイル地図仕様を使ってます
©
id:tmizu23
2012/11/08
6
http://d.hatena.ne.jp/tmizu23/20121104
- 7. タイル地図仕様を使うと
² FOSS4G
Tokyoで物議を醸した問題作
『Openlayersとgdalを使ってPreziみたいなプレゼンをする方法』
…もタイル地図仕様を使ってます
©
id:tmizu23
2012/11/08
7
http://d.hatena.ne.jp/tmizu23/20121104
- 8. でも、どうやって作ればいいの?
² 手元に地図はある、でもどうやってタイル地図
仕様(Tile
Map
Service:TMS)のデータにすれ
ばいいの?
2012/11/08
8
- 10. 基本的な手順
² 地図画像があるとして
³ 画像を地図情報付き画像(GeoTiff)にする
Ø gdal_translate
³ 地図情報付き画像の座標系を変える
Ø gdalwarp
³ 地図をタイル地図に変換する
Ø gdal2tiles.py
2012/11/08
10
- 11. 例1:ワールドファイルを使う場合
気仙沼市防災マップ
² ワールドファイルとは:
³ 画像の基準座標からの拡縮パラメータ、回転パラメータ、平行
移動パラメータ等を定義して、画像を元画像のまま地図情報付
き画像にする
³ 右の図のように、各縮パラメータA,E、回転
パラメータB,D、原点の平行移動パラメータ
C,Fを求め、別ファイルとして記述
³ ファイル名はjpgの場合jpw、pngの場合
pngwとして保存
A:
X軸方向の地図座標系単位/ピクセル
D:
Y軸方向の回転
B:
X軸方向の回転
E:
Y軸方向の地図座標系単位/ピクセル、通常負値
C:
地図左上ピクセルの地図座標系X座標値
F:
地図左上ピクセルの地図座標系Y座標値
2012/11/08
11
図はhttp://en.wikipedia.org/wiki/World_Yile
より引用
- 12. 例1:ワールドファイルを使う場合
気仙沼市防災マップ
² サンプルデータ:
気仙沼市防災マップ
tunamizentai.jpg
² 図法は新日本測地系IX系
² ワールドファイルは下記の通り準備
し、tunamizentai.jpwとして保存
3.530323581529793
0.039071292158646964
0.039071292158646964
-‐3.530323581529793
145037.3411415444
327367.13742246653
©気仙沼市
http://www.city.kesennuma.lg.jp/www/contents/
1253258421312/Yiles/tunamizentai.pdfより引用
2012/11/08
12
- 13. 例1:ワールドファイルを使う場合
気仙沼市防災マップ
² ワールドファイルでjpgが地図情報付き画像として振る舞うので、gdal_translateは
不要
² gdalwarpを実行し、球面メルカトル図法のGeoTiffにする
gdalwarp
-‐s_srs
"+proj=tmerc
+lat_0=36
+lon_0=139.83333333333”
※入力ファイル座標系定義(新日本測地系平面直角座標IX系)
-‐t_srs
“+proj=merc
+a=6378137
+b=6378137
+lat_ts=0.0
+lon_0=0.0
+x_0=0.0
+y_0=0
+k=1.0
+units=m
+nadgrids=@null
+no_defs”
※出力ファイル座標系定義(球面メルカトル座標系)
-‐of
GTiff
-‐dstnodata
0
tunamizentai.jpg
tunamizentai_warp.tif
※出力ファイルフォーマット データが存在しないところを出力画像で透過する指定
² できたtunamizentai_warp.tifに対し、gdal2tiles.pyを実行
gdal2tiles.py
-‐k
tunamizentai_warp.tif
※kmlファイルの出力を強制する
2012/11/08
13
- 15. 例1:ワールドファイルを使う場合
気仙沼市防災マップ
² ワールドファイルを使う方法
³ 利点
® (座標系変換以外の)画像の変型が少ない
³ 欠点
® 誤差が拡散されるのでぴったりは合わない
® ワールドファイルパラメータを求める手法を工夫しない
といけない
2012/11/08
15
- 16. 例2:GCPを使う場合
旧版地形図
² サンプルデータ:
明治24年25000分の1勝川村
12_KATSUKAWA.jpg
² 図法は旧日本測地系UTM53帯
² 四隅の経緯度がきっちり判っている&隣の図郭ときっ
ちり隙間なく合って欲しい
Ø GCP(Ground
Control
Point)を与え、
その場所でぴったり合わせ込む
方式を使う
©国土地理院
2012/11/08
16
- 17. 例2:GCPを使う場合
旧版地形図
² 旧版地形図を扱う際の注意
³ 使われている測地系を確認
(旧日本測地系:Tokyo
or新日本測地系:JGD2000)
Ø 使われている投影系を確認
(UTM
51帯〜56帯)
Ø 座標値は投影系(UTM)の座標値で与える
座標値変換にはcs2cs等のコマンドを用いる
cs2cs
+proj=longlat
+ellps=bessel
+towgs84=-‐146.336,506.832,680.254,0,0,0,0
+no_defs
※ここまで変換元座標系定義(旧日本測地系経緯度)
+to
+proj=utm
+zone=53
+ellps=bessel
+towgs84=-‐146.336,506.832,680.254,0,0,0,0
+units=m
+no_defs
※このオプション以降 変換先座標系定義(旧日本測地系UTM53帯)
Ø 大正11年以前の地形図には、経度に10.40秒のズレ
2012/11/08
17
明治24年地形図 大正14年地形図
- 18. 例2:GCPを使う場合
旧版地形図
² gdal_translateでjpgをUTMのままGeoTiffに変換
gdal_translate
-‐a_srs
"+proj=utm
+zone=53
+ellps=bessel
+towgs84=-‐146.336,506.832,680.254,0,0,0,0
+units=m
+no_defs”
※旧日本測地系UTM53帯の定義文字列
-‐gcp
1007
6583
673208.30134452
3896493.95502946
-‐gcp
1037
746
673066.58004481
3903887.91210747
-‐gcp
8109
740
682162.73263575
3904066.99178520
-‐gcp
8051
6573
682311.91058995
3896672.88649580
※GCPでのピクセル座標と地図座標系の対応をGCPの数だけ羅列
-‐of
GTiff
12_KATSUKAWA.jpg
12_KATSUKAWA_trans.tif
² gdalwarpで球面メルカトル図法に変換、その後gdal2tiles.py
gdalwarp
-‐s_srs
“+proj=utm
+zone=53
+ellps=bessel
+towgs84=-‐146.336,506.832,680.254,0,0,0,0
+units=m
+no_defs”
-‐t_srs
“+proj=merc
+a=6378137
+b=6378137
+lat_ts=0.0
+lon_0=0.0
+x_0=0.0
+y_0=0
+k=1.0
+units=m
+nadgrids=@null
+no_defs”
-‐of
GTiff
-‐dstnodata
0
-‐te
15239629.56
4191532.49
15250760.54
4200617.54
12_KATSUKAWA_trans.tif
12_KATSUKAWA_warp.tif
※指定された座標の矩形の外を切り取る指定、変換後の座標系(球面メルカトル図法)で指定する
gdal2tiles.py
-‐k
12_KATSUKAWA_warp.tif
2012/11/08
18
- 19. 例2:GCPを使う場合
旧版地形図
² 完成
©国土地理院,
Google,
OpenStreetMap
2012/11/08
19
- 20. 例2:GCPを使う場合
旧版地形図
² GCPを使う方法
³ 利点
® GCPとして指定した点の位置がぴったり合う
³ 欠点
® GCPをむりやり合わせるため、座標系変換以上に地図
画像が歪む可能性あり
地図の持つ精度/解像度以上の厳密さで指定するの
は避けるべき
2012/11/08
20
- 21. 例3:国土地理院DEMからの
段彩陰影図作製
² サンプルデータ:
基盤地図情報10mメッシュDEM、2次メッシュ523636領域
(志摩半島付近)
FG-‐JPS-‐5136-‐36-‐dem10b-‐20090201.xml
² 国土地理院基盤地図情報ダウンロードサイト
http://fgd.gsi.go.jp/download/
から入手
² データの座標系は新日本測地系経緯度
² 弊ブログ記事
http://d.hatena.ne.jp/kochizufan/20120923/1348413037
で手順紹介してるので若干飛ばします
2012/11/08
21
- 22. 例3:国土地理院DEMからの
段彩陰影図作製
² これまでと違うところ
³ gdalはOSGeo.JPで配布しているmext_gdal版を使います
® 基盤地図情報のxmlファイルをそのまま使えるようになっている
® http://www.osgeo.jp/foss4g-‐mext/で配布中
® 注:mext版のgdalは1.9.0ベースです。
1.9.1以降をインストール済みの環境だとうまく動かない場合あり(プレゼン中のMacがそ
の状態…)
³ カラーGeoTiffと白黒GeoTiffをマージするpythonスクリプト、hsv_merge.pyを
準備
® http://fwarmerdam.blogspot.jp/2010/01/hsvmergepy.htmlで入手
³ 段彩図の色指定を行うramp.txtを準備
-‐9999
0
0
0
0
® 標高値と紐づけたい色のリストを自由に設定
-‐50
0
0
205
® -‐9999は、0
0
0
0にする(データのない部分
0
0
191
191
の透過設定)
0.1
57
151
105
100
117
194
93
200
230
230
128
500
202
158
75
1000
214
187
98
2000
185
154
100
3000
220
220
220
2012/11/08
ramp.txtのサンプル
22
3800
255
255
255
- 23. 例3:国土地理院DEMからの
段彩陰影図作製
² gdal_translateでxmlをGeoTiff
DEMに変換
gdal_translate
FG-‐JPS-‐5136-‐36-‐dem10b-‐20090201.xml
wgs_dem.tif
² gdalwarpで球面メルカトル図法に変換
陰影図用の海面を0にしたデータと、段彩図用の海面を-‐9999にした
データの2種作る
ブログ記事と異なり、投影系をパラメータで与えています
gdalwarp
-‐s_srs
“+proj=longlat
+ellps=GRS80
+towgs84=0,0,0,0,0,0,0
+no_defs”
-‐t_srs
“+proj=merc
+a=6378137
+b=6378137
+lat_ts=0.0
+lon_0=0.0
+x_0=0.0
+y_0=0
+k=1.0
+units=m
+nadgrids=@null
+no_defs”
-‐of
GTiff
-‐r
bilinear
wgs_dem.tif
merc_dem0.tif
gdalwarp
-‐s_srs
“+proj=longlat
+ellps=GRS80
+towgs84=0,0,0,0,0,0,0
+no_defs”
-‐t_srs
“+proj=merc
+a=6378137
+b=6378137
+lat_ts=0.0
+lon_0=0.0
+x_0=0.0
+y_0=0
+k=1.0
+units=m
+nadgrids=@null
+no_defs”
-‐of
GTiff
-‐r
bilinear
-‐srcnodata
""
-‐dstnodata
-‐9999
wgs_dem.tif
merc_dem9.tif
2012/11/08
23
- 24. 例3:国土地理院DEMからの
段彩陰影図作製
² gdaldem
color-‐relief
コマンドで段彩図を作製
gdaldem
color-‐relief
-‐alpha
-‐co
ALPHA=YES
merc_dem9.tif
ramp.txt
colorrelief.tif
² gdaldem
hillshade
コマンドで陰影図を作製
gdaldem
hillshade
-‐compute_edges
merc_dem0.tif
hillshade.tif
² 段彩図と陰影図をマージして、段彩陰影図を作る
hsv_merge.py
colorrelief.tif
hillshade.tif
colorshade.tif
² gdal2tiles.pyを実行して、タイル地図化
gdal2tiles.py
-‐k
-‐r
antialias
colorshade.tif
2012/11/08
24
- 25. 例3:国土地理院DEMからの
段彩陰影図作製
² 完成
©国土地理院,
Google,
OpenStreetMap
2012/11/08
25
- 26. gdalを使うと比較的簡単に
タイル地図/kmlを作れるが…
² まだ難しい点が多い
³ データサイズの問題
® 1つ大きなズームレベルに対応しようと思うと、必要なデータ量が
約5倍に
® 精度が上がるならばよいが、デジタルズームだけならば容量の無
駄
³ 投影系の特定が面倒
³ ワールドファイルパラメータやGCPの対応データ作成が困
難
³ 共有の困難
® 隣り合う地図同士が異なる場所で公開されていても、容易にには
気付けないし重ね合わせられない
³ 著作権や公開許諾の困難
2012/11/08
26
- 27. gdalを使うと比較的簡単に
タイル地図/kmlを作れるが…
² まだ難しい点が多い
³ データサイズの問題
® 1つ大きなズームレベルに対応しようと思うと、必要なデータ量が
約5倍に
® 精度が上がるならばよいが、デジタルズームだけならば容量の無
駄
³ 投影系の特定が面倒
³ ワールドファイルパラメータやGCPの対応データ作成が困
難
³ 共有の困難
® 隣り合う地図同士が異なる場所で公開されていても、容易にには
気付けないし重ね合わせられない
³ 著作権や公開許諾の困難
2012/11/08
27
- 28. 無駄なタイル容量
抑制のために
² クライアントサイドズームライブラリを作ってみた
³ ZoomTMSLayerライブラリ
® https://github.com/kochizufan/ZoomTMSLayer
® タイル地図の準備された最大ズーム以上に、クライアントサイドで表示を拡大
するタイルソースクラス
® Google
Maps
API及びLeaYletに対応、OpenLayersも対応させる予定
® バグレポート、コードコミット歓迎
2012/11/08
28
- 29. gdalを使うと比較的簡単に
タイル地図/kmlを作れるが…
² まだ難しい点が多い
³ データサイズの問題
® 1つ大きなズームレベルに対応しようと思うと、必要なデータ量が
約5倍に
® 精度が上がるならばよいが、デジタルズームだけならば容量の無
駄
³ 投影系の特定が面倒
³ ワールドファイルパラメータやGCPの対応データ作成が困
難
³ 共有の困難
® 隣り合う地図同士が異なる場所で公開されていても、容易にには
気付けないし重ね合わせられない
³ 著作権や公開許諾の困難
2012/11/08
29
- 31. 歴史国土の目指すもの
² パラメータ指定等を簡単に
³ 絵地図と標準地図上の対応点をポチポチ打っていく
だけで、投影系やパラメータの推定、GCPセット登録
等を自動的にやってくれる
² 共有を簡単に
³ 同じドメイン上で共通した仕様で提供、検索機能等も
設けて、他の人の登録した関連のある地図を見つけ
易く
² 権利処理を簡単に
³ 旧版地形図に関しては、公開の一括許諾を取りたい
と思っています
2012/11/08
31
- 32. 歴史国土の目指すもの
² パラメータ指定等を簡単に
³ 絵地図と標準地図上の対応点をポチポチ打っていく
だけで、投影系やパラメータの推定、GCPセット登録
等を自動的にやってくれる
² 共有を簡単に
³ 同じドメイン上で共通した仕様で提供、検索機能等も
設けて、他の人の登録した関連のある地図を見つけ
易く
² 権利処理を簡単に
³ 旧版地形図に関しては、公開の一括許諾を取りたい
と思っています
2012/11/08
32
- 33. 3分間クッキング
² タイル化したい画像をアップロードして
Tiles
Courtesy
of
Mapnik
2012/06/22
33
- 34. 3分間クッキング
² ポチポチ現代地図との対応点をいくつか教え
て
Tiles
Courtesy
of
Mapnik
2012/06/22
34
- 35. 3分間クッキング
² タイルマップ化処理を実行すれば
Tiles
Courtesy
of
Mapnik
2012/06/22
35
- 36. 3分間クッキング
² That’s
all.
Tiles
Courtesy
of
Mapnik
2012/06/22
36
- 37. 歴史国土の目指すもの
² パラメータ指定等を簡単に
³ 絵地図と標準地図上の対応点をポチポチ打っていく
だけで、投影系やパラメータの推定、GCPセット登録
等を自動的にやってくれる
² 共有を簡単に
³ 同じドメイン上で共通した仕様で提供、検索機能等も
設けて、他の人の登録した関連のある地図を見つけ
易く
² 権利処理を簡単に
³ 旧版地形図に関しては、公開の一括許諾を取りたい
と思っています
2012/11/08
37
- 38. 歴史国土の開発状況
² 順調に遅れています orz
³ というかプロトタイプからほぼ進んでいません
³ 協力な助っ人の合流でなんとか進められそう?
® @monomoti
® @maka2_donzoko
® @kamigata0
® github/schijimatsu
³ 協力者募集中です(特にデザイン系)
2012/11/08
38
- 39. まとめ
² タイル地図標準の存在で、仕様(TMS)に合わせ
て地図を作れば、Web上で相互に重ね合わせる
事は簡単になっている
誰もが地図を使って発信できる時代になっている
² タイル地図の作製も、FOSS4Gプロダクトのgdal
ツールを使えば比較的簡単になっている
² データサイズの問題は、ZoomTMSLayerで一部
解決を目指す
² さらに作製を簡単に、かつ共有も容易にするた
めのサービスとして「歴史国土」を企画中
2012/11/08
39
- 40. まとめ
² タイル地図標準の存在で、仕様(TMS)に合わせ
て地図を作れば、Web上で相互に重ね合わせる
事は簡単になっている
誰もが地図を使って発信できる時代になっている
² タイル地図の作製も、FOSS4Gプロダクトのgdal
ツールを使えば比較的簡単になっている
² データサイズの問題は、ZoomTMSLayerで一部
解決を目指す
² さらに作製を簡単に、かつ共有も容易にするた
めのサービスとして「歴史国土」を企画中
2012/11/08
40
- 42. ネット地図黎明期
(1998年〜2005年)
プレーヤ
技術
ターゲット
地図提供者
マピオン等
静的・ラ
スタ
最新地図
プレー
ヤ自身
- 45. 東京時層地図、今昔散歩等の登場
(2010年)
プレーヤ
技術
ターゲット
地図提供者
ラスタ
地図センター 動的・ラスタ
既存地図
等
マピオン等
動的・ラ
スタ
最新地図
プレー
動的・ラスタ
Google
ヤ自身
- 46. Googleの再パラダイムシフト
(2011年)
プレーヤ
技術
ターゲット
地図提供者
ラスタ
地図センター 動的・ラスタ
既存地図
等
マピオン等
動的・ラ
スタ
最新地図
プレー
Google,
動的・ベクタ
ヤ自身
Apple
- 47. Googleの再パラダイムシフト
(2011年〜)
プレーヤ
技術
ターゲット
地図提供者
ラスタ
地図センター 動的・ラスタ
既存地図
等
基本はベクタ化に
追随と思われる
マピオン等
動的・ベ
クタ
最新地図
プレー
Google,
動的・ベクタ
ヤ自身
Apple
- 48. ラスタの時代は終わったのか?
² No.
² 正確な最新状況地図サイトでは、今後ベクタが一般化
² しかし、過去の地図(古地図)やクリエイティブな地図(絵地
図)等では、ベースデータがラスタであるため、ベクタ化は
無理
Ø このような地図のタイル化が、今後活発になる可能性がある
² このような既存地図は、多くのプレーヤが持っている
Ø 古地図(官公庁、公共事業系企業、士業他)
Ø 絵地図(出版社、クリエイタ他)
² こういったものを引き受けるプラットフォームが必要
² ラスタ地図技術はコモディティ化し、個人や団体の発信す
る時代に
- 49. 歴史国土の目指すもの
(2013年〜)
プレーヤ
技術
ターゲット
地図提供者
歴史国土
動的・ラスタ
CGM
的提供
ラスタ
地図センター 動的・ラスタ
既存地図
等
マピオン等
動的・ベ
クタ
最新地図
プレー
Google,
動的・ベクタ
ヤ自身
Apple
- 50. 歴史国土の目指すもの
(2013年〜)
プレーヤ
技術
ターゲット
地図提供者
歴史国土
動的・ラスタ
CGM
的提供
ラスタ
地図センター 動的・ラスタ
既存地図
等
OSM
データのため
技術不問
マピオン等
動的・ベ
クタ
最新地図
プレー
Google,
動的・ベクタ
ヤ自身
Apple
- 51. 歴史国土の目指すもの
(2013年〜)
プレーヤ
技術
ターゲット
地図提供者
古地図/絵地図等の
動的・ラスタ
歴史国土
OpenStreetMap的
CGM
立ち位置を目指す
的提供
ラスタ
地図センター 動的・ラスタ
既存地図
等
OSM
データのため
技術不問
マピオン等
動的・ベ
クタ
最新地図
プレー
Google,
動的・ベクタ
ヤ自身
Apple
- 52. いずれ取り入れたい要素
アーカイブシリーズ
(地図+コンテンツ+AR)
©首都大学東京 渡邉研究室他
http://hiroshima.mapping.jp/
Omeka/Neatline(地図+コンテンツ+プレゼン)
©Scholars‘
Lab
at
the
University
of
Virginia
Library
http://neatline.org/
- 53. いずれ取り入れたい要素
アーカイブシリーズ
(地図+コンテンツ+AR)
©首都大学東京 渡邉研究室他
http://hiroshima.mapping.jp/
単に地図を収集、蓄積、配信
するだけではなく、
地図の主題をどう伝えるか、
どう見せてプレゼンするかまで
引き受けられるサイトを目指す
Omeka/Neatline(地図+コンテンツ+プレゼン)
©Scholars‘
Lab
at
the
University
of
Virginia
Library
http://neatline.org/