SotMJP2018-retroscope

Retroscope と
オープンイノベーション
インディゴ株式会社・松澤有三
2018/8/11 1
State of the Map Japan 2018

View Slide

1.Intro
2018/8/11 2
Retroscope & OI / State of the Map Japan 2018

View Slide

2018/8/11 3
http://frogcat.github.io/retroscope/

View Slide

2018/8/11 4
ポインタの周辺だけが
ライトをあてたように別の地図にかわる表現技法

View Slide

2018/8/11 5
二画面を同期地図を部分的にクリップ
透明度の操作マスク
多様な地図のアーカイブ化→ 異なる地図を比較するニーズ
①比較できるように整えられた地図
②比較するための手法・手段
③これらが制限なく自由に使えること

View Slide

2018/8/11 6
初出: FOSS4G Tokyo 2015

View Slide

2018/8/11 7
GitHub でいろんな国の人から☆をもらったり

View Slide

2018/8/11 8
国内外で実際にモノを作って紹介してもらったり
https://medium.com/@napo/mappa-di-trento-1915-da-un-
libro-di-cesare-battisti-84935794b1ed

View Slide

Contents
2018/8/11 9
1.Intro
2.Retroscope をつくる
3.タイルをつくる
4.オープンイノベーション

View Slide

2.Retroscope をつくる
2018/8/11 10

View Slide

2018/8/11 11
次のスライドから Retroscope をつくるための
コードをゼロから解説していきます

View Slide

2018/8/11 12

hello leaflet

 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); 

View Slide

2018/8/11 13
日比谷公園周辺の OpenStreetMap

View Slide

2018/8/11 14

retroscope

 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); }); 

View Slide

2018/8/11 15
地理院写真地図 on OpenStreetMap

View Slide

2018/8/11 16
ホームページを作ったことがあるなら
たぶん大丈夫

View Slide

2018/8/11 17

View Slide

2018/8/11 18

View Slide

2018/8/11 19

View Slide

2018/8/11 20

View Slide

2018/8/11 21

View Slide

2018/8/11 22

View Slide

タイルとは?
2018/8/11 23
https://maps.gsi.go.jp/development/siyou.html#siyou-zm

View Slide

2018/8/11 24
https://maps.gsi.go.jp/development/tileCoordCheck.html

View Slide

2018/8/11 25
PNG JPEG
GIF GeoJSON
PBF など
写真
イラスト地図
センサーデータ
ベクトルデータ
など
時代, 地域,
テーマ,
スタイルなど

View Slide

2018/8/11 26

View Slide

2018/8/11 27
背景にしたい
地図画像タイルを
さがしてセット
上にのせたい地図画像タイルを
さがしてセット

View Slide

OpenStreetMap
2018/8/11 28

View Slide

2018/8/11 29

View Slide

地理院タイル
2018/8/11 30

View Slide

Map Warper
2018/8/11 31

View Slide

2018/8/11 32

View Slide

2018/8/11 33

View Slide

今昔マップ
2018/8/11 34

View Slide

2018/8/11 35

View Slide

2018/8/11 36

View Slide

水害地形分類図デジタルアーカイブ
2018/8/11 37

View Slide

2018/8/11 38

View Slide

G空間情報センター
2018/8/11 39

View Slide

2018/8/11 40

View Slide

2018/8/11 41
ただし、タイルの利用規約はよく読みましょう
タイルを URL を公開しているからといって
二次利用を許可しているとは限りません
いろんなタイルを発掘して組み合わせることで
なにかの役に立ったり
新たな知見を得られたりするかもしれません
ぜひご活用ください

View Slide

3. タイルをつくる
2018/8/11 42

View Slide

2018/8/11 43
手持ちの古地図や手書きの地図画像なんかを
タイルにすれば Retroscope に使えるかもしれません
どうやればいいでしょうか？

View Slide

Geo-referencing
2018/8/11 44
イラスト上の点を基準となる地図上の点に対応づけることで
画像を変形することで地図を重ねることができます
Image by GIS Resource,
http://www.gisresources.com/georeferencing-2/
Licensed under CC-BY-NC 4.0

View Slide

2018/8/11 45
QGIS ジオレファレンサプラグイン
https://docs.qgis.org/2.14/ja/docs/user_manual/plugins/plugins_georeferencer.html

View Slide

2018/8/11 46
MapWarper
https://mapwarper.net/
https://mapwarper.h-gis.jp/

View Slide

2018/8/11 47
ブラウザにドロップした画像を直接変形して
タイル生成とダウンロードまでやってしまえ、という仕組み
（開発中）

View Slide

2018/8/11 48
タイルづくりも簡単になってきています
お手持ちの素材もぜひオープンに

View Slide

4. オープンイノベーション
2018/8/11 49

View Slide

2018/8/11 50
初出: FOSS4G Tokyo 2015

View Slide

2018/8/11 51
✔ オープンスタンダード
→ タイル仕様はオープンスタンダード
→ タイル仕様に従ったデータを公開する自由があった
→ タイル仕様に従ったアプリケーションを開発・配布する自由
✔ オープンデータ
→ CC-BY や地理院利用規約といったライセンスに従ったタイル
→ データを使用・加工する自由
✔ オープンソースソフトウェア
→ Leaflet は使用・改変・拡張が自由
→ ちいさなプラグインによって Retroscope を実現
３つのオープンがもともとそろっていた

View Slide

2018/8/11 52
もうひとつの事例
CS立体図

View Slide

2018/8/11 53
https://www.slideshare.net/osgeojapan/csfoss4g-2017-tokyo
✔ オープンな図法

View Slide

2018/8/11 54
✔ オープンスタンダード
http://gsj-seamless.jp/labs/elev/doc/png_elev_tile.html

View Slide

2018/8/11 55
✔ オープンデータ
https://maps.gsi.go.jp/development/demtile.html

View Slide

2018/8/11 56
✔ オープンソースソフトウェア
Web GL を使ったブラウザ上での
標高PNG→CS立体図直接生成技術の
開発・公開

View Slide

2018/8/11 57
某プロジェクト
の協力者に
その結果
応用先の拡大
配信・図化の
問題が解決
高精度 DEM の
発掘
動的画像生成に
よる用途開発
高精度 DEM を
さらに別の用途へ
オープンイノベーションでは？

View Slide

2018/8/11 58
https://www.slideshare.net/wata909/osgeocs

View Slide

2018/8/11 59
http://frogcat.github.io/csmap-gl/

View Slide

SotMJP2018-retroscope

SotMJP2018-retroscope

Yuzo Matsuzawa

More Decks by Yuzo Matsuzawa

Other Decks in Technology

Featured

Transcript