ベクトルタイルの利点とは?
【2022.11.2】
【2023.11.13】更新
【2023.11.13】更新
WebMAPとは、Web上で利用可能なマップサービスのことです。
一般ユーザー向けにWebブラウザを通じて不特定多数の利用者に地図情報を公開をする目的で使用されています。
専用ソフトをインストールする必要がなく、手元のPCやスマートフォン、タブレット等をインターネットに繋ぐだけで、手軽に情報を見ることができる点が特徴です。
また、PC-MAPPING HTなどのデスクトップGISのように、各種データをレイヤーとして整備し、表示・非表示などの制御機能を持たせることも可能です。
一般ユーザー向けにWebブラウザを通じて不特定多数の利用者に地図情報を公開をする目的で使用されています。
専用ソフトをインストールする必要がなく、手元のPCやスマートフォン、タブレット等をインターネットに繋ぐだけで、手軽に情報を見ることができる点が特徴です。
また、PC-MAPPING HTなどのデスクトップGISのように、各種データをレイヤーとして整備し、表示・非表示などの制御機能を持たせることも可能です。
タイル配信
従来のWebGISでは、利用者からリクエストがあるたびに、該当範囲の地図データをサーバー上で切り抜いて描画する「WMS(Web Map Service)」というオンデマンド配信方式がとられていました。
ですが、リクエストのたびに画像生成を行なう必要があるこの方式では、サーバーの負荷や処理時間の点から、あらかじめタイル状に分割した画像を配信する方式がとられています。
ですが、リクエストのたびに画像生成を行なう必要があるこの方式では、サーバーの負荷や処理時間の点から、あらかじめタイル状に分割した画像を配信する方式がとられています。
タイル配信の仕組み
Leafletを利用したタイル画像の表示
このようなタイル画像はどのようにしてブラウザ上で表示されているのでしょうか。
現在インターネットで利用できるWebマップの多くは、Webブラウザで地図データを表示するためのオープンソース「JavaScriptライブラリ」のひとつであるLeafletの仕様に基づいて整備されています。
地理院地図や弊社が提供するWebマップ配信ツールPC-MAPPING SWEの基幹システムにおいてもLeafletが利用されています。
Leafletにおける地図の表示制御は、ズームレベルとタイル座標をもとに行われます。
地球全体を1枚のタイル(画像サイズは256px×256px)で表現したものをズームレベル0と定義し、ズームレベル1,2,…となるごとにサイズは2倍に、タイル画像数は4倍になります。
また、タイル画像には、左上を原点(0,0)として(x,y)で座標が付けられており、これをタイル座標といいます。
現在インターネットで利用できるWebマップの多くは、Webブラウザで地図データを表示するためのオープンソース「JavaScriptライブラリ」のひとつであるLeafletの仕様に基づいて整備されています。
地理院地図や弊社が提供するWebマップ配信ツールPC-MAPPING SWEの基幹システムにおいてもLeafletが利用されています。
Leafletにおける地図の表示制御は、ズームレベルとタイル座標をもとに行われます。
地球全体を1枚のタイル(画像サイズは256px×256px)で表現したものをズームレベル0と定義し、ズームレベル1,2,…となるごとにサイズは2倍に、タイル画像数は4倍になります。
また、タイル画像には、左上を原点(0,0)として(x,y)で座標が付けられており、これをタイル座標といいます。
ズームレベルとタイル座標
例えば、地理院地図では、x:タイル座標のX値、y:タイル座標のY値、z:ズームレベルを指定することで、地理院タイルの「標準地図」を取り寄せることができます。
このようなWebを利用したタイル画像の取り寄せは、地理院地図に限らず他のWebマップでも行うことができます。
Leafletでは、Webを利用したタイルの取り寄せだけではなく、ローカルに保存したタイル画像の表示にも対応しています。
PC-MAPPINGの[エクスポート]-[Webタイル]-[Webメルカトルタイル画像(※)]は、前景レイヤー(経緯度座標系)からLeafletの仕様に準拠した形式でズームレベル5~26まで、指定のタイル画像を生成する機能です。
(※)Webメルカトル図法
地図投影法の一種で、地球を回転楕円体ではなく真球として投影計算を行うことが特徴です。Webマップの投影法として多く用いられていることから、その名前が付けられています。
PC-MAPPINGでは、レイヤー設定における[レイヤーエキスパート] - [ようこそ] - [座標系] - [(前景時)Webメルカトル図法で描画する]にチェックを入れると、レイヤーのデータもWebメルカトル図法で描画可能です。
このようなWebを利用したタイル画像の取り寄せは、地理院地図に限らず他のWebマップでも行うことができます。
Leafletでは、Webを利用したタイルの取り寄せだけではなく、ローカルに保存したタイル画像の表示にも対応しています。
PC-MAPPINGの[エクスポート]-[Webタイル]-[Webメルカトルタイル画像(※)]は、前景レイヤー(経緯度座標系)からLeafletの仕様に準拠した形式でズームレベル5~26まで、指定のタイル画像を生成する機能です。
(※)Webメルカトル図法
地図投影法の一種で、地球を回転楕円体ではなく真球として投影計算を行うことが特徴です。Webマップの投影法として多く用いられていることから、その名前が付けられています。
PC-MAPPINGでは、レイヤー設定における[レイヤーエキスパート] - [ようこそ] - [座標系] - [(前景時)Webメルカトル図法で描画する]にチェックを入れると、レイヤーのデータもWebメルカトル図法で描画可能です。
PC-MAPPINGでのタイル表示方法
PC-MAPPINGでは、URLを指定することで地理院地図などのタイルを取り寄せて背景に表示することができます。
また、[地理院地図]-[地図種別(規定値)]から、地理院地図の「標準地図」「淡色地図」「白地図」「航空・衛星写真」を簡単に表示することもできます。
1.[地理院地図]-[タイル形式画像リンクデータ]-[タイル形式画像背景表示設定]をクリックすると、「タイル画像URL指定」ダイアログが表示されます。
また、[地理院地図]-[地図種別(規定値)]から、地理院地図の「標準地図」「淡色地図」「白地図」「航空・衛星写真」を簡単に表示することもできます。
1.[地理院地図]-[タイル形式画像リンクデータ]-[タイル形式画像背景表示設定]をクリックすると、「タイル画像URL指定」ダイアログが表示されます。
2.「地理院地図等 ラスタータイル一覧」ボタンをクリックすると、ダイアログボックスが開き、地理院タイル等のタイル取り寄せURL一覧が表示されます。
ここでは、地理院タイルの標準地図を選択します。
ここでは、地理院タイルの標準地図を選択します。
3.一覧から該当するタイルを選択すると、元のダイアログに戻ります。選択したタイルのURLやズームレベルなどの情報が入力されていることが確認できます。
必要に応じて適宜変更して「追加」をクリックすると、選択したURLが「登録されたURL」リストに追加されます。
必要に応じて適宜変更して「追加」をクリックすると、選択したURLが「登録されたURL」リストに追加されます。
4.「OK」をクリックすると、選択したタイルが背景に表示されます。
ベクトルタイルの仕組みとPC-MAPPINGでの利用方法
Webマップで配信されるタイルには、
ラスター形式とベクトル形式の2種類が存在します。
ラスター形式とベクトル形式の2種類が存在します。
■タイル画像(ラスター)
タイル画像(ラスター)は、小さな点(ピクセル)の集まりで地図を表現しています。
ピクセルごとに色情報を持っているため、グラデーション、影などの微妙な色の変化も表現できます。
その反面、解像度が上がれば上がるほど、ピクセルの数も増えていくのでデータ容量も大きくなります。
地図を表示するためには、必要な範囲のタイル画像を用意しておく必要があります。
ピクセルごとに色情報を持っているため、グラデーション、影などの微妙な色の変化も表現できます。
その反面、解像度が上がれば上がるほど、ピクセルの数も増えていくのでデータ容量も大きくなります。
地図を表示するためには、必要な範囲のタイル画像を用意しておく必要があります。
■ベクトルタイル
ベクトルタイルは、数値化された点、線、面の情報(ベクター)や、色などの描画にまつわる情報をもとに、地図を表現しています。
スタイルが変わっても数値の変更があるだけなので、同じ範囲で比べるとタイル画像よりもデータ容量が小さいです。
読み込み速度は比較的高速ですが、サーバーから受け取ったベクターデータをクライアント側で分析し描画するため、描画速度はデータ量に依存します。また、スムーズな描画にはクライアント側の負荷を要します。
ベクトルタイルを生成する際には、ベクターデータをそのままタイルにするだけなので、短時間で作成することができます。
ベクトルタイルの最大のメリットは、描画スタイルの変更やデータの重ね合わせなどといったデータの調整が容易に行なえるため、利用目的に応じて様々なスタイルの地図を作成できることです。しかし、1つのタイルに多くの情報を載せると、その分描画に時間がかかってしまうため、一部のデータしか必要のない利用者にとっては負荷になってしまうこともあります。
スタイルが変わっても数値の変更があるだけなので、同じ範囲で比べるとタイル画像よりもデータ容量が小さいです。
読み込み速度は比較的高速ですが、サーバーから受け取ったベクターデータをクライアント側で分析し描画するため、描画速度はデータ量に依存します。また、スムーズな描画にはクライアント側の負荷を要します。
ベクトルタイルを生成する際には、ベクターデータをそのままタイルにするだけなので、短時間で作成することができます。
ベクトルタイルの最大のメリットは、描画スタイルの変更やデータの重ね合わせなどといったデータの調整が容易に行なえるため、利用目的に応じて様々なスタイルの地図を作成できることです。しかし、1つのタイルに多くの情報を載せると、その分描画に時間がかかってしまうため、一部のデータしか必要のない利用者にとっては負荷になってしまうこともあります。
ベクトルタイルの配信について
国土地理院では、ベクトルタイルをGeoJSON形式(*. geojson)のファイル群として、地理院タイル(ラスター)と同じくタイル分割の方式で配信しています。
GitHub [地図情報(道路中心線)]
x:タイル座標のX値、y:タイル座標のY値、z:ズームレベルを指定することで、ベクトルタイルの「地図情報(道路中心線)」を取り寄せることができます。
2014年8月に開始された国土地理院ベクトルタイル提供実験では GeoJSON 形式のベクトルタイルが配信されていましたが、2019年7月に新たに開始された地理院地図Vector(仮称)提供実験では、タイルに分割したVector tile specification形式(*.pbf)のファイル群で配信されるようになりました。
GitHub [地図情報(道路中心線)]
x:タイル座標のX値、y:タイル座標のY値、z:ズームレベルを指定することで、ベクトルタイルの「地図情報(道路中心線)」を取り寄せることができます。
2014年8月に開始された国土地理院ベクトルタイル提供実験では GeoJSON 形式のベクトルタイルが配信されていましたが、2019年7月に新たに開始された地理院地図Vector(仮称)提供実験では、タイルに分割したVector tile specification形式(*.pbf)のファイル群で配信されるようになりました。
PC-MAPPINGでのバイナリーベクトルタイル表示方法
PC-MAPPINGではGDALをインストールすることで、GeoJSON形式のベクトルタイルだけでなく、
Vector tile specification形式(*.pbf)のバイナリーベクトルタイルのファイルのエクスポートに対応しています。
Vector tile specification形式(*.pbf)のバイナリーベクトルタイルのファイルのエクスポートに対応しています。
事前準備
1.GDALのインストール
GISInternals Support SiteからGDALのモジュールを取り込みます。
ダウンロードページからgdal-3.8.4-1930-x64-core.msiをダウンロードして実行します。(2024年3月15日現在)
GISInternals Support SiteからGDALのモジュールを取り込みます。
ダウンロードページからgdal-3.8.4-1930-x64-core.msiをダウンロードして実行します。(2024年3月15日現在)
2.PC-MAPPINGの設定
pcm.iniに、以下を入力します。
[GDAL]
Root=C:\Program Files\GDAL
(GDALのインストールフォルダを指定)
この設定により、GDALのインストールが行われると、[エクスポート]-[Webタイル]-[GeoJSON」に、「(GeoJSONではなく)バイナリーベクトルタイル(MVT)を出力する」チェックが表示されます。
チェックがONの場合、ダイアログで指定したフォルダに、バイナリーベクトルタイルファイル(*.pbf)が生成されます。
pcm.iniに、以下を入力します。
[GDAL]
Root=C:\Program Files\GDAL
(GDALのインストールフォルダを指定)
この設定により、GDALのインストールが行われると、[エクスポート]-[Webタイル]-[GeoJSON」に、「(GeoJSONではなく)バイナリーベクトルタイル(MVT)を出力する」チェックが表示されます。
チェックがONの場合、ダイアログで指定したフォルダに、バイナリーベクトルタイルファイル(*.pbf)が生成されます。
バイナリーベクトルタイルを表示する
[地理院地図]-[現在の表示領域のベクトルタイルデータを取得]-[汎用(一般)]から、「ベクトルタイルインポート」ダイアログが表示します。
「ベースURL」のラジオボタンから取り寄せたいタイルデータのURLを入力します。
「データタイプ」のプルダウンで「バイナリーベクトルタイル(.pbf)」を選択し、その他を設定して【OK】をクリックすると、バイナリーベクトルタイルが取り込まれます。
なお、ダイアログ内の「広域ベクターとして登録する」にチェックを入れると、レイヤーではなく広域ベクター(※)として表示されます。
(※)広域ベクターに登録することで、現在表示されている領域のタイルのみをメモリに読み込み、表示することができます。これによって、表示スピードの向上と有効なメモリの利用を行なえます。
「ベースURL」のラジオボタンから取り寄せたいタイルデータのURLを入力します。
「データタイプ」のプルダウンで「バイナリーベクトルタイル(.pbf)」を選択し、その他を設定して【OK】をクリックすると、バイナリーベクトルタイルが取り込まれます。
なお、ダイアログ内の「広域ベクターとして登録する」にチェックを入れると、レイヤーではなく広域ベクター(※)として表示されます。
(※)広域ベクターに登録することで、現在表示されている領域のタイルのみをメモリに読み込み、表示することができます。これによって、表示スピードの向上と有効なメモリの利用を行なえます。
取り込んだ画像は以下になります。
PC-MAPPINGでは[プロジェクトエキスパート]-[描画パラメーター]パネルの設定による描画の切り替えができます。
PC-MAPPINGでは[プロジェクトエキスパート]-[描画パラメーター]パネルの設定による描画の切り替えができます。
今回は、近年普及が進んでいるベクトルタイルの仕組みとPC-MAPPINGで利用する方法をご紹介しました。