1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

PR: MIERUNE
MIERUNEとカジュアルにお話ししませんか？ MIERUNE CHAT受付中！
About Promotions
@nokonoko_1203(のこのこ)
in

CesiumでMVTを表示しよう！（2026年版）

1
Last updated at Posted at 2026-09-07

image.png

みなさんこんにちは！！！！！

Cesium、いいですよね！！！

CesiumJSは、ブラウザ上に地球儀や地図を描画し、さまざまな位置情報データを重ねられるJavaScriptライブラリです。地形や建物を使ったリッチな3D表示が魅力ですが、GeoJSONなどのベクターデータや2D表示にも対応しています。

そんなCesiumで、2DのWeb地図に使っているMVT（Mapbox Vector Tiles）も、そのまま地球儀に載せたくなることがありますよね。

これまでも、そのための選択肢としてreearth/cesium-mvt-imagery-providerなどの外部ライブラリがありました。MVTをブラウザ内でCanvasに描画して画像にし、CesiumのImageryLayerとして地球儀に貼り付ける仕組みです。

大変便利なライブラリですが、WebGISを作る際には、いくつか気にしておきたい点があります。

  • 描画済みの画像を大きく拡大すると、画像の解像度によっては線や輪郭がぼやける
  • スタイルや地物選択には、ライブラリが用意するAPIやImageryProvider側の仕組みを使う
  • CesiumJS本体の更新時には、外部ライブラリとの互換性も確認する必要がある

たとえば、上記ライブラリには色などを指定するstyleや、地物を選択したときのonSelectFeatureがあります。選択や属性の参照はできますが、3D Tilesの地物を扱うAPIとは異なります。

そんな中、なんとCesiumJS本体にMVTDataProviderが追加されていました！！！！！

追加されたのは、2026年6月1日公開のCesiumJS 1.142。Cesium Releases in June 2026で、新機能の一つとして紹介されています。

MVTDataProviderは、MVTをブラウザで読み込み、実行時に3D Tilesへ変換して描画するようです。Cesium3DTileStyleによる属性に応じた色分けや、Scene.pickとgetPropertyによる地物の選択・属性取得にも対応しています。
（詳しくは公式チュートリアルを参照）

配信しているMVTを、Cesiumの3D Tiles向けの仕組みで扱えるようになったわけです。これは触ってみたい！！！

背景には、点・線・ポリゴンのベクターデータを3D Tilesで配信・表示する、CesiumのVector 3D Tilesの取り組みがあります。現在のプレビューでは、3D Tiles 1.1に3DTILES_content_gltf_vectorという3D Tiles拡張や、EXT_mesh_polygonなどのglTF拡張を組み合わせています。MVTDataProviderも、このベクター描画の基盤を既存のMVTから利用するための入口の一つです。
（仕様と開発方針の説明）

2026年9月2日には、Cesium ionでのタイル化から各エンジンでの表示までを含むVector Tiles Technology Previewの公開が発表されました。将来の3D Tiles 2.0に向けた開発も進んでいますが、今回はMVTを読み込むところに絞って試してみます。

Cesiumのベクターデータ対応のロードマップ

出典：Help Shape Vector Data Support in 3D Tiles。2026年6月29日時点のロードマップ。

なお、MVTDataProviderは現時点ではExperimentalなAPIです。常に変更される可能性があるため、この記事ではCesiumJS 1.145に固定して確認します。

ということで今回は、PLATEAUが公開しているMVTを、Cesiumに読み込んでみます！ データを引っ張ってきて、地球儀に表示するところまでやっていきましょう！！！

まずは表示してみる

今回読み込むのは、PLATEAUが公開している千代田区の道路モデル（LOD1・2025年度）のMVTです。Cesiumの標準Viewerに追加すると、こんな感じになります。

image.png

公開されているMVTが、そのままCesiumに載りました！！！ 青い面がMVT、背景は地理院タイルの淡色地図です。

PLATEAUのMVTを使ってみる

PLATEAU配信サービスでは、3D Tilesに加えてMVTも公開しています。自治体コード・地物の種類・年度を指定して、MVTのURLなどを記載したTileJSONを取得できます。

千代田区の道路モデルを指定するURLはこちらです。

https://api.plateauview.mlit.go.jp/datacatalog/mvt/13101-tran-lod1-2025/tilejson.json

13101が千代田区、tranが道路、lod1がLOD1、2025が整備年度です。新しい年度へ追従するlatestも用意されていますが、この記事では2025年度を指定します。
（PLATEAUの公開TileJSONの説明）

注意点として、配信サービスは試験運用のため、固定年度のURLでも配信内容や提供状況が変わる可能性がある事を考慮する必要があります。
（配信サービスの案内）

