Vector Tiles データセット¶

Vector Tiles データセットは Mapray JS で使用できるベクトルタイルデータを管理することができます。

ベクトルタイルデータのアップロード¶

「Datasets」ページの、「Vector Tiles」タブから、「New Vector Tiles Dataset」ボタンをクリックします。

ダイアログが表示されたら、必要事項を入力します。
入力が完了したら「OK」ボタンをクリックします。

プロパティ	説明
Name	任意の名前を指定します。1文字以上128文字以下で入力してください。
Description	任意の説明を指定します。300文字以下で入力してください。
Attribution Info	帰属情報を指定します。
File Type	ファイルフォーマットを選択します。
Layout name	レイヤー名を指定します。指定しないときは自動的に設定されます。
Zoom Level	タイルを生成するズームレベルを指定します。範囲は 0 から 20 です。最大ズームに None(Auto) を指定すると自動選択されます。
Files	File Type で指定したファイルを指定します。ドラッグ操作でディレクトリを指定するか、ドラッグ領域をクリックすることでシステムのファイル選択ダイアログから選択することができます。サポートファイル以外のファイルが含まれるとアップロードできませんので、チェックを外してください。

datasets-vt_02

アップロードに成功したら、下記のようにメッセージが表示され、リストに新しい項目が追加されます。
この例では、アップロードしたデータセットの ID は 5189879805771776 で、後述する Mapray JS の Viewer で表示する際に指定する ID となります。

Vector Tiles データセットの編集¶

「Name」、「Description」、「Attribution Info」が編集できます。
編集画面では、アップロードしたベクトルタイルデータはスタイルを指定して確認できます。

編集したい Vector Tiles データセットの編集アイコンをクリックします。
編集はコンバートが成功したときに可能です。
編集したら「Update」ボタンをクリックします。

Vector Tiles データセットの削除¶

削除したい Vector Tiles データセットの削除アイコンをクリックします。
削除はコンバートが成功、またはエラーのときに可能です。
確認ダイアログが表示されたら「OK」ボタンをクリックします。

スタイルの編集¶

ベクトルタイルデータはスタイルを指定して表示します。
スタイルの編集は編集画面の右側で表示を確認しながら行えます。
スタイルの指定方法は Mapbox Style Specification を参照してください。

スタイルの作成¶

新しいスタイルを作成するときは追加アイコンをクリックします。
編集領域にスタイルのテンプレートが表示されます。
保存していない編集中のスタイルがあるときは確認ダイアログが表示されます。

スタイルの保存¶

スタイルを保存したいときは保存アイコンをクリックします。
新規作成のとき、名前を入力して「OK」ボタンをクリックします。
拡張子「json」は自動付与されます。
名前が設定済みのとき、確認ダイアログが表示されたら「OK」ボタンをクリックします。

スタイルの選択¶

複数のスタイルを作成したとき、スタイルを選択して表示を変えることができます。

datasets-vt_10

スタイルの名前変更¶

名前変更したいスタイルを選択して、編集アイコンをクリックします。
ダイアログが表示されたら新しい名前を入力して「OK」ボタンをクリックします。

スタイルの削除¶

削除したいスタイルを選択して、編集アイコンをクリックします。
確認ダイアログが表示されたら「OK」ボタンをクリックします。

ベクトルタイルデータの表示¶

Mapray JS を使用して Mapray Cloud に保存されたベクトルタイルデータを読み込む例を示します。

  // let id = "<container id>";
  // const style_json = {<mapbox style specification>}
  // class TileJsonProviderFactory extends mapray.vectile.ProviderFactory {
  //     ...
  // }

const stdViewer = new maprayui.StandardUIViewer(id, "<token>");
  const maprayApi = new mapray.cloud.CloudApiV2({
    tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
    token: "<token>",
  });
  const style = mapray.vectile.StyleManager.create(stdViewer.viewer, style_json, new TileJsonProviderFactory( res ));
  style.promise
      .then((manager) => {
          stdViewer.viewer.setVectileManager(manager);
      } )
      .catch(() => stdViewer.viewer.setVectileManager(null) );

<token> については作成したトークンの値に変更してください。 <id> については、データアップロード時に確認したデータセット ID に変更してください。
また、 <mapbox style specification> と TileJsonProviderFactory クラスの実装については、Mapray JS の Examples と Mapbox Style Specification を参考にしてください。