Zenn
マップボックス・ジャパン合同会社Publicationへの投稿
🗻

ラスターMTSがリリースされました

OttyLab
2024/08/14に公開
GIS
Mapbox
geotiff
mts
tech

はじめに

以下の記事の通り、先日ラスターMTSが正式にリリースされました。
https://www.mapbox.jp/blog/platform-support-for-raster-data-enhances-weather-and-imagery-visualizations

MTSはMapbox Tiling Serviceの略で、Mapboxのサーバにデータをアップロードしてタイルセットに変換するサービスです。以前からベクターデータをサポートしていましたが、今回ラスターデータにも対応し、ラスタータイルセットの作成が可能になりました。

詳細については以下のドキュメントもご参照ください。

https://docs.mapbox.com/mapbox-tiling-service/raster/

MTSを試す

それでは、MTSを用いてベクタータイルセットおよびラスタータイルセットを作成します。ここでは簡単な観光地図を作ってみます。富士山行きのバスが発車するバス停を示すベクタータイルセットおよび富士山の画像を表示するラスタータイルセットを作成します。

なお、MTSのサンプルとして作成する地図であるため、情報の正確性を期すものではありません。

前準備

MTSのAPIを呼び出すためには特定のスコープが設定されたシークレットトークンが必要です。そこで、あらかじめ準備します。

  1. https://account.mapbox.com/access-tokens/ にアクセスし、「Create a token」ボタンをクリック
  2. 適当なToken nameを入力
  3. Public scopesのチェックをすべて外す
  4. Secret scopesのTILESETS:LIST、TILESETS:READ、TILESETS:WRITEにチェック
  5. 「Create token」ボタンをクリック
  6. 一覧画面に表示されたシークレットトークンをコピー（このタイミングでしか表示されないので確実にコピー）

以下のスクリーンショットを参考にトークンを作成してください。
token

Vector MTS

やること

バス停の位置をPointデータとして保持するベクタータイルセットを作成します。

データの準備

MTSのデータにはline-delimited GeoJSONを使用します。これはフィーチャーを一つだけ含むGeoJSONを作成し、改行コードを含まない1行の文字列にしたものです。複数のフィーチャーを表現するには、複数行記述します。具体的には以下のようなファイルになります。

bus.geojson.ld
{"type":"Feature","id":1,"properties":{"name":"JR東京駅　八重洲南口"},"geometry":{"coordinates":[139.7681965,35.6796462],"type":"Point"}}
{"type":"Feature","id":1,"properties":{"name":"バスタ新宿"},"geometry":{"coordinates":[139.7007717,35.6884839],"type":"Point"}}
{"type":"Feature","id":1,"properties":{"name":"サンシャインシティ　プリンスホテル"},"geometry":{"coordinates":[139.7197040,35.7298991],"type":"Point"}}

レシピの準備

レシピはタイルソース (後述) をどのようにタイルセットに変換するかを記述するファイルです。非常に細かい制御が可能ですが、今回は最低限の以下の項目を設定します。

recipe.json
{
  "recipe": {
    "version": 1,
    "layers": {
      "layer0": {
        "source": "mapbox://tileset-source/yochi/bus",
        "minzoom": 0,
        "maxzoom": 18
      }
   }
  },
  "name": "Bus",
  "description": "Bus stops"
}

タイルソース作成

ここからMTS APIを使用します。まずはタイルソースを作成します。タイルソースはタイルセットの元データになるものです。先程準備したline-delimited GeoJSONをPOSTでアップロードします。

環境変数$MAPBOX_USERNAMEにはご自身のMapboxアカウント名、$SECRET_MAPBOX_ACCESS_TOKENには先ほど作成したシークレットトークンを代入してください。

% TILESOURCE_ID=bus
% curl -X POST "https://api.mapbox.com/tilesets/v1/sources/$MAPBOX_USERNAME/$TILESOURCE_ID?access_token=$SECRET_MAPBOX_ACCESS_TOKEN" \
    -F file=@./bus.geojson.ld \
    --header "Content-Type: multipart/form-data"
{"id":"mapbox://tileset-source/yochi/bus","files":1,"source_size":449,"file_size":449}%

タイルソース一覧

