FOSS4G 2015 Tokyo Vector Tiles Pt. 6

Transcript

1. 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
2. 本日の流れ ① 導入：ベクトルタイルの概要と未来 ② GitHubから地理院地図をフォークして、マ イ地理院地図を作る ③ マイ地理院地図にインターネット上のタイ ルレイヤを加える ④ マイ地理院地図に簡単なベクトルデータを 加える（ただしベクトルタイルとして） ⑤ 地理院ベクトルタイルを素のLeafletサイト に表示してみる。 ⑥ 地理院ベクトルタイルの表示内容を調整す る 2
3. canvas.html のアレンジ •  【河川中心線】　rvrcllayer < TileLayer.Canvas –  rvrcl_style を変更することで、スタイルを変更できる •  【道路中心線】　rdcllayer < TileLayer.Canvas –  rdcl_style を変更することで、スタイルを変更できる •  【鉄道中心線】　railcllayer < TileLayer.Canvas –  railcl_style を変更することで、スタイルを変更できる •  【注記】　annolayer < TileLayer.GeoJSON –  http://cyberjapandata.gsi.go.jp/xyz/experimental_anno/style.js を 代替するスタイルオブジェクトを入れることで、スタイルを変更できる 3 •  河川中心線、道路中心線、鉄道中心線の仕様やサンプルは、 https://github.com/foss4g-tokyo-vt/vector-tile-experiment •  注記の仕様やサンプルは、　　　　　　　　　　　　　　　　　　　　　　 https://github.com/gsi-cyberjapan/experimental_anno
4. 応用編 【案1】 /vector-tile-experiment/index.html のアレンジ •  SVGベースで、よりgsimapsの実装に近いもの •  アレンジ版のstyle.jsを適宜レポに置いて読み込ませる方向で 【案2】 スタイルシート系の先進的な事例を学ぶ •  http://frogcat.github.io/gsi-river/ 【案3】 他のライブラリを試す •  http://frogcat.github.io/gsi-anno-voronoi/ –  注記でボロノイ図、D3使用 •  http://frogcat.github.io/gsi-anno/ –  Leaflet 1.0b •  http://gsi-cyberjapan.github.io/vectiles-mapkit/tangram.html –  Tangram + 地球地図ベクトルタイル 4
5. 【おわりに】 The party continues, on the web. •  対面での作業は重要であるがスケールしない。 •  オンラインでつながることの重要性 •  FOSS4G Tokyo Vector Tile Group への参加 をお勧めします！ https://github.com/foss4g-tokyo-vt/living-room/issues/2 5