Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
SotMJP2018-retroscope
Yuzo Matsuzawa
August 11, 2018
Technology
0
80
SotMJP2018-retroscope
Yuzo Matsuzawa
August 11, 2018
Tweet
Share
More Decks by Yuzo Matsuzawa
See All by Yuzo Matsuzawa
frogcat
0
25
frogcat
0
15
frogcat
0
48
frogcat
0
19
frogcat
1
2.9k
Other Decks in Technology
See All in Technology
iwashi
1
210
yamamuteki
3
870
kanaugust
PRO
0
160
takumanakagame
1
310
900groove
2
560
1027kg
0
210
kentaro
1
810
kaniza
0
120
go5paopao
4
550
dena_tech
1
100
akitok_
2
800
hiroyaiizuka
0
200
Featured
See All Featured
danielanewman
1
520
keavy
107
14k
jmmastey
10
630
kastner
54
1.9k
samlambert
237
10k
bkeepers
321
53k
lara
590
61k
pauljervisheath
195
15k
zenorocha
296
40k
chriscoyier
498
130k
chriscoyier
779
240k
dotmariusz
94
5.5k
Transcript
Retroscope と オープンイノベーション インディゴ株式会社・松澤有三 2018/8/11 1 State of the Map
Japan 2018
1.Intro 2018/8/11 2 Retroscope & OI / State of the
Map Japan 2018
2018/8/11 3 http://frogcat.github.io/retroscope/
2018/8/11 4 ポインタの周辺だけが ライトをあてたように別の地図にかわる表現技法
2018/8/11 5 二画面を同期 地図を部分的にクリップ 透明度の操作 マスク 多様な地図のアーカイブ化→ 異なる地図を比較するニーズ ①比較できるように整えられた地図 ②比較するための手法・手段
③これらが制限なく自由に使えること
2018/8/11 6 初出: FOSS4G Tokyo 2015
2018/8/11 7 GitHub でいろんな国の人から☆をもらったり
2018/8/11 8 国内外で実際にモノを作って紹介してもらったり https://medium.com/@napo/mappa-di-trento-1915-da-un- libro-di-cesare-battisti-84935794b1ed
Contents 2018/8/11 9 1.Intro 2.Retroscope をつくる 3.タイルをつくる 4.オープンイノベーション
2.Retroscope をつくる 2018/8/11 10 Retroscope & OI / State of
the Map Japan 2018
2018/8/11 11 次のスライドから Retroscope をつくるための コードをゼロから解説していきます
2018/8/11 12 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hello leaflet</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script> </head> <body> <div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div> <script> var map = L.map("map").setView([35.671872, 139.754969], 18); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a>contributors" }).addTo(map); </script> </body> </html>
2018/8/11 13 日比谷公園周辺の OpenStreetMap
2018/8/11 14 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>retroscope</title> <meta
name="viewport" content="initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script> <script src="https://frogcat.github.io/leaflet-tilelayer-mask/leaflet-tilelayer-mask.js"></script> </head> <body> <div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div> <script> var map = L.map("map").setView([35.671872, 139.754969], 18); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors" }).addTo(map); var layer = L.tileLayer.mask("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg", { attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>" }).addTo(map); map.on("mousemove", function(event) { layer.setCenter(event.containerPoint); }); </script> </body> </html>
2018/8/11 15 地理院写真地図 on OpenStreetMap
2018/8/11 16 ホームページを作ったことがあるなら たぶん大丈夫
2018/8/11 17
2018/8/11 18
2018/8/11 19
2018/8/11 20
2018/8/11 21
2018/8/11 22
タイルとは? 2018/8/11 23 https://maps.gsi.go.jp/development/siyou.html#siyou-zm
2018/8/11 24 https://maps.gsi.go.jp/development/tileCoordCheck.html
2018/8/11 25 PNG JPEG GIF GeoJSON PBF など 写真 イラスト地図
センサーデータ ベクトルデータ など 時代, 地域, テーマ, スタイル など
2018/8/11 26
2018/8/11 27 背景にしたい 地図画像タイルを さがしてセット 上にのせたい地図画像タイルを さがしてセット
OpenStreetMap 2018/8/11 28
2018/8/11 29
地理院タイル 2018/8/11 30
Map Warper 2018/8/11 31
2018/8/11 32
2018/8/11 33
今昔マップ 2018/8/11 34
2018/8/11 35
2018/8/11 36
水害地形分類図デジタルアーカイブ 2018/8/11 37
2018/8/11 38
G空間情報センター 2018/8/11 39
2018/8/11 40
2018/8/11 41 ただし、タイルの利用規約はよく読みましょう タイルを URL を公開しているからといって 二次利用を許可しているとは限りません いろんなタイルを発掘して組み合わせることで なにかの役に立ったり 新たな知見を得られたりするかもしれません
ぜひご活用ください
3. タイルをつくる 2018/8/11 42 Retroscope & OI / State of
the Map Japan 2018
2018/8/11 43 手持ちの古地図や手書きの地図画像なんかを タイルにすれば Retroscope に使えるかもしれません どうやればいいでしょうか?
Geo-referencing 2018/8/11 44 イラスト上の点を基準となる地図上の点に対応づけることで 画像を変形することで地図を重ねることができます Image by GIS Resource, http://www.gisresources.com/georeferencing-2/
Licensed under CC-BY-NC 4.0
2018/8/11 45 QGIS ジオレファレンサプラグイン https://docs.qgis.org/2.14/ja/docs/user_manual/plugins/plugins_georeferencer.html
2018/8/11 46 MapWarper https://mapwarper.net/ https://mapwarper.h-gis.jp/
2018/8/11 47 ブラウザにドロップした画像を直接変形して タイル生成とダウンロードまでやってしまえ、という仕組み (開発中)
2018/8/11 48 タイルづくりも簡単になってきています お手持ちの素材もぜひオープンに
4. オープンイノベーション 2018/8/11 49 Retroscope & OI / State of
the Map Japan 2018
2018/8/11 50 初出: FOSS4G Tokyo 2015
2018/8/11 51 ✔ オープンスタンダード → タイル仕様はオープンスタンダード → タイル仕様に従ったデータを公開する自由があった → タイル仕様に従ったアプリケーションを開発・配布する自由
✔ オープンデータ → CC-BY や地理院利用規約といったライセンスに従ったタイル → データを使用・加工する自由 ✔ オープンソースソフトウェア → Leaflet は使用・改変・拡張が自由 → ちいさなプラグインによって Retroscope を実現 3つのオープンがもともとそろっていた
2018/8/11 52 もうひとつの事例 CS立体図
2018/8/11 53 https://www.slideshare.net/osgeojapan/csfoss4g-2017-tokyo ✔ オープンな図法
2018/8/11 54 ✔ オープンスタンダード http://gsj-seamless.jp/labs/elev/doc/png_elev_tile.html
2018/8/11 55 ✔ オープンデータ https://maps.gsi.go.jp/development/demtile.html
2018/8/11 56 ✔ オープンソースソフトウェア Web GL を使ったブラウザ上での 標高PNG→CS立体図直接生成技術の 開発・公開
2018/8/11 57 某プロジェクト の協力者に その結果 応用先の拡大 配信・図化の 問題が解決 高精度 DEM
の 発掘 動的画像生成に よる用途開発 高精度 DEM を さらに別の用途へ オープンイノベーションでは?
2018/8/11 58 https://www.slideshare.net/wata909/osgeocs
2018/8/11 59 http://frogcat.github.io/csmap-gl/