作成済みのタイルソースを取得することができます。また、タイルソースはStudioのDatasetsとは異なる概念です。そのため、Studioでは確認することはできません。

% curl "https://api.mapbox.com/tilesets/v1/sources/$MAPBOX_USERNAME?access_token=$SECRET_MAPBOX_ACCESS_TOKEN"
[{"id":"mapbox://tileset-source/yochi/bus","size":449,"files":1}]

タイルセット作成

次にタイルセット作成を行います。ここで作成するタイルセットのIDと先ほど作成したレシピを指定します。タイルセットIDはアカウント名.任意のIDという形式が必要です。

TILESET_ID=yochi.bus
curl -X POST "https://api.mapbox.com/tilesets/v1/$TILESET_ID?access_token=$SECRET_MAPBOX_ACCESS_TOKEN" \
  -d @recipe.json \
  --header "Content-Type:application/json"
{"message":"Successfully created empty tileset yochi.bus. Publish your tileset to begin processing your data into tiles."}

この段階でStudio上でタイルセットが表示されます。ただし、以下のようにまだ使用できる状態ではありません。

before_publish

パブリッシュ

パブリッシュすることでタイルセットへの変換処理が開始され、使用できる状態になります。

% curl -X POST "https://api.mapbox.com/tilesets/v1/$TILESET_ID/publish?access_token=$SECRET_MAPBOX_ACCESS_TOKEN"
{"message":"Processing yochi.bus","jobId":"clzo5lzww000c08mm2efp6f0n"}%

進捗確認

変換処理には数分程度時間がかかります。パブリッシュ時のレスポンスに含まれていたjobIdを用いて以下のコマンドを実行することで進捗が確認できます。変換中は"stage":"processing"となります。

% JOB_ID=clzo5lzww000c08mm2efp6f0n
% curl "https://api.mapbox.com/tilesets/v1/$TILESET_ID/jobs/$JOB_ID?access_token=$SECRET_MAPBOX_ACCESS_TOKEN"
{"id":"clzo5lzww000c08mm2efp6f0n","stage":"processing","tilesetId":"yochi.bus","errors":[],"completed":null,"created":1723295440400,"created_nice":"Sat Aug 10 2024 13:10:40 GMT+0000 (Coordinated Universal Time)","published":1723295440400,"warnings":[],"filesize":449,"recipe":{"version":1,"layers":{"layer0":{"source":"mapbox://tileset-source/yochi/bus","minzoom":0,"maxzoom":18}}}}%

変換が終了すると"stage":"success"となります。

