ベクタータイルとは何か、なぜ気にする必要があるのか

2019年02月07日発行 更新日:2022年2月14日

ベクトルタイルとは何か、なぜ気にするのか イメージ

ベクタータイルは新しいトレンドになりつつあり、地図出版の未来を担う可能性が高いです。どのような技術が使われているのか、また、どのようにして今日から応用できるのか。

ラスタータイル、ベクタータイル、その違いとは

ラスタータイルの説明

従来、ウェブマップはラスタータイルの技術をベースにしていました。それは、隣り合わせに配置された四角い画像のセットで、それぞれが固定された地理的エリアとスケールを持っていました。それらを合わせて全世界を作成していましたが、実際に閲覧しているタイルだけが表示されていました。残りは、位置やズームを変えたときにブラウザに配信されていました。

ラスタータイルについての詳細なガイドは、このドキュメントにあります。

地図をラスタータイルに分割したもの

地図をラスタータイルに分割したもの

ベクトルタイルの説明

後に登場したベクタータイルも、ほぼ正方形のタイル状に分割されたデータを配信します。しかし、ラスター画像ではなく、要求された領域にあらかじめ生成されたベクターデータが存在します。タイルからはみ出した地図要素は、特定のオフセットでカットされるので、タイル同士をつなげる際には欠かせません。

ベクタータイルは、クライアント側でレンダリングされます。マップスタイルは、タイル内のすべての要素の外観を定義します。スタイルには、どのマップ要素をどの色でレンダリングするか、ラベルにどのフォントを使用するか、ラベルをどの言語でレンダリングするかなどが記述されています。これにより、最小限の労力でマップを即座に変更する機会が増えます。

ベクタータイルは、ベクター形式の地理データを正方形のタイルに分割してパックした形でウェブ上に転送されます。

この柔軟性と、必要に応じて事前に生成されたベクタータイルからラスタータイルをレンダリングすることができるため、地図業界の大手企業のほとんどがすでに切り替えています。

ベクトルタイルとラスタータイルの比較

ベクトルタイル

Pros:
  • データサイズが小さいため、必要なディスク容量が少ない
  • 低い帯域幅の消費
  • 生成時間の短縮
  • ユーザーエクスペリエンスの向上 - スムーズなズーミング
  • 表示されないズームレベル - ユーザーはすべてのスケールでズームやパンを行うことができます。
  • デファクト・モバイル・スタンダード
  • 簡単なカスタマイズ - 1つの小さなテキストファイルを使って、マップの外観、使用するフォント、マップラベルの言語を定義し、特定のマップ要素を隠すこともでき、すべてがオンザフライです。
Cons:
  • マップのレンダリングはクライアント側で行われるため、もう少し強力なハードウェアが必要です
  • Data は一般的なものなので、直接編集するのには適していません。

ラスタータイル

Pros:
  • 衛星画像や航空写真などのラスターデータに適しています。
  • エンドユーザーのハードウェアへの要求が低い
  • WebのJavaScriptライブラリやデスクトップのGISソフトウェアのサポートがまだ少し充実しています。
Cons:
  • 各タイルのサイズが大きくなり、サーバー上のデータも大きくなりました。
  • 生成に時間がかかる
  • 読み込みが遅くなると、地図上を移動する際にユーザーエクスペリエンスが損なわれる

ラスタータイルとベクタータイルを混在させ、双方を有効に活用することも可能です。例えば、衛星地図(ラスタータイル)に、多言語のラベルが付いた道路(ベクタータイル)を重ねることができます。

韓国語表記のあるヨーロッパの衛星地図

韓国語のラベルが付いたヨーロッパの衛星地図 - 同じタイルを他の言語で使用することができます - タイルを再度レンダリングする必要はありません。必要なのは、スタイルのわずかな変更、つまりテキストファイルの1行の変更だけです。この変更は、ドロップダウンメニューからその場で行うこともできます。ご自身で確かめてみてください

独自のベクトルタイルを生成

ベクター形式のデータがあれば、MapTilerDesktop を使って、そのデータからベクタータイルを素早く生成することができます。この機能はバージョン 10 以降で利用可能です。

Shapefile、GeoJSON、またはその他のベクターフォーマットのデータを MapTilerDesktop にドラッグ&ドロップし、必要に応じて最終的なマップのプロパティを調整し、出力フォーマットを選択します。マップは、MBTiles、GeoPackage、または Folder 構造で作成できます。このハウツーではすべてのプロセスを説明します。

ニューヨークの地下鉄の駅路線のサンプルデータで試すことができます。

MapTilerDesktop 10 のベクターデータを使った

サポートされているWebフロントエンドライブラリとモバイルSDK

ベクトルタイルは比較的目新しいものですが、すでに多くのJavaScriptライブラリでサポートされています。

  • MapLibre GL JS
  • OpenLayersのベクタータイルプラグイン
  • リーフレットGL

Mobile SDKは、iOSとAndroidの両方でベクタータイルの読み込みをサポートしています。ベクトルタイルは、QGIS や ArcGIS などのデスクトップ GIS ソフトウェアで読み込むことができます。対応アプリケーションの一覧はこちらの記事をご覧ください。

ベクターでのマップ

maps APIを利用したウェブおよびモバイルアプリ用の無料ベクタータイル

maps API によるベクトルタイルの利用開始 MapTilerCloud は、ベクタータイル技術を採用し、ベクタータイルのホスティングを提供しています。

Dalibor Janak

シニアプロダクトマネージャー&テックリード
掲載日:2019年02月07日

Découvrez MapTiler en français!

Visitez maptiler.fr

Přečtěte si více v češtině

Více na maptiler.cz

Leer más en español

Visite maptiler.es

Meer in het Nederlands

Ga naar maptiler.nl

日本語で詳細をみる

maptiler.jp へ

Weitere Informationen finden Sie

auf MapTiler.de

ديزملا فشتكإ

maptiler.ae ىلإ ىقتنا

MapTilerをスイスで探す

MapTiler.chを見る