ベクトルタイルのspriteについて理解する

はじめに

ベクトルタイルのスタイルファイルには、ルート要素の一つとしてspriteが存在します。参照するURLが地図記号、線、ポリゴンの塗りなどに使う画像の場所を指定しているというのは、何となく分かるのですが、きちんと理解出来ていないので、spriteについて調べながらこの記事を書きました。スタイルファイルの全体像については、こちらの記事で記載しています。

spriteとは

Mapboxの日本語のサイト

Mapboxの日本語サイトに分かりやすい記述がありました。
「スプライトとは、スタイルに含まれるすべてのアイコンを含む1つの画像のことです。たくさんの小さな画像を1つの画像（スプライト）にまとめることで、すべての画像を取得するのに必要なリクエストの数を減らすことができ、パフォーマンスが向上し、マップの読み込みが早くなります。」とのことです。なるほど〜、そういうことだったんですね。
スプライトには、アイコンのサイズやスプライト内の位置など、スプライト内の各アイコンを定義したJSONファイルが用意されていて、以下がJSONファイルの一部です。

"airport-15": {
  "width": 42,
  "height": 42,
  "x": 76,
  "y": 300,
  "pixelRatio": 2,
  "visible": true
}

airport-15のような名前で参照すると、スプライト内にある位置「"x": 76, "y": 300」のアイコンの大きさは「"width": 42, "height": 42」、ピクセル比は2であり、スプライトの中からこのアイコンのみを表示することが出来ます。

その他日本語サイト

日本語のこちらのサイトも見てみます。大事な情報としては、以下のとおりです。

・Spriteの位置をPOIなどと関連付けるため、 sprite.json というファイルを用意する必要あり
・実際に必要な構成は以下
├── sprite.json
├── sprite.png
├── [e-mail]
└── [e-mail]
sprite.json と sprite.png がペアに、 [e-mail] と[e-mail] が高解像度のペアとなる。

MapLibreのサイト

次にMapLibreのサイト（英語）を見てみます。概要は以下のとおりです。

◯スプライトに含まれる画像は、他のスタイルプロパティ（background-pattern、fill-pattern、line-pattern、fill-extrusion-pattern、icon-image）で参照することができる。

◯スプライトを読み込むには、スプライトがロードされるURLを以下のように指定する必要がある。

"sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite"

上記URLの場合、.pngを追加して画像を、.jsonを追加してスプライトを読み込むために必要なメタデータを見ることが出来ます。pngを見てみると下のようになります。

JSONファイルは以下のリンクから見ることが出来ます。
https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite.json

◯有効なスプライトソースは、以下の2種類のファイルを提供する必要があります。

1. 画像ファイル: PNG形式
2. インデックスファイル:
   スプライトに含まれる各画像の説明を含むJSON形式のファイル。JSONオブジェクトであり、画像の大きさ（widthおよびheightプロパティ）、ピクセル比（pixelRatio）、およびスプライト内での位置（xおよびy）を記述する。

まとめ

spriteについて理解出来ていなかったので、まとめました。自分自身でspriteを作ることは難しそうですが、すでに用意されたものがあれば、使えるようになった気がします。

Reference