グローバルナビゲーションへ

本文へ

ローカルナビゲーションへ

フッターへ



トップページ >  MAPCOM WORLD TOPICS >  PC-MAPPINGでベクトルタイルを使いこなす

PC-MAPPINGでベクトルタイルを使いこなす


このエントリーをはてなブックマークに追加

【2023/1/20】

Google MapsやOpenStreetMapに代表されるように、Webを介した地図データの配信は一般的に行われるようになっています。
これらのWebGISサービスでは、効率的なデータの配信のために、タイル状に分割された地図データが利用されています。
従来は、ラスター(画像)データがWebマップ配信のスタンダードでしたが、近年ではベクター形式のデータ(ベクトルタイル)の配信が行われるようになりました。
今後も利用が広がることが想定されるベクトルタイルの特徴や、PC-MAPPINGでの利用方法についてご紹介します。

タイルデータとは?~タイル画像とベクトルタイルの比較

タイルデータについて

地図データをWebで公開する場合、あらかじめタイル状に分割したデータを配信する方式が一般的です。

ズームレベルとタイル座標

ズームレベルとタイル座標
※クリックで拡大表示されます。

タイルデータは、ズームレベルタイル座標を元に構成されます。
ズームレベルは、1枚の地図の分割数により定義されます。地球全体を1枚のタイルで表現したものをズームレベル0と定義し、ズームレベル1,2,…となるごとにタイル数は2×2=4倍になります(左図を参照)。
また、それぞれのタイル画像には、左上を原点(0,0)として(x,y)で座標が付けられており、これをタイル座標といいます。

タイルデータ配信

※クリックで拡大表示されます。

このようなルールの下で作成されたタイルデータは、サーバーからクライアントの要求に応じて配信され、クライアントの画面に表示されます。
表示処理には、JavaScriptのWebマップ用OSSライブラリ「Leaflet」が利用されることが一般的です。
タイルデータは、そのデータ構造により、一般のデータとは異なる特徴を持ちます。また、データの種類によってラスター(画像)データベクトルデータの2種類に分類することができ、それぞれにデータ作成時や公開時のメリット・デメリットが存在します。

タイル画像(ラスター)

ラスター(画像)データを元に作成されるタイルデータです。画像はピクセルの集まりからなるデータであり、解像度が上がるほど詳細な表現が可能となりますが、データ容量も増大します。そのため、スムーズな表示には工夫が必要となります。

ズームレベルと解像度

※クリックで拡大表示されます。

一般に、タイル画像はズームレベル毎に事前に作成しておくことが必要で、画面上での拡大・縮小に応じて該当するズームレベルの画像が表示されます。このとき、ズームレベルが大きい(拡大表示時)タイルであるほど高解像度の画像を作成し、ズームレベルが小さい(縮小表示時)タイルほど低解像度で作成することで、見た目への影響を最小限にしてスムーズな表示を行うことができます。

タイル画像同士は、基本的には重ね合わせをすることができません(透過設定時等を除く)。そのため、重ね合わせたいデータは事前に表示順やテキストの位置等を調整し、公開する際の見た目と同じ状態にしてタイル画像を出力する必要があります。
また、画像上のシンボルや線の太さ等のスタイルの変更はできないため、やはり事前に調整して出力することが必要です。

タイル画像生成時の処理時間は出力対象となるズームレベルやエリアによって異なりますが、一般に処理時間は長くなります
タイル画像の特徴をまとめると「データ作成に手間や時間がかかるが、作成時の工夫により効率的に表示することができる」ということができるでしょう。また、事前に調整が必要な分、多種多様なデータが見映え良く表現されていることが多いため、背景地図データとしての利用にも優れています。とりわけ航空写真タイル画像として広く利用されています。

ベクトルタイル

ベクター(点、線、面)データを元に作成されるタイルデータです。
ベクターデータは、ラスターデータとは異なり、個々の図形についての数値情報から成り立ちます。また、個々の図形はそれぞれ線色や太さ等のスタイル情報を持ちます。データ容量は、一般にラスターデータよりも小さくなります。

ベクトルタイルのイメージ

