Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SotMJP2018-retroscope

19e790c76b806fb479a00b87cc0a5e30?s=47 Yuzo Matsuzawa
August 11, 2018
Technology
0
86

 SotMJP2018-retroscope

19e790c76b806fb479a00b87cc0a5e30?s=128

Yuzo Matsuzawa

August 11, 2018
Tweet

More Decks by Yuzo Matsuzawa

See All by Yuzo Matsuzawa
19e790c76b806fb479a00b87cc0a5e30?s=48 frogcat
0
28
19e790c76b806fb479a00b87cc0a5e30?s=48 frogcat
0
24
19e790c76b806fb479a00b87cc0a5e30?s=48 frogcat
0
80
19e790c76b806fb479a00b87cc0a5e30?s=48 frogcat
0
24
19e790c76b806fb479a00b87cc0a5e30?s=48 frogcat
1
3.1k

Other Decks in Technology

See All in Technology
1dceaa2dcea41c16004f430c1723b20e?s=48 miso
0
120
11cbdce6fef8ae507d51b96dca4a0ec5?s=48 sksat
0
100
657ac87f75c375156e5f79cdadebed4d?s=48 yasuoyasuo
0
110
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
0
100
2dae6daed4edd231d733fcec84944332?s=48 sinedied
0
170
43a3551f1fad41e6d3c1e3e98b6cfaa1?s=48 webbingstudio
0
120
81c7a276a2c5944a9b8bdd9cc1a43250?s=48 takatoshiroto
0
130
03858bb7b6debdd69ea0531b0f57c612?s=48 con_mame
5
3.7k
179d41d0fdd38c6980de9f2ae0e4768a?s=48 9wick
0
350
828bebe205894e1aa5f75a1fc6935a9c?s=48 ganchan11
0
150
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
0
2.3k
9cdd446fb259ec93e52d4388f60197f8?s=48 karamem0
0
700

Featured

See All Featured
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
194
15k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
341
16k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
8.8k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
120
16k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
104
6.4k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
322
54k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
208
10k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
495
110k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
147
6.7k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
101
11k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
115
26k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
332
16k

Transcript

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

    Japan 2018

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

    Map Japan 2018

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

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

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

    ③これらが制限なく自由に使えること

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

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

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

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

  10. 2.Retroscope をつくる 2018/8/11 10 Retroscope & OI / State of

    the Map Japan 2018

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

  12. 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: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a>contributors" }).addTo(map); </script> </body> </html>

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

  14. 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: "&copy; <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>

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

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

  17. 2018/8/11 17

  18. 2018/8/11 18

  19. 2018/8/11 19

  20. 2018/8/11 20

  21. 2018/8/11 21

  22. 2018/8/11 22

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

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

  25. 2018/8/11 25 PNG JPEG GIF GeoJSON PBF など 写真 イラスト地図

    センサーデータ ベクトルデータ など 時代, 地域, テーマ, スタイル など

  26. 2018/8/11 26

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

  28. OpenStreetMap 2018/8/11 28

  29. 2018/8/11 29

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

  31. Map Warper 2018/8/11 31

  32. 2018/8/11 32

  33. 2018/8/11 33

  34. 今昔マップ 2018/8/11 34

  35. 2018/8/11 35

  36. 2018/8/11 36

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

  38. 2018/8/11 38

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

  40. 2018/8/11 40

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

    ぜひご活用ください

  42. 3. タイルをつくる 2018/8/11 42 Retroscope & OI / State of

    the Map Japan 2018

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

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

    Licensed under CC-BY-NC 4.0

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

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

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

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

  49. 4. オープンイノベーション 2018/8/11 49 Retroscope & OI / State of

    the Map Japan 2018

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

  51. 2018/8/11 51 ✔ オープンスタンダード → タイル仕様はオープンスタンダード → タイル仕様に従ったデータを公開する自由があった → タイル仕様に従ったアプリケーションを開発・配布する自由

    ✔ オープンデータ → CC-BY や地理院利用規約といったライセンスに従ったタイル → データを使用・加工する自由 ✔ オープンソースソフトウェア → Leaflet は使用・改変・拡張が自由 → ちいさなプラグインによって Retroscope を実現 ３つのオープンがもともとそろっていた

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

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

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

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

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

  57. 2018/8/11 57 某プロジェクト の協力者に その結果 応用先の拡大 配信・図化の 問題が解決 高精度 DEM

    の 発掘 動的画像生成に よる用途開発 高精度 DEM を さらに別の用途へ オープンイノベーションでは？

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

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