Step 1 创建账号和获取令牌

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

注册免费的 Cesium ion 帐户即可为您的应用获取全球卫星图像和真实的 3D 内容。

登录后：

1 转到您的访问令牌选项卡。

2 请注意默认令牌旁边的复制按钮。我们将在下一步中使用此令牌。访问由Cesium Ion发布的官方服务和自己创建的服务（Asset）都需要令牌。

Step2 设置CesiumJS客户端

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

本指南涵盖了两种设置 CesiumJS 的方法：

从 CDN 导入
使用 NPM 安装，NPM安装根据使用打包工具不同也可以分为两种： 1）webpack加载和2）Vite加载

1 从 CDN 导入

下面是一个完整的 HTML 页面，它将加载所需的 JavaScript 和 CSS 文件并初始化旧金山的场景。如果您没有开发环境，您可以创建一个包含此 HTML 的文件并在浏览器中查看它。

xml 复制代码

<!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.118/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/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 = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZDNiMDU1Yi0zNTM0LTQ3ZGEtYTYwNy03NjExYjY5NGVjNTYiLCJpZCI6MTA1NDE2LCJpYXQiOjE2NjEwODc2Mzl9.Tb0oUIPl1DsCS6BQDDvhTeImZI8PQDb1g3hX62SopF0';

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    });    

    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-15.0),
      }
    });

    // Add Cesium OSM Buildings, a global 3D buildings layer.
    const buildingTileset = await Cesium.createOsmBuildingsAsync();
    viewer.scene.primitives.add(buildingTileset);   
  </script>
 </div>
</body>
</html>

使用上面的代码需要确保能访问到 cesium.com/downloads/c...，

cesium.com/downloads/c...

如果访问不到需要通过方法下载下来，在引用，代码如下：

xml 复制代码

<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
-->
<!-- 下载到本地引用 -->
<script src="Cesium.js"></script>
<link href="widgets.css" rel="stylesheet">

2 使用 NPM 安装

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

复制代码

npm install cesium

下面的代码加载所需的 JavaScript 和 CSS 文件。为方便起见，我们在下面的代码片段中包含了您帐户的默认访问令牌。

javascript 复制代码

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

import { Cartesian3, createOsmBuildingsAsync, Ion, Math as CesiumMath, 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 = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZDNiMDU1Yi0zNTM0LTQ3ZGEtYTYwNy03NjExYjY5NGVjNTYiLCJpZCI6MTA1NDE2LCJpYXQiOjE2NjEwODc2Mzl9.Tb0oUIPl1DsCS6BQDDvhTeImZI8PQDb1g3hX62SopF0';

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer('cesiumContainer', {
  terrain: Terrain.fromWorldTerrain(),
});    

// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
  orientation: {
    heading: CesiumMath.toRadians(0.0),
    pitch: CesiumMath.toRadians(-15.0),
  }
});

// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = await createOsmBuildingsAsync();
viewer.scene.primitives.add(buildingTileset);

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

使用webpack导入cesium需要webpack.config.js将Cesium的Assets，Widgets, Worker, ThirdParty复制到静态目录，详情可参考Cesium Webpack Example。

csharp 复制代码

# webpack.config.js
const cesiumSource = "node_modules/cesium/Build/Cesium";
// this is the base url for static files that CesiumJS needs to load
// Not required but if it's set remember to update CESIUM_BASE_URL as shown below
const cesiumBaseUrl = "cesiumStatic";

....
plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
    // Copy Cesium Assets, Widgets, and Workers to a static directory
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.join(cesiumSource, "Workers"),
          to: `${cesiumBaseUrl}/Workers`,
        },
        {
          from: path.join(cesiumSource, "ThirdParty"),
          to: `${cesiumBaseUrl}/ThirdParty`,
        },
        {
          from: path.join(cesiumSource, "Assets"),
          to: `${cesiumBaseUrl}/Assets`,
        },
        {
          from: path.join(cesiumSource, "Widgets"),
          to: `${cesiumBaseUrl}/Widgets`,
        },
      ],
    }),
    new webpack.DefinePlugin({
      // Define relative base path in cesium for loading assets
      CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
    }),
  ],

使用Vite打包，提供vite-plugin-cesium插件可以在Vite中轻松搭建Cesium项目，vite-plugin-cesium插件内部cesium()方法将配置静态文件的代码封装了，只需调用cesium()一个接口即可，简化了配置。

javascript 复制代码

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium' # 导入cesium 

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(), cesium() # 添加插件
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

【Cesium 入门】快速开始

Step 1 创建账号和获取令牌

Step2 设置CesiumJS客户端