ベクトルタイルのイメージ ※クリックで拡大表示されます。
PC-MAPPINGで「国土地理院ベクトルタイル提供実験」道路中心線/鉄道中心線/河川中心線をダウンロードして表示し、ズームレベル・タイル座標を表示。
背景に「地理院地図(標準)」を透過させて表示しています。

ベクトルタイルは、データの内容にもよりますが、比較的高速に描画が可能です。しかし、作成したデータをそのまま表示するタイル画像とは異なり、クライアント側での描画処理が発生するため、スムーズな表示には一定のパフォーマンスが要求されます。
一方で、クライアント側でズームレベルに応じた柔軟な描画処理が可能なことにより、データ作成時の手間や、タイル作成処理時間等の負荷は少ないといえます。スタイルの変更も容易で、データの重ね合わせも可能であるため、利用目的に応じて多様な表現を実現できます。

タイル分割

同「道路中心線」をズームレベル18のタイル境界付近で表示。
隣接するタイルの境界で、同一IDのデータが分割されています。
※クリックで拡大表示されます。

GISにおけるベクターデータは、地物毎の形状を表し、属性情報とリンクさせることで地図と属性の統合利用が可能となります。しかし、ベクトルタイルを作成する際に、タイル境界でデータが分割されてしまうため、タイル作成後の地物単位でのデータ管理は困難です。
そのため、ベクトルタイルはあくまで表示用のデータと考えるのがよいでしょう。
以上より、ベクトルタイルは「作成時の手間が少ない分、表示時にも描画処理を伴うが、多様な表現が可能になる」という特徴を持ったデータであるといえます。タイル画像に比べてレイヤー毎の表示・非表示制御による見た目のコントロールがしやすいため、道路路線や用途地域等、主題となるデータの表現に向いています。

以下、ベクトルタイルに焦点を当ててPC-MAPPINGでの操作方法をご紹介します。
タイル画像の利用方法については、こちらの記事をご覧ください。

PC-MAPPINGでベクトルタイルデータを利用する

PC-MAPPINGでは、配信されているベクトルタイルデータを取り込み、プロジェクトに登録するレイヤーデータとして表示や解析等に利用することができます。

①「国土地理院ベクトルタイル提供実験」データの取り込み

国土地理院ベクトルタイル提供実験において提供される各種ベクトルタイルデータを、PC-MAPPINGに取り込みます。

1. [地理院地図]-[現在の表示領域のベクトルタイルデータを取得]の各メニューから、国土地理院が提供するベクトルタイルデータを取得することができます。
今回は、「道路中心線」を取り込みます。

2. メニューを実行すると、現在の表示位領域を元にダウンロード対象となるタイル数を算出します。タイル数が多く、処理の負荷が大きくなりそうなときは、表示領域を狭めて再度実行してください。
問題なければ、「はい」をクリックしてダウンロード処理を実行します。

道路中心線

3. ダウンロードが完了すると、現在のプロジェクトにレイヤーデータとして登録されます。
他のレイヤーデータと構成は同じであるため、通常通りスタイルの変更や編集等が可能です。

②GeoJSON・PBF形式ベクトルタイルの取り込み(汎用)

「国土地理院ベクトルタイル提供実験」に限らず、一般的に配信されているベクトルタイルデータをPC-MAPPINGに取り込みます。ローカルに保存されているベクトルタイルの表示にも対応しているため、作成したベクトルタイルデータの表示テスト等にも利用できます。

1. [地理院地図]-[現在の表示領域のベクトルタイルデータを取得]-[ベクトルタイル形式GeoJSONデータの取り込み]を実行します。

2. ダイアログで出力設定を行います。
配信データを取り込む場合は「ベースURL」、ローカル環境に配置したデータを取り込む場合は「(ローカル)ルートフォルダー」ラジオボタンをオンにします。
※今回は①と同様に「国土地理院ベクトルタイル提供実験」の道路中心線のベースURL(左図参照)を入力しました。
インポートするズームレベルを選択し、データタイプを「GeoJSON」とします。
「広域ベクターとして登録する」のチェックをオンにし、保存先フォルダーを指定すると、取り込んだデータを広域ベクターに登録します。

道路中心線_汎用

3. 指定したベースURLからベクトルタイルが取り寄せられ、プロジェクトのレイヤーデータとして登録されます。
①とは異なり、「国土地理院ベクトルタイル提供実験」の配信データに限定されない汎用メニューであるため、デフォルトでは道路種別によるスタイルが定義されていません。

