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

はじめに

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

CesiumJSとは

世界クラスの3D地球儀と地図を作成するためのオープンソースのJavaScriptライブラリ
アクセストークンの取得と地球儀表示についてはこちらに記載しています。

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),
    },
});

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),
        },
    });
});

初期表示は地球義です。
「東京駅にジャンプ」ボタンを押すと・・

東京駅にジャンプしました！

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

はじめに

CesiumJSとは

OSMの建物を追加する

flyToを追加する

参考文献