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

SotMJP2018-retroscope

 SotMJP2018-retroscope

Yuzo Matsuzawa

August 11, 2018
Tweet

More Decks by Yuzo Matsuzawa

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. 2018/8/11 12




    hello leaflet






    <br/>var map = L.map("map").setView([35.671872, 139.754969], 18);<br/>L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {<br/>attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a>contributors"<br/>}).addTo(map);<br/>


    View Slide

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

    View Slide

  14. 2018/8/11 14




    retroscope







    <br/>var map = L.map("map").setView([35.671872, 139.754969], 18);<br/>L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {<br/>attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"<br/>}).addTo(map);<br/>var layer = L.tileLayer.mask("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg", {<br/>attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>"<br/>}).addTo(map);<br/>map.on("mousemove", function(event) {<br/>layer.setCenter(event.containerPoint);<br/>});<br/>


    View Slide

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

    View Slide

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

    View Slide

  17. 2018/8/11 17

    View Slide

  18. 2018/8/11 18

    View Slide

  19. 2018/8/11 19

    View Slide

  20. 2018/8/11 20

    View Slide

  21. 2018/8/11 21

    View Slide

  22. 2018/8/11 22

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. 2018/8/11 26

    View Slide

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

    View Slide

  28. OpenStreetMap
    2018/8/11 28

    View Slide

  29. 2018/8/11 29

    View Slide

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

    View Slide

  31. Map Warper
    2018/8/11 31

    View Slide

  32. 2018/8/11 32

    View Slide

  33. 2018/8/11 33

    View Slide

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

    View Slide

  35. 2018/8/11 35

    View Slide

  36. 2018/8/11 36

    View Slide

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

    View Slide

  38. 2018/8/11 38

    View Slide

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

    View Slide

  40. 2018/8/11 40

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide