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. 5
Search
Hidenori FUJIMURA
October 09, 2015
0
100
FOSS4G 2015 Tokyo Vector Tiles Pt. 5
Hidenori FUJIMURA
October 09, 2015
Tweet
Share
More Decks by Hidenori FUJIMURA
See All by Hidenori FUJIMURA
Smart Maps and Bazaar
hfu
0
33
Sensemaking with Smart Maps
hfu
0
21
Smart Mapsfor the United Nations,with the United Nations
hfu
0
82
UN Smart Maps
hfu
0
71
スマート地図バザールによる地図XMLのタイル配信
hfu
0
51
国土地理院におけるベース・レジストリの整備とDX推進への取り組み
hfu
0
110
Smart Maps for the UN and for All
hfu
1
75
DWG 7 Update 2023-02
hfu
1
36
UN Open GIS Initiative
hfu
0
37
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Web Components: a chance to create the future
zenorocha
305
41k
Clear Off the Table
cherdarchuk
84
310k
RailsConf 2023
tenderlove
4
540
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Into the Great Unknown - MozCon
thekraken
10
990
Navigating Team Friction
lara
178
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
What the flash - Photography Introduction
edds
64
11k
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
本パートの狙い gsimaps のシェルなしに地理院ベクトルタイ ルを直接Leafletで触っていただくことで、 – ベクトルタイルの処理に親しんで頂く – ベクトルタイルの表示カスタマイズや処理の可 能性に触れて頂く • gsimapsは、整い終わったstyle.jsをベースに地図に 触れて頂くショーケースとして設計されており、表示
カスタマイズや処理への対応は今のところ組み込ま れていない。 3
地理院ベクトルタイル https://github.com/gsi-cyberjapan/vector-tile-experiment/ 4
今回は、こちら、 canvas.html をフォークします 5
canvas.html の構造(イメージ) 6 ウェブブラウザ SVG engine Canvas engine Leaflet 0.7.3
TileLayer.Canvas TileLayer.GeoJSON 道路中心線 河川中心線 鉄道中心線 注記
早速フォーク https://github.com/gsi-cyberjapan/vector-tile-experiment/ 7
動作確認 早速(Websiteを設定して)動作確認! …するためには、何らかレポジトリのコンテンツを触る必要あり。 canvas.html を適宜修正して、Website をチェック! 8