WebGis开发 - Cesium三维可视化项目教程：初始化场景
在现代WebGIS应用中，Cesium作为一款强大的三维地球可视化库，逐渐受到开发者的青睐。本文将为大家详细介绍如何使用Cesium初始化一个简单的三维可视化场景。
一、环境准备
在开始之前，我们需要准备好一些开发环境。确保你的开发环境中已经安装了Node.js和npm（Node包管理器）。接下来，我们可以通过npm来下载Cesium。
安装Cesium
在你的项目目录下，执行以下命令：
npm install cesium
安装完成后，Cesium库的文件会被下载到node_modules/cesium目录中。
二、初始化Cesium场景
接下来，我们可以开始创建一个简单的HTML文件来展示我们的Cesium场景。首先，创建一个名为index.html的文件，代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cesium 初始化场景</title>
<link href="https://unpkg.com/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script src="https://unpkg.com/cesium/Build/Cesium/Cesium.js"></script>
<script>
// 初始化Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain() // 使用全球地形数据
});
// 设置相机位置
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.3911, 39.9067, 2000), // 设置相机目标（经度、纬度、高度）
orientation: {
heading: Cesium.Math.toRadians(0), // 朝向
pitch: Cesium.Math.toRadians(-15), // 俯仰角
roll: 0 // 滚转角
}
});
// 添加一个蓝色的球体到场景中
viewer.entities.add({
name: '蓝色球体',
position: Cesium.Cartesian3.fromDegrees(116.3911, 39.9067),
ellipsoid: {
radii: new Cesium.Cartesian3(50000.0, 50000.0, 50000.0), // 球体半径
material: Cesium.Color.BLUE.withAlpha(0.5) // 球体颜色
}
});
// 添加光标提示
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(116.3911, 39.9067),
label: {
text: '这里是北京',
font: '20px Helvetica',
fillColor: Cesium.Color.WHITE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
pixelOffset: new Cesium.Cartesian2(0, -30)
}
});
</script>
</body>
</html>
代码解析
-
HTML结构：我们创建了一个
div标签用来容纳Cesium的场景，确保该div占满整个页面。 -
引用Cesium库：我们通过CDN方式引入Cesium的CSS和JS文件。
-
初始化Viewer：
new Cesium.Viewer('cesiumContainer')：创建一个Cesium Viewer实例，'cesiumContainer'是我们之前创建的div的ID。-
terrainProvider属性用于设置全球地形，这里使用的是Cesium提供的全球地形数据。 -
设置相机视角：
setView方法用于指定相机的目标，包括位置、朝向和俯仰角。 -
添加实体：我们添加了一个蓝色的球体和一个标签，球体的位置与标签都位于北京的经纬度上。
三、运行项目
将上述代码保存为index.html后，使用一个本地服务器来运行项目，例如，使用npm提供的简单服务器：
npx http-server -o
打开浏览器，访问 http://localhost:8080（或其他指定的端口），你将看到初始化的Cesium场景，并能看到蓝色球体和标签。
总结
本文简单介绍了如何用Cesium初始化一个三维可视化场景，从创建HTML页面到设置相机视角、添加实体，涵盖了基本的操作。随着对Cesium的深入了解，你将能够实现更复杂的三维场景和交互效果。希望这篇教程对你有所帮助！
