SotMJP2018-retroscope

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 を実現３つのオープンがもともとそろっていた

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/

SotMJP2018-retroscope

SotMJP2018-retroscope

More Decks by Yuzo Matsuzawa

Other Decks in Technology

Featured

Transcript