【Cesium 入门】快速开始

官网地址:cesium.com/learn/cesiu...

这是使用真实世界数据使用 Cesium 构建 3D 应用程序的快速入门。您将学习如何在网页上设置 Cesium 应用程序,如下所示:

文章将介绍如何:

  1. 创建Cesium ion账号和获取令牌
  2. 设置CesiumJS客户端:cdn引入cesium和在Webpack,Vite两种打包工具下如何配置引入Cesium

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))
    }
  }
})
相关推荐
幸会同学12 小时前
使用three-to-cesium.js轻松融合Three和Cesium场景
three.js·cesium
GISBox10 天前
高斯泼溅文件如何转换成3DTiles?GISBox帮你轻松实现在Cesium上的应用
gis·cesium
GISBox15 天前
3D Gaussian Splatting文件如何转换成3DTiles?这款免费GIS工具箱能帮你轻松解决问题
3d·gis·cesium·倾斜摄影·切片
问也去21 天前
3dtiles平移旋转工具制作
cesium
GIS追梦人21 天前
Cesium 入门之 Entity API
gis·cesium
[廾匸]23 天前
cesium视频投影
javascript·无人机·cesium·cesium.js·视频投影
安大桃子23 天前
Cesium实现深色地图效果
前端·gis·cesium
不浪brown1 个月前
开源!Cesium视频投射,手把手教你如何让实时视频流“长”在三维地球里!
cesium
整点可乐1 个月前
cesium热力图曲面简单实现,使用heatmap
前端·cesium
不浪brown1 个月前
应急指挥&污染扩散模拟 | Cesium 多边形动态扩散墙实战教程(附源码)
前端·cesium