7ータ・
3 7 1

タスクフォース（オンライン）のMinistryof Information
Land, Infrastructure,
Transport
Geospatial
Authorityof Japanand Tourismとのについて

の1.の2. ベク ルタイルに する
3.

Vector（）

1

1.の2

ウェブ

「」のと○「あり、」は、が えたのなの を しているもの。のをするウェブ

でえ最緯のが載っている、の、経に加え①②ので、0mをののがわかる

災が載っているのに

ータのつ

域の災

①
②のの強化にのやリスクを め、が られる

効な機など

で後のをでががあるがわかる
ながわかる

災後
災

https://maps.gsi.go.jp/に高がわかる

で、なパソコンやスマホからアクセスに

2

較できるにわかる3でなな・のはじめに「1936」のアイコンをクリックのが られます。

、

ベースマップね（わせのベースとなるのができます。
、、）

・ののがのできます。

りち・やられます。

が4

では々なを3D

Globe

ツール

5

とタイル

（ウェブサイ ） →オープンソース

タイル （ ータ） →オープンデータ
6

タイルのタイル（にしている）を のシス ム、サービスでいただけるよう、オープン ータとしてインターネッ からの、、のシス ム・サービスでタイルがされている。

7

とオープン○○

は、オープンソースをして。のソースも、オープンソースとしてサーバタイル。のソースをけSNSであるGitHubでシス ムファイル
HTMLJavaScript
CSS「タイル」をウェブとしてするためのプログラム“オープンソース”をhttp://leafletjs.com/
http://cesiumjs.org/

https://github.com/gsi-cyberjapan• ダウンロー してのウェブサーバにおけば、でものようなウェブができる• カスタマイズも82. ベク ルタイルにする9

のすところ〔（ウェブサイ ）タイル （ ータ）〔〕
ベク ルタイルの〕に〔タイルに〕

ベク ルタイル10

に○（→の○（）シス ムとなるウェブ。

6（→が。
Webシス ムWebシス ム」からをしたシス ムにまで、の→以 、○な）→「4のベク ルタイルをする（→（その 、するとともに、。
を。

） ベク ルタイル

・→以 、○する19・））の2 （2020をVector（）

ベク ルタイルを）にの ータを。

。

（Vector）
11

ベク ルタイルにする

26 8【、つくば】

26 10【、つくば】

26 11【、つくば】

27 6【】

()

27 8

【】

()

【】

27 8

【】

()

【】

27 8

【】

()

【】

【
（】の,

【 ・の,

27 10()（モ ル）【【,,,,【、】

】

】
（）【】

】
,の,,,の,の,,,,）

27 10

【】

（モ ル）10 メッシュ【

27 11

【】

（モ ル）5 メッシュ【

28 3

【】

【

28 3【】の29 2

【】

29 8

【】

】
】

】
（【（）【・】】
）の、、、

【】 12

タイルとベク ルタイルの い○
タイルには、しか○ ベク ルタイルには、の位を いてザインをできないため、「 る」こと以 は。のほか、もされているため、するなどのが。

タイル
（のタイル

ベク ルタイル）

ピクセルごとのRGB をータ(R,G,B) (100,100,100)(255,122,122)

しかを

ベク ルタイルっていない

コンピュータが「 る」ことしかできない

ザインの経
140.169068
140.168658

緯35.637552
35.637400

…

…

rdCtg
rnkWidth…

19.5m以…

を みのれるができる
13

タイルとベク ルタイルのベースマップの画におけるのタイルとベク ルタイルのサーバ

タイルのラスタタイルのうえタイル

みのラスタタイルのユーザPC
みみ

み

み

みの いの（）Vectorのタイルののスタイルをするファイル
ブラウザのベク ルタイル

ベクトルタイル

でのスタイルをするファイル

Vectorのサーバ

ユーザPC

14

ベク ルタイルの○ ベク ルタイルをだけを した

いれば、をひらがなにした、、3D ののも。

だけをした、ひらがな

だけ〔3DURL〕 https://github.com/gsi-cyberjapan/gsimaps-vector-stylesamples

15

ベク ルタイルのにするな○ベク ルタイルのファイルサイズ→ ベク ルタイルのファイルサイズが さいほど、ダウンロー する
ータ が○スタイル→○スタイルのさがシンプルであるほど、にるが（PC, スマー フォン ）の→のこれらのがいほど、にするを 案しながらベク ルタイルのすることががを
16

ベク ルタイルの ータフォーマッ とウェブ
ベク ルタイル（ キス••ータフォーマッライブラリ※）：GeoJSON：Leaflet

26 のからベク ルタイル（バイ リ••ータフォーマッライブラリ〔メリッ 〕• キス）のMapbox Vector Tile
においてもこのであるため、シンプルで扱いやすい。

〔 メリッ 〕•のようなファイルサイズのをにできない。

：Mapbox Vector Tile
：Mapbox GL JS
※

ライブラリ

から

きいタイル

〔メリッ 〕• GeoJSONベク ルタイルと べてファイルサイズが 10 の1であり、にできる。
〔 メリッ 〕• バイ リであるため、接できない。

がでだと えられるため、によるベク ルタイルのをを直17

タイルとベク ルタイルのファイルサイズのタイルとベク ルタイルのファイルサイズの【328,921

な】

120,000
15/29221/12439

タイル

100,000

22KB

80,000＜72KB

ベク ルタイルのサイズ

60,000ベク ルタイルタイルのサイズ

40,000タイル

20,000
00100

200

300

400500

ファイルサイズ(KB)※

タイルのZL16のタイル4 と、これにするベク ルタイルのファイルサイズを18

スタイルファイルによるのみ■ベク ルタイルのイメージ
スタイルファイルに づき、 々のスタイルレイヤをし、それをさせることによりしている。

※スタイルレイヤ が ければが くなる

・・・

・・・

※スタイルレイヤ
レイヤ を 画した

描画

19.5m以レイヤ

・・・・

スタイルレイヤ

レイヤ

・・・

このをスタイル
ファイルにJR

いほど・

スタイルレイヤJR
スタイルレイヤ

5.5m以
スタイルレイヤ13m
を み ってスタイルに

【レイヤ
※】

【レイヤやのが異なる】

19

の○ベク ルタイルをにウェブにするための→ ベク ルタイルを いたウェブ
よう、ベク ルタイルのや○による→なのな

ウェブ
がにが、なでスタイルをさらにのみのをするできるのにされ、かつ、されたのよいベク ルタイルのをす。
20

3.

Vector（）21

Vector（○「）のVector（サイ である。

）」は、としてベクトルタイルを いたウェブ

ラッグ

おすすめのよく われる
1クリックでのを・・
クリックのそのザインやせをのとのリセッののごとの／の、レイヤを。の ザインにアクセス。

、のの・

コン キス メ ュー（位 のhttps://maps.gsi.go.jp/vector/）

はクリック

を

地理院地図Vector

22Vector（○7 29 にのについて、を2 3 19 にータの囲をに。
やの きさなどの ザインをがウェブ で→の○）の。
。

■ なワンクリックで＋を示項ごとの 示／示

デザインの・示■そのな示の•
•

記
をきい

字画回の回

・示のの・でる23

Vector（○○）とオープンソース

Vectorも、Vectorのソースも、とにオープンソースをして。とにオープンソースとしてVectorサーバ
ベク ルタイル
Vectorシス ムファイル

注記の代表
点

VectorのソースをけSNSであるGitHubで地図記

HTML
JavaScript
CSS

スタイルファイル

オープンソースソフ ウェアである「
ベク ルタイルツールキッ 」
を に

https://github.com/gsi-cyberjapan

24