官网地址:cesium.com/learn/cesiu...
这是使用真实世界数据使用 Cesium 构建 3D 应用程序的快速入门。您将学习如何在网页上设置 Cesium 应用程序,如下所示:
文章将介绍如何:
- 创建Cesium ion账号和获取令牌
- 设置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...,
如果访问不到需要通过方法下载下来,在引用,代码如下:
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))
}
}
})