Cesium(セシウム）を基礎からマスターする　その2

Cesium

Posted at 2024-10-08

Cesium(セシウム）を基礎からマスターする　その1では下記のコードを紹介しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium Viewer</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = '○○○○';
        const viewer = new Cesium.Viewer("cesiumContainer");
    </script>
    </body>
</html>

今回の本題に入る前に、このコードの意味を私なりに紹介します。

最初に下記の部分ですが、

    <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

これはjavaのセシウム版をインターネットから読み込んでくださいという命令です。

次に

    <script>
        Cesium.Ion.defaultAccessToken = '○○○○';
        const viewer = new Cesium.Viewer("cesiumContainer");
    </script>

ですが、ここがJavaの記述です。トークンを覚えさせて、それに応じてviewerつまりCesiumの画面を開く命令です。

簡単に構造を紹介したところで、今回もsand castleを勉強材料にします。
https://sandcastle.cesium.com/?src=CZML%20Point%20-%20Time%20Dynamic.html&label=All

この「CZML　Point」から学んでみましょう。

今回のコードは上記URLの左に書かれているコードを引用させて頂きます。

const czml = [
  {
    id: "document",
    name: "CZML Point - Time Dynamic",
    version: "1.0",
  },
  {
    id: "point",
    availability: "2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
    position: {
      epoch: "2012-08-04T16:00:00Z",
      cartographicDegrees: [
        0, -70, 20, 150000, 100, -80, 44, 150000, 200, -90, 18, 150000, 300, -98,
        52, 150000,
      ],
    },
    point: {
      color: {
        rgba: [255, 255, 255, 128],
      },
      outlineColor: {
        rgba: [255, 0, 0, 128],
      },
      outlineWidth: 3,
      pixelSize: 15,
    },
  },
];

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));

及び

<style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>

です。

そこでその1で成功した下記のコードにどのように上記コードを挿入すれば良いのかをみてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium Viewer</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
<script>
        Cesium.Ion.defaultAccessToken = '○○○○';              
　　　　ここに挿入すれば良さそう！
        const viewer = new Cesium.Viewer("cesiumContainer");
    </script>
    </body>
</html>

関連をみると、ここに挿入すれば良さそう！と書いた所が良さそうです。
Java Scriptコードを挿入します

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium Viewer</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
<script>
        Cesium.Ion.defaultAccessToken = '○○○○';              
const czml = [
  {
    id: "document",
    name: "CZML Point - Time Dynamic",
    version: "1.0",
  },
  {
    id: "point",
    availability: "2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
    position: {
      epoch: "2012-08-04T16:00:00Z",
      cartographicDegrees: [
        0, -70, 20, 150000, 100, -80, 44, 150000, 200, -90, 18, 150000, 300, -98,
        52, 150000,
      ],
    },
    point: {
      color: {
        rgba: [255, 255, 255, 128],
      },
      outlineColor: {
        rgba: [255, 0, 0, 128],
      },
      outlineWidth: 3,
      pixelSize: 15,
    },
  },
];

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
    </script>
    </body>
</html>

このようにした後でTokenの文字列を入れて、その1と同じようにセーブして閲覧してみてください。
このようになっていれば成功です。

ちなみにこの例は、CZML形式のデータをコードの中で定義してCZMLと名前をつけてビューアーに加えています。
このCZML形式はごく簡単な記述で時刻（開始時刻からの経過時間）、経度、緯度、高度が4セット続いています。
これで何となく、Cesiumもどうにかなりそうな気分になってきたと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Cesium(セシウム）を基礎からマスターする その2

Cesium(セシウム）を基礎からマスターする　その2