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
97
SotMJP2018-retroscope
Yuzo Matsuzawa
August 11, 2018
Tweet
Share
More Decks by Yuzo Matsuzawa
See All by Yuzo Matsuzawa
20191115.pdf
frogcat
0
34
20190924DA-JPSxMapTile.pdf
frogcat
0
29
20190824 Leaflet+WebGL
frogcat
0
130
20190705GNJP2
frogcat
0
25
Retroscope by leaflet
frogcat
1
3.6k
Other Decks in Technology
See All in Technology
読者のことを考えて書いてみよう / Write with your reader in mind
line_developers
PRO
3
370
New Features in C# 10/11
chack411
0
1k
Adopting Kafka for the #1 job site in the world
ymyzk
1
710
エンタープライズにおけるSRE立ち上げとNew Relic選定に至った背景とは / SRE Startup and New Relic in the Enterprise
tomoyakitaura
2
160
Learning from AWS Customer Security Incidents [2022]
ramimac
0
1.3k
1,000万人以上が利用する「家族アルバム みてね」のSRE組織は4年間でどのように作られてきたのか/SRE NEXT 2022
isaoshimizu
6
3.3k
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
15
7.9k
tfcon-2022-cpp
cpp
5
5.2k
5分で完全理解するGoのiota
uji
3
2.1k
CTOのためのQAのつくりかた #scrumniigata / SigSQA How to create QA for CTOs and VPoEs
caori_t
0
330
街じゅうを"駅前化"する電動マイクロモビリティのシェアサービス「LUUP」のIoTとSRE
0gm
1
950
0->1 フェーズで E2E 自動テストを導入した私たちの、これまでとこれから
yoyakoba
0
760
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
How to name files
jennybc
39
59k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Ruby is Unlike a Banana
tanoku
91
9.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Building Your Own Lightsaber
phodgson
94
4.6k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Facilitating Awesome Meetings
lara
29
3.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
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/