Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FOSS4G 2015 Tokyo Vector Tiles Pt. 3
Search
Hidenori FUJIMURA
October 09, 2015
0
140
FOSS4G 2015 Tokyo Vector Tiles Pt. 3
Hidenori FUJIMURA
October 09, 2015
Tweet
Share
More Decks by Hidenori FUJIMURA
See All by Hidenori FUJIMURA
みんなに伝わる防災マップ
hfu
0
69
未来の繁栄のためのスマート地図
hfu
0
130
Smart Maps for the prosperity in the future
hfu
0
210
Smart Maps and Bazaar
hfu
0
150
Sensemaking with Smart Maps
hfu
0
85
Smart Mapsfor the United Nations,with the United Nations
hfu
0
120
UN Smart Maps
hfu
0
160
スマート地図バザールによる地図XMLのタイル配信
hfu
0
110
国土地理院におけるベース・レジストリの整備とDX推進への取り組み
hfu
0
250
Featured
See All Featured
Designing for Performance
lara
609
69k
Producing Creativity
orderedlist
PRO
346
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Speed Design
sergeychernyshev
32
1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
Ministry of Land, Infrastructure, Transport and Tourism Geospatial Information Authority
of Japan ベクトルタイル利用サイトを作ろう Hidenori FUJIMURA Geospatial Information Authority of Japan 1 FOSS4G 2015 Tokyo ハンズオンデイ 2015-10-09T14:00/17:00 @駒場RC An棟2F
本日の流れ ① 導入:ベクトルタイルの概要と未来 ② GitHubから地理院地図をフォークして、マ イ地理院地図を作る ③ マイ地理院地図にインターネット上のタイ ルレイヤを加える ④ マイ地理院地図に簡単なベクトルデータを 加える(ただしベクトルタイルとして) ⑤ 地理院ベクトルタイルを素のLeafletサイト に表示してみる。
⑥ 地理院ベクトルタイルの表示内容を調整す る 2
地理院地図のレイヤ管理 /js/gsimaps.js で読み込み設定する layers*.txt にレイヤ設定が記載されている。 3 「地理院地図」では、それぞれの layers*.txt が 「表示できる情報」の各フォルダに
対応するように運用中。 layers*.txt のフォーマットは、GitHubで公開 github.com/gsi-cyberjapan/layers-dot-txt-spec
layers-dot-txt-spec ノーカスタマイズのIISでも同一ドメインであれば動くことができるようにする、みたい な工夫のため、意図的に拡張子を .txt にしていますが、中身は JSON です。 /layers_txt/layers0.txt ※ layers-dot-txt-spec
に記載されている src 属性による動的読み込みは gsimaps では未実装です(10/12の基調講演をお楽しみに)。 4
/layers_txt/my_layers.txt を作る /layers_txt/my_layers.txt を新規作成し、 まずは、そこに layers_0.txt の1項目めを写す 5
/js/gsimaps.js に /layers_txt/my_layers.txt を参照させる /js/gsimaps.js の19行めに加筆 6 コミット後、マイ地理院地図のページを開き、 「情報」→「表示できる情報」を確認
追加したレイヤの反映例 7 my_layers.txt が 反映されたもの
my_layers.txt を少しアレンジ LayerGroup に格納して、titleやhtmlを加筆。 See Also: https://github.com/gsi-cyberjapan/layers-dot-txt-spec/ ひとひねり: 編集ページへのリンクを標準地図レイヤの html
属性に加えてみる ※ LayerGroup の html 属性には gsimaps が対応していない。 8
my_layers.txt アレンジ例 9
アレンジ反映例 10 …gsimaps.js にたくさん加筆することで皆さんのマイレイヤを一元化することもできる
ウェブ地図の fork and join 11 GitHub で fork layers.txt で
join 主体間の分散非同期を確保し、ユーザの利便を最大化できないか。
(実習) いろいろなレイヤを加えてみよう ① いろいろなタイルレイヤを加えてみる 例)日本シームレス地質図WMTS配信サービス https://gbank.gsj.jp/seamless/wmts/wmts.html ② マイ地理院地図のリンク集を作る https://github.com/foss4g-tokyo-vt/living-room/ edit/master/links.md にプルリクエスト 12
ヒント: JSON の文法チェック http://jsonlint.com
おまけ: layers.txt の編集ツール • http://maps.gsi.go.jp/config/config.html • https://github.com/gsi-cyberjapan/gsimaps/blob/gh-pages/config/config.html 13