【Cesium】flyToで目的地までジャンプする

## はじめに
この記事は#30DayMapChallenge2022 19日目の記事です。
テーマはGlobeです。
Cesiumを使って地球義から東京駅までジャンプしてみます。

![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)に記載しています。

## OSMの建物を追加する
公式のサンプルコードを参考に、OSMの建物を表示してみます。

```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
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 100%;
}
#cesiumContainer {
    display: flex;
    width: 100%;
    height: 100%;
}
```

```main.js
// Cesium ionのアクセストークン
Cesium.Ion.defaultAccessToken = 'your_access_token';

// Cesium ViewerをcesiumContainerというIDのHTML要素に初期化
const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
});

// OpenStreetMapの建物を追加
viewer.scene.primitives.add(Cesium.createOsmBuildings());

// 初期表示時のカメラ位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(139.765, 35.66, 1000.0),
    orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-20),
    },
});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/a1d7bca4-ed80-649a-a461-b1784ed2eaf6.png)

OSMの建物を表示できました！
たった1行で追加できるのすごいですね。。

建物をクリックすると属性情報を確認することができます。


## flyToを追加する
地球儀を表示した状態で、「東京駅にジャンプ！」ボタンをクリックしたら、東京駅にジャンプする動作を追加してみます。

```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>
        <button id="fly">東京駅にジャンプ！</button>
        <script src="main.js"></script>
    </body>
</html>
```

```style.css
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 100%;
}
#cesiumContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
#fly {
    display: block;
    position: relative;
    margin: 30px auto;
    width: 15%;
    height: 50px;
    padding: 10px;
    border: none;
    border-radius: 50px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    background: #0067c0;
    cursor: pointer;
}
#fly:hover {
    transform: scale(1.1, 1.1);
}
```

```main.js
// Cesium ionのアクセストークン
Cesium.Ion.defaultAccessToken = 'your_access_token';

// Cesium ViewerをcesiumContainerというIDのHTML要素に初期化
const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
});

// OpenStreetMapの建物を追加
viewer.scene.primitives.add(Cesium.createOsmBuildings());

// 初期表示時のカメラ位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(138, 29, 25000000),
});

document.getElementById('fly').addEventListener('click', function () {
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(139.765, 35.66, 1000.0),
        orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-20),
        },
    });
});
```

初期表示は地球義です。
「東京駅にジャンプ」ボタンを押すと・・
![image](https://user-images.githubusercontent.com/83101503/202668896-6eac5d83-45d6-4c6b-9c5d-b380f4d53581.png)

東京駅にジャンプしました！
![image](https://user-images.githubusercontent.com/83101503/202668978-ed57b3b5-9eef-4842-8094-280f050dee40.png)

## 参考文献
https://cesium.com/learn/cesiumjs-sandcastle/