【Cesium】PLATEAUデータを表示する（那覇市）

## はじめに
この記事は#30DayMapChallenge2022 24日目の記事です。
テーマはFantasyです。
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)


## 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/47201_naha/low_resolution/tileset.json',
    })
);
// 初期表示時のカメラ位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(127.68991372, 26.2173744, 10000.0),
});
```

![image](https://user-images.githubusercontent.com/83101503/203814325-491136d2-6af4-403e-8783-d0aa921070fe.png)


那覇市の建物データを表示できました！
バーチャル観光ができますね～


## 参考文献
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