【Cesium】PLATEAUデータを表示する

## はじめに
この記事は#30DayMapChallenge2022 20日目の記事です。
テーマはMy favourite...です。
Cesiumを使ってお気に入りの街（横浜市）のPLATEAUの建物データを表示してみます。

![image](https://raw.githubusercontent.com/tjukanovt/30DayMapChallenge/main/images/flyers/30dmc-2022.png)

https://30daymapchallenge.com/

## CesiumJSとは
世界クラスの3D地球儀と地図を作成するためのオープンソースのJavaScriptライブラリ
アクセストークンの取得と地球儀表示については[こちら](https://qiita.com/asahina820/items/e575b843cdf76c0cfcfa)に記載しています。

## PLATEAUとは
国土交通省が主導する3D都市モデル整備・活用・オープンデータ化プロジェクトです。
3D都市モデルには、家屋やビルなどの「建築物」、都市計画区域などの「都市計画決定情報」、土地の用途を示した「土地利用」、都市のインフラである「道路」や「橋梁」など、都市に関するデータが格納されています。

## PLATEAUデータについて
### データ形式
PLATEAUデータには、様々なデータ形式があります。
例えば、CityGML、3D Tiles、MVT、ファイルジオデータベース、OBJ、FBXなどなど。。
今回はCesiumを使うので、Cesiumで表示できる「3D Tiles」を採用します。

### データの取得
データは[G空間情報センター](https://www.geospatial.jp/)からダウンロード可能です。
また、PLATEAU公式が[PLATEAU配信サービス（試験運用）](https://github.com/Project-PLATEAU/plateau-streaming-tutorial)で3D Tilesを配信しています。
データのダウンロードが不要になるので、今回は配信サービスを利用します。

### LOD
LOD（Level of Detail）とは、3D都市モデルに含まれている地物の詳細度です。
建築物はLOD0からLOD4までが定義されています。

![image](https://www.mlit.go.jp/plateau/uploads/2022/11/about_citygml_02.png)
画像の出典：[国土交通省 Project PLATEAU](https://www.mlit.go.jp/plateau/learning/tpc01-2/#p1_3_2)

2020年度の横浜市のデータでは、以下となっていました。
>LOD1作成範囲　市内全域（435.71k㎡）
LOD2作成範囲　ユースケース実証エリアを含むみなとみらい21地区（2.2k㎡）

## PLATEAUデータを表示する
[PLATEAU公式のサンプルコード](https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/3d-tiles/plateau-3dtiles-streaming.md)を参考に、横浜市のPLATEAUデータを表示してみます。

```index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>サンプル</title>
        <link href="style.css" rel="stylesheet" />
        <!-- Include the CesiumJS JavaScript and CSS files -->
        <script src="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js"></script>
        <link href="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    </head>
    <body>
        <div id="cesiumContainer"></div>
        <script src="main.js"></script>
    </body>
</html>
```

```style.css
#cesiumContainer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    font-family: sans-serif;
}
html {
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 100%;
}
```

```main.js
// Cesium ionのアクセストークン（公式に記載があったものを使用しています）
Cesium.Ion.defaultAccessToken = Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE';
// Cesium ViewerをcesiumContainerというIDのHTML要素に初期化
// Terrainの指定（EGM96、国土数値情報5m標高から生成した全国の地形モデル、5m標高データが無い場所は10m標高で補完している）
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: new Cesium.CesiumTerrainProvider({
        url: Cesium.IonResource.fromAssetId(770371),
    }),
});

// PLATEAU-Orthoの参照
var imageProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://gic-plateau.s3.ap-northeast-1.amazonaws.com/2020/ortho/tiles/{z}/{x}/{y}.png',
    maximumLevel: 19,
});
var current_image = viewer.scene.imageryLayers.addImageryProvider(imageProvider);

// 神奈川県横浜市の建物データ（3D Tiles）
var your_3d_tiles = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: 'https://plateau.geospatial.jp/main/data/3d-tiles/bldg/14100_yokohama/low_resolution/tileset.json',
    })
);
// 初期表示時のカメラ位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(139.63148565, 35.4545858, 10000.0),
});
```

![image](https://user-images.githubusercontent.com/83101503/202889320-384feff1-41e1-4ed5-b88b-c7df023b0d44.png)

横浜市の建物データを表示できました！

![image](https://user-images.githubusercontent.com/83101503/202889544-37237614-9c7e-4829-bda0-1d775acec5a4.png)

みなとみらいはLOD2対象範囲なので、屋根の形状がはっきり分かりますね。
テクスチャも張られていて、よりリアルな建物に近いです・・！

周辺の~~豆腐みたいな~~建物はLOD1です。

まさにデジタルツイン・・！
PLATEAUデータを活用して何か作ってみたくなります。

## 参考文献
https://www.mlit.go.jp/plateau/learning/tpc01-1/

https://www.mlit.go.jp/plateau/learning/tpc01-2/#p1_3_2

https://www.geospatial.jp/ckan/dataset/plateau-14100-yokohama-city-2020

https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/3d-tiles/plateau-3dtiles-streaming.md