Cesium 是一個用于創建地球和其他宇宙場景的JavaScript庫。它提供了一套豐富的功能和工具，可以在瀏覽器中創建交互式的地球模型。在 Cesium 中，我們可以使用<div>元素來創建和控制一些可視化的對象，如圖層、模型等。在本文中，我們將詳細介紹如何使用 Cesium 創建<div>元素，并通過幾個代碼案例來說明其用法。
，我們需要引入 Cesium 庫和所需的 CSS 文件。在 HTML 文件的<head>標簽中，通過添加以下代碼來加載 Cesium：
<code><link rel="stylesheet"/> <script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script></code>
接下來，在頁面中的<body>標簽內，我們可以創建一個<div>元素并設置其樣式和屬性。例如，我們可以使用以下代碼創建一個具有一定寬度和高度的<div>元素：
<code><div id="cesiumContainer" style="width: 800px; height: 600px;"></div></code>
在上述代碼中，我們創建了一個具有 id 為 "cesiumContainer" 的<div>元素，并設置了它的寬度為 800 像素、高度為 600 像素。接下來，我們可以在 JavaScript 中使用該<div>元素來創建 Cesium 場景。
在 JavaScript 代碼中，我們要實例化一個 Cesium.Viewer 對象。以下是創建 Viewer 對象的基本代碼：
<code>var viewer = new Cesium.Viewer('cesiumContainer');</code>在上述代碼中，我們使用了之前創建的<div>元素的 id（即 'cesiumContainer'）來實例化一個 Viewer 對象。這個 Viewer 對象代表了我們在頁面中顯示的 Cesium 場景。
接下來，我們可以使用 Viewer 對象來添加一些圖層、模型或其他可視化對象。以下是一個添加 OpenStreetMap 圖層的代碼示例：
<code>var imageryProvider = new Cesium.OpenStreetMapImageryProvider({
url: 'https://a.tile.openstreetmap.org/'
});
<br>
viewer.scene.globe.imageryLayers.addImageryProvider(imageryProvider);</code>在上述代碼中，我們實例化了一個 OpenStreetMapImageryProvider 對象，并設置其URL為 OpenStreetMap 的瓦片圖服務地址。然后，我們通過 Viewer 對象的 scene 屬性來獲取地球模型的圖層集合（imageryLayers），并通過 addImageryProvider 方法將圖層添加到場景中。
除了添加圖層，我們還可以通過 Viewer 對象添加其他可視化對象。以下是一個在地球上添加一個模型的代碼示例：
<code>var position = Cesium.Cartesian3.fromDegrees(117, 30);
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
<br>
var entity = viewer.entities.add({
position: position,
orientation: orientation,
model: {
uri: 'path/to/model.gltf'
}
});</code>在上述代碼中，我們使用 Cesium 提供的一些函數來計算模型的位置和方向。然后，我們使用 Viewer 對象的 entities 屬性來創建一個實體，并設置其位置、方向和模型的 URI。最后，我們通過 add 方法將該實體添加到場景中。
通過以上幾個代碼案例，我們簡要介紹了如何使用 Cesium 創建<div>元素并控制其中的可視化對象。通過 Cesium，我們可以在網頁中創建交互式的地球模型，并進行一系列的定制和操作。希望本文對你理解 Cesium 的<div>元素的用法有所幫助。