はじめに

産業技術総合研究所地質調査総合センター(GSJ)は、紙で出版している「20万分の１地質図幅」をベースとして、日本全国の地質分布を閲覧できるWeb地質図「20万分の1日本シームレス地質図」を2005年に作成・公開しました。また、2017年には最新知見も含めより詳細な地質情報を反映させた改訂版（V2版）を公開しました。
このシームレス地質図はタイルでも配信されており、こちらのサイトで仕様を確認できます。
https://gbank.gsj.jp/seamless/v2/api/1.2/#tiles
この記事では、シームレス地質図をCesiumを用いて3次元的に表示させてみました。

Cesium

Cesium（セシウム）は、オープンソースとして提供される3D地理空間可視化プラットフォームです。3Dの地物や地形のデータを読み込んで、ブラウザだけでGISを実現できます。
Cesiumのチュートリアルでは「Glitch」という、ブラウザだけで開発できるサービスを使う方法が示されています。ここでもそれにならって、Glitch環境を使った方法を説明します。

コード

それでは、Glitchでコードを書いていきます。
まず、Cesiumプロジェクトのテンプレートを開きます。
テンプレートを開いたら、index.htmlを選択し、編集を行っていきます。

地質図はhttps://gbank.gsj.jp/seamless/v2/api/1.2/tiles/{z}/{y}/{x}.pngの形式で配信されているので、Cesium.UrlTemplateImageryProviderを用いて読み込みます。
地質図だけでは味気ないので、建物モデルを追加します。
以下はコード全体を示しております。

なお、可視化結果はこのように建物モデルと背景に地質図が表示されてばOKです。

図　可視化結果。背景にはシームレス地質図（地質調査総合センター）を使用し、建物モデルにはProject PLATEAUを使用した。

qiita.html

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Get your token from https://cesium.com/ion/tokens
    // A. トークンを設定
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE';
    // B. terrainProviderを設定
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: new Cesium.CesiumTerrainProvider({
          url: Cesium.IonResource.fromAssetId(770371)
      })
    }
    );
    //建物モデルの追加
    var your_3d_tiles =viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
      url : 'https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13104_shinjuku-ku/low_resolution/tileset.json'
    }));

    // 地質図の追加
    var positron = new Cesium.UrlTemplateImageryProvider({
        url : 'https://gbank.gsj.jp/seamless/v2/api/1.2/tiles/{z}/{y}/{x}.png',
        credit : '地質調査総合センター'
    });
 const currentImage = viewer.scene.imageryLayers.addImageryProvider(positron);
 // カメラの初期位置の指定
    // ②カメラのズーム
    viewer.flyTo(your_3d_tiles);
  </script>
</body>
</html>