% curl "https://api.mapbox.com/tilesets/v1/$TILESET_ID/jobs/$JOB_ID?access_token=$SECRET_MAPBOX_ACCESS_TOKEN"
{"id":"clzo5lzww000c08mm2efp6f0n","stage":"success","tilesetId":"yochi.bus","errors":[],"completed":1723295543506,"created":1723295440400,"created_nice":"Sat Aug 10 2024 13:10:40 GMT+0000 (Coordinated Universal Time)","published":1723295440400,"warnings":[],"layer_stats":{以下略

完成

Studio上でも以下のようにタイルセットが確認できるようになりました。
published

Raster MTS

やること

富士山の画像を富士山のあたりに表示するラスタータイルを作成します。ラスターMTSはデータとしてGeoTIFFをサポートしているので、まずはそれを準備します。

GeoTIFFを準備する

GeoTIFFは座標情報が埋め込まれたTIFF画像です。GeoTIFFはQGISを使って作成できます。

画像の準備

いらすとやでいい感じの富士山の画像を見つけたのでこれをダウンロードして使用します。
https://www.irasutoya.com/2023/10/2024_0821222460.html

QGIS

  1. 「Browser」→「XYZ Tiles」→「OpenStreatMap」をダブルクリックし、OSMを表示
    map
  2. 「Layer」→「Georeferencer...」を選択
    georeference
  3. 開いたウィンドウで「Open Raster...」ボタンをクリックし、ダウンロードした画像を選択
    open raster
  4. 画像の読み込み完了
    opened
  5. 画像上の点をクリックし、開いたウインドウの「From Map Canvas」ボタンをクリック
    input1
  6. 地図上の点をクリック。これにより4.の画像上の点と地図上の座標が関連付け
    input2
  7. 4隅の座標を入力
    done
  8. 「Start Georeferencing」ボタンをクリックし、出力。ファイル名の入力を要求された場合は、入力後再度ボタンをクリック
    export

レシピの準備

ラスター用のレシピを作成します。本来、ラスターMTSではtilesize、bufferは不要ですが、バックエンド側の影響で指定しないとエラーが発生する状況です。改善次第アップデートします。

recipe_fuji.json
{
  "recipe": {
    "type": "raster",
    "version": 1,
    "sources": [
      {
        "uri": "mapbox://tileset-source/yochi/fuji"
      }
    ],
    "minzoom": 0,
    "maxzoom": 16,
    "layers": {
      "fuji": {
        "tilesize": 512,
        "buffer": 1
      }
    }
  },
  "name": "Mt.Fuji",
  "description": "Mt.Fuji image"
}

タイルソース作成

タイルソースの作成方法はベクターMTSと同じです。

% TILESOURCE_ID=fuji
% curl -X POST "https://api.mapbox.com/tilesets/v1/sources/$MAPBOX_USERNAME/$TILESOURCE_ID?access_token=$SECRET_MAPBOX_ACCESS_TOKEN" \
    -F file=@fuji.tiff \
    --header "Content-Type: multipart/form-data"
{"id":"mapbox://tileset-source/yochi/fuji","files":1,"source_size":1533817,"file_size":1533817}

タイルソース一覧

タイルソースの一覧取得方法もベクターMTSと同じです。今作成したfujiおよび先ほど作成したbusの両方が見えています。

curl "https://api.mapbox.com/tilesets/v1/sources/$MAPBOX_USERNAME?access_token=$SECRET_MAPBOX_ACCESS_TOKEN"
[{"id":"mapbox://tileset-source/yochi/fuji","size":1533817,"files":1},{"id":"mapbox://tileset-source/yochi/bus","size":449,"files":1}]

タイルセット作成

タイルセットの作成方法もベクターMTSと同じです。

% TILESET_ID=yochi.fuji
% curl -X POST "https://api.mapbox.com/tilesets/v1/$TILESET_ID?access_token=$SECRET_MAPBOX_ACCESS_TOKEN" \
  -d @recipe_fuji.json \
  --header "Content-Type:application/json"
{"message":"Successfully created empty tileset yochi.fuji. Publish your tileset to begin processing your data into tiles."}

パブリッシュ

パブリッシュ方法もベクターMTSと同じです。

% curl -X POST "https://api.mapbox.com/tilesets/v1/$TILESET_ID/publish?access_token=$SECRET_MAPBOX_ACCESS_TOKEN"
{"message":"Processing yochi.fuji","jobId":"clzoci774000z08l51zm1hu8u"}

完成

Studio上でも以下のようにタイルセットが確認できるようになりました。
published_fuji

使ってみる

作成したタイルセットはスタイルの中で利用できます。Studioで編集、コード上で直接ソース・レイヤーの作成のどちらでもOKです。ここでは以下のようにコードで試しました。

map.on('load', () => {
    map.addSource('bus', {
        type: 'vector',
        url: 'mapbox://yochi.bus',
    });
    map.addLayer({
        id: 'bus',
        type: 'symbol',
        source: 'bus',
        'source-layer': 'layer0',
        layout: {
            'text-field': ['get', 'name'],
            'text-anchor': 'bottom',
            'icon-image': 'parking',
            'icon-size': 2,
        }
    });

    map.addSource('fuji', {
        type: 'raster',
        url: 'mapbox://yochi.fuji',
    });
    map.addLayer({
        id: 'fuji',
        type: 'raster',
        source: 'fuji',
    });
});

実行結果は以下のようになります。

まとめ

ラスターMTSはベクターMTSと同じフローで利用できることがわかりました。

GitHubで編集を提案
マップボックス・ジャパン合同会社
マップボックス・ジャパン合同会社Publication

マップボックス・ジャパン合同会社は、地図情報サービスの開発プラットフォームにおけるリーディングカンパニーです。ユーザー企業や代理店企業との共創により、地図を活用した新たな生活体験や業務改善ソリューションを生み出すことで、社会と暮らしの進化を支えています。

Discussion