広域ベクターにデータを登録した場合、表示領域に応じて必要なデータのみをメモリに読み出して描画するため、効率的な表示が可能となります。

「ベクトルタイルインポート」ダイアログでは、取り込むデータ形式として、GeoJSON形式(テキスト)の他に、バイナリーベクトルタイル形式(*.pbf)を選択することができます。
テキスト形式のデータに比べ容量が小さく抑えられ、高速に表示できることから、バイナリ形式のベクトルタイルが標準となりつつあります。例えば、「地理院地図Vector(仮称)提供実験」では、PBF(Mapbox)形式のバイナリーベクトルタイルが提供されています。
※本機能の利用には、GDAL(Geospatial Data Abstraction Library)のインストールが必要です。インストール方法はこちらの記事をご覧ください。

PC-MAPPINGでベクトルタイルデータを作成する

Webマップ配信に向けた機能として、PC-MAPPINGプロジェクトデータのベクトルタイルエクスポート機能をサポートしています。作成したベクトルタイルデータを配信サーバーに設置することで、タイルデータの配信が可能です。

①GeoJSON形式タイルデータへのエクスポート

PC-MAPPINGで作成、編集したベクターデータを、GeoJSON(テキスト)形式のベクトルタイルにエクスポートします。

1. [エクスポート]-[Webタイル]-[ベクトル(GeoJSON)タイル]を実行します。

2. ダイアログで出力設定を行います。
「保存先ルートフォルダー」に任意の出力フォルダーを指定し、エクスポートするズームレベルを選択します。
「点(ポイント)」「線(アーク)」「面(ポリゴン)」のうち、出力対象とする要素を選択します。
その他適宜設定を行い、「OK」ボタンをクリックします。

出力先フォルダーに、ズームレベルとタイル座標(X座標)の名称でフォルダが作成され、GeoJSONベクトルタイルデータが出力されます。
作成したベクトルタイルデータは、前項「②GeoJSON・PBF形式ベクトルタイルの取り込み(汎用)」の手順で「(ローカル)ルートフォルダー」として指定することで、PC-MAPPINGで表示を確認することができます。

②バイナリー形式ベクトルタイルのエクスポート

PC-MAPPINGで作成、編集したベクターデータを、バイナリ(*.pbf)形式のベクトルタイルにエクスポートします。
※本機能の利用にはGDALのインストールが必要です。

1. ①と同様に、 [エクスポート]-[Webタイル]-[ベクトル(GeoJSON)タイル]を実行し、ダイアログで設定を行います。
「(GeoJSONでなく)バイナリーベクトルタイル(MVT)を出力する」にチェックを入れると、出力されるデータの形式が*.pbfとなります。
その他、適宜設定し、「OK」ボタンをクリックします。

2. 出力先フォルダーに、①と同様の構成でフォルダーが作成され、PBF形式のベクトルタイルデータが出力されます。
また、ズームレベルのフォルダと同一階層にメタデータ(metadata.json)が生成されます。メタデータには、フォーマット情報等が定義されています。

ベクトルタイルデータを配信する

PC-MAPPING SWE(Smart Web Extension)は、PC-MAPPINGで作成したデータをWeb配信するためのツール群です。
サーバーサイド機能(配信用タイルデータ作成機能)及びクライアントサイド機能(Leaflet等により構成される配信データ表示機能)から構成され、Webマップ配信をトータルにサポートします。

PC-MAPPING SWE

※クリックで拡大表示されます。

配信データはあらかじめ生成しておくことも可能ですが、クライアントの要求に応じてPC-MAPPINGプロジェクトデータから都度タイルデータを作成するオンデマンド配信機能にも対応しています。
※オンデマンド配信機能を利用する場合、配信サーバーはWindows Serverであることが必要です。

詳しくはこちらのページをご覧ください。

マプコンでは、Webマップ配信を中心としたWebGISサービスの構築をサポートしています。
現在利用されているGISデータのWeb利用をご検討中の方は、ぜひお問い合わせください

↓導入事例はこちら↓
大阪府 泉佐野市 様
https://www.mapcom.tokyo/mapcomworldtopics/topics26/