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
130
FOSS4G 2015 Tokyo Vector Tiles Pt. 3
Hidenori FUJIMURA
October 09, 2015
Tweet
Share
More Decks by Hidenori FUJIMURA
See All by Hidenori FUJIMURA
Smart Maps and Bazaar
hfu
0
32
Sensemaking with Smart Maps
hfu
0
19
Smart Mapsfor the United Nations,with the United Nations
hfu
0
82
UN Smart Maps
hfu
0
70
スマート地図バザールによる地図XMLのタイル配信
hfu
0
50
国土地理院におけるベース・レジストリの整備とDX推進への取り組み
hfu
0
110
Smart Maps for the UN and for All
hfu
1
73
DWG 7 Update 2023-02
hfu
1
36
UN Open GIS Initiative
hfu
0
36
Featured
See All Featured
How to name files
jennybc
64
92k
A Tale of Four Properties
chriscoyier
150
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Ruby is Unlike a Banana
tanoku
96
10k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Navigating Team Friction
lara
177
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Building Your Own Lightsaber
phodgson
98
5.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
4 Signs Your Business is Dying
shpigford
175
21k
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