実装内容

CesiumJS 1.145を使い、背景地図に地理院タイルを指定します。Cesium ionのアカウントやトークンは使いません。ライブラリ・背景地図・MVTは外部から取得するため、インターネット接続は必要です。

次の内容をindex.htmlとして保存します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>PLATEAUのMVTをCesiumで読む</title>
    <link rel="icon" href="data:," />
    <link
      rel="stylesheet"
      href="https://cesium.com/downloads/cesiumjs/releases/1.145/Build/Cesium/Widgets/widgets.css"
    />
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.145/Build/Cesium/Cesium.js"></script>
    <script type="module">
      const viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: false,
        geocoder: false,
        baseLayer: new Cesium.ImageryLayer(
          new Cesium.UrlTemplateImageryProvider({
            url: "https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png",
            minimumLevel: 2,
            maximumLevel: 18,
            rectangle: Cesium.Rectangle.fromDegrees(122, 20, 154, 46),
          }),
        ),
      });

      const tileJson = await fetch(
        "https://api.plateauview.mlit.go.jp/datacatalog/mvt/13101-tran-lod1-2025/tilejson.json",
      ).then((response) => {
        if (!response.ok) throw new Error(`TileJSON: HTTP ${response.status}`);
        return response.json();
      });
      const provider = await Cesium.MVTDataProvider.fromUrl(tileJson.tiles[0], {
        minZoom: 15,
        maxZoom: tileJson.maxzoom,
        extent: Cesium.Rectangle.fromDegrees(139.72, 35.67, 139.79, 35.71),
      });
      viewer.scene.primitives.add(provider);
      provider.tileset.style = new Cesium.Cesium3DTileStyle({
        color: "color('#3b82a0', 0.55)",
      });
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(139.755, 35.688, 6500),
      });
    </script>
  </body>
</html>

保存したHTMLをローカルのHTTPサーバーで配信して開きます。ここではNode.jsを使います。

index.htmlと同じフォルダーに、次のpreview.mjsを保存します。

import { createServer } from "node:http";
import { readFileSync } from "node:fs";

const html = readFileSync(new URL("./index.html", import.meta.url));
createServer((request, response) => {
  response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
  response.end(html);
}).listen(8000, "127.0.0.1", () => {
  console.log("http://127.0.0.1:8000/");
});

そのフォルダーで次のコマンドを実行します。起動例はNode.js 24系で動作確認しました。

node preview.mjs

http://127.0.0.1:8000/をブラウザで開くと、冒頭の地図が表示されます！

MVTを読み込む

上のHTMLから、読み込み部分を抜き出してみます。

const provider = await Cesium.MVTDataProvider.fromUrl(tileJson.tiles[0], {
  minZoom: 15,
  maxZoom: tileJson.maxzoom,
  extent: Cesium.Rectangle.fromDegrees(139.72, 35.67, 139.79, 35.71),
});
viewer.scene.primitives.add(provider);
provider.tileset.style = new Cesium.Cesium3DTileStyle({
  color: "color('#3b82a0', 0.55)",
});

TileJSONからMVTのURLを取り出して利用しています。読み込んだMVTは、ブラウザ内で3D Tilesに変換されているようで、3D Tilesと同様のスタイルを利用できます。
（Cesium公式の読み込み例）

青色はCesium3DTileStyleで指定しています。ここでは道路の形がわかるよう、全体を同じ色にしています。

もちろん、通常のCesiumの操作ができるので、ドラッグで移動し、マウスホイールで拡大・縮小できます。中央ボタンのドラッグなどで視点を傾けると、地球儀の上にMVTが載っている様子がわかりますし、地物をクリックすると属性情報も閲覧できます！

image.png

おわりに

公開されているMVTのURLを取得してMVTDataProviderに渡すだけで、Cesiumの地球儀に表示できました！ MVTを使っているWeb地図から、Cesiumでの表示も試しやすくなりましたねー！！！

今回は読み込みと表示までですが、同じ描画の仕組みでスタイル変更なども扱えます。

ただ、まぁやはり懸念点としては地形を表示し、DepthTestを有効化するとMVTが隠れちゃう事でしょうか…

image.png

この辺りの対策として、前述のVector 3D Tilesが良い回答になるかなという気がしているので、その辺りも記事にまとめようかと思います！

皆さんも、手元のMVTで試してみてください！！！

※追記
普通に3D Tilesと同じ扱いなので地形にクランプできそうです。
https://cesium.com/learn/cesiumjs-learn/load-mapbox-vector-tiles-in-cesiumjs/#optional-drape-mvt-onto-terrain-and-3d-tiles

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?