【CesiumJS】1. 快速开始CesiumJS 快速开始，Cesium 入门，创建账户并获取 token，CDN 引

官方 CesiumJS 教程：cesium.com/learn/cesiu…

Cesium 是一款开源 JavaScript 库，是面向网页端的 3D 地理空间可视化开发平台。
在高精度 WGS84 地球模型上进行可视化与分析。

1. 创建账户并获取 token

Cesium ion 是一款用于 3D 内容流式传输与托管的开放式平台。

免费注册一个 Cesium ion 账户，即可在应用中获取全球卫星图像和真实世界的 3D 内容。

进入 Access Tokens tab，复制 token。

2. 搭建 CesiumJS 客户端

CesiumJS 是一款开源的 JavaScript 引擎。我们将通过它来可视化从 Cesium ion 加载的内容。

注：将 your_access_token 替换为 2.1. 中获取的 token

2.1 CDN 引入

使用 Cesium 需要引入两个文件，分别是Cesium.js 和 widgets.css 。

使用 Open With Live Server 打开才可以正确运行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.135/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.135/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script type="module">
    // Your access token can be found at: https://ion.cesium.com/tokens.
    // This is the default access token from your ion account

    Cesium.Ion.defaultAccessToken = 'your_access_token';

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer');    
  </script>
 </div>
</body>
</html>

2.2 npm 安装

如果使用 Webpack、Parcel 或 Rollup 等模块打包工具构建应用，则可以通过运行以下命令安装 CesiumJS：

npm install cesium

// The URL on your server where CesiumJS's static files are hosted.
window.CESIUM_BASE_URL = '/';

import { Ion, Viewer } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";

// Your access token can be found at: https://ion.cesium.com/tokens.
// This is the default access token from your ion account
Ion.defaultAccessToken = 'your_access_token';

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer('cesiumContainer');

配置 CESIUM_BASE_URL

CesiumJS 需要一些静态文件托管在您的服务器上，例如 Web Worker 和 SVG 图标。

请将以下目录复制到项目中，并和前端项目一起部署至自己的服务器，将它们作为静态文件提供。

node_modules/cesium/Build/Cesium/Workers
node_modules/cesium/Build/Cesium/ThirdParty
node_modules/cesium/Build/Cesium/Assets
node_modules/cesium/Build/Cesium/Widgets

必须在导入 CesiumJS 之前设置全局变量 window.CESIUM_BASE_URL 。它必须指向提供这四个目录的 URL。例如将上述四个文件复制至 public 目录下，则 window.CESIUM_BASE_URL = "/" 。

在 React 的 Next 框架中使用Cesium

"use client";

// The URL on your server where CesiumJS's static files are hosted.
if (typeof window !== "undefined") {
  (window as any).CESIUM_BASE_URL = "/";
}

import { useEffect, useRef } from "react";
import {
  Ion,
  Terrain,
  Viewer,
} from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";

// Your access token can be found at: https://ion.cesium.com/tokens.
// This is the default access token from your ion account
Ion.defaultAccessToken = "your_access_token";

export default function Home() {
  const cesiumContainerRef = useRef<HTMLDivElement>(null);
  const viewerRef = useRef<Viewer | null>(null);

  useEffect(() => {
    // 确保容器存在后再初始化 Viewer
    if (!cesiumContainerRef.current) return;

    // Initialize the Cesium Viewer
    const viewer = new Viewer(cesiumContainerRef.current);

    viewerRef.current = viewer;

    // 组件卸载时销毁 viewer
    return () => {
      if (viewerRef.current) {
        viewerRef.current.destroy();
        viewerRef.current = null;
      }
    };
  }, []);

  return (
    <div ref={cesiumContainerRef} style={{ width: "100%", height: "100vh" }} />
  );
}

3. Cesium 目录结构

下载源码：cesium.com/downloads/

Apps: Cesium 示例代码和数据。
- CesiumViewer：一个简单的 Cesium 初始化示例。
- SampleData：所有示例代码所用到的数据，包括 json、geoJson、topojson、kml、czml、gltf、3dtiles 以及图片等。
- Sandcastle：Ceisum 的示例程序代码，查阅每一个示例代码，一定会有新的收获。
- TimelineDemo：时间轴示例代码。
Build：用于生产环境的包和文档。
- Cesium：打包之后的 Cesium 库（压缩）。
- CesiumUnminified：打包之后的 Cesium 库（未压缩），引用该文件可方便开发人员进行调试，找到程序异常或报错的具体代码位置。
- Documentation：打包之后的 API 文档。
packages：Cesium 源码，主要分为 engine（引擎）和 widgets（部件）。
Source：Cesium 源码的索引文件。
Specs：自动化单元测试，采用了 Jasmine 框架，可以实现接口的自动化测试以及接口覆盖率等统计效果。
ThirdParty：所依赖的第三方库，比如代码编辑器 codemirror、单元测试框架库 Jasmine、JavaScript 语法和风格的检查工具 JSHint 等。
CHANGES.md：Cesium 每个版本的变更记录。
gulpfile.js：打包脚本，记录了 Cesium 的所有打包流程，包括 GLSL 语法的转义、压缩和未压缩库文件的打包、API 文档的生成以及自动化单元测试等。
index.html：Web 首页。
server.js：Cesium 内置的 Node 服务器文件，命令 npm run start 以及 npm run start-public 实际上执行的文件。

用 VS Code 打开解压后的文件夹，打开根目录下的 index.html，右击 Open With Live Server ；或者 npm install，npm run start运行界面如下：

Cesium ion：Cesium 的数据服务平台，包含在线资源-地形(createWorldTerrain)、影像(createWorldImagery/IonImageryProvider)、OSM (createOsmBuildings)、点云 (IonResource.fromAssetId)、3DTiles 等。
Local links：Cesium 本地资源链接，文档、示例、单元测试等。
External links：Cesium 外部资源链接，社区、博客、GitHub等。

Local links 选项包含了文档和示例等，打开后和官网一样，可以使用下载的包部署一个离线版本，方便没有网络时使用。