Cesium 是一个功能强大、基于 WebGL 的开源三维地球引擎，它允许用户在浏览器中渲染高性能的三维地图和地球。本文将带领新手入门 Cesium，学习如何初始化 Cesium Viewer，加载地图和地形，了解地球的基础交互操作，并掌握如何添加标记、线条、几何图形和标签等基本功能。
初始化 Cesium Viewer 并加载地图和地形
在 Cesium 中，
Cesium.Viewer
是主要的 API 入口，它封装了场景、地形、图层、控件等各种功能，帮助开发者快速构建三维地图应用。
安装 Cesium
首先，需要在 HTML 文件中引入 Cesium 的 JavaScript 和 CSS 文件。如果你使用本地文件或从 CDN 引入，可以这样做：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Cesium Example</title><linkhref="https://cesium.com/downloads/cesiumjs/releases/latest/Build/Cesium/Widgets/widgets.css"rel="stylesheet"><scriptsrc="https://cesium.com/downloads/cesiumjs/releases/latest/Build/Cesium/Cesium.js"></script></head><body><divid="cesiumContainer"style="width: 100%;height: 100vh;"></div><script>// Cesium 代码将在这里编写</script></body></html>
这段代码引入了 Cesium 的核心库和基本的样式文件，创建了一个用于显示 Cesium 地球的容器。
初始化 Cesium Viewer
在 HTML 页面中成功引入 Cesium 之后，可以通过以下代码来初始化一个基本的 Viewer：
const viewer =newCesium.Viewer('cesiumContainer',{
terrainProvider: Cesium.createWorldTerrain(),// 加载全球地形数据
imageryProvider:newCesium.IonImageryProvider({ assetId:2}),// 加载 Bing Maps 影像数据
homeButton:true,// 启用主页按钮
sceneModePicker:true,// 启用场景模式选择器
geocoder:true,// 启用地理编码器（地址搜索）
baseLayerPicker:true,// 启用图层选择器
timeline:true,// 启用时间线控件
animation:true,// 启用动画控件
fullscreenButton:true,// 启用全屏按钮});
在这个初始化过程中，
Cesium.Viewer
的构造函数需要传入容器的
ID
（这里是
cesiumContainer
），还可以通过配置项来启用或禁用特定功能。这里我们启用了全球地形、影像图层、主页按钮、场景模式选择器、地理编码器等常用功能。
地形和影像加载
Cesium 提供了多种影像和地形资源，使用 Cesium Ion 服务，可以快速加载全球地形和影像数据：
// 加载全球地形
viewer.terrainProvider = Cesium.createWorldTerrain();// 加载 Bing Maps 影像
viewer.imageryLayers.addImageryProvider(newCesium.IonImageryProvider({ assetId:2}));
此时，你的 Cesium 页面将显示地球，并使用 Bing Maps 作为基础地图，并且加载了全球的 3D 地形数据。
地球的基础交互操作
Cesium 提供了丰富的交互操作功能，包括地球的缩放、旋转和平移等。这些操作用户可以通过鼠标、键盘或触摸设备轻松实现。
缩放
缩放操作允许用户放大或缩小视角，以查看地球上的不同区域。用户可以使用鼠标滚轮或双指缩放（在触摸设备上）进行缩放。
也可以通过代码来控制视角的缩放：
viewer.camera.zoomIn();// 放大视角
viewer.camera.zoomOut();// 缩小视角
旋转
Cesium 支持用户旋转地球，改变观察角度。使用鼠标右键拖动，或者在触摸设备上使用双指旋转，可以调整地球的方向。
通过代码也可以实现旋转操作：
viewer.camera.rotateLeft();// 向左旋转视角
viewer.camera.rotateRight();// 向右旋转视角
平移
平移操作允许用户在当前的视角下移动视图，通过鼠标拖拽或触摸设备进行滑动即可实现。
通过代码同样可以实现视角平移：
viewer.camera.moveUp();// 向上移动视角
viewer.camera.moveDown();// 向下移动视角
viewer.camera.moveLeft();// 向左移动视角
viewer.camera.moveRight();// 向右移动视角
这些交互操作使用户能够更灵活地探索地球的各个角落。
添加标记、线条、形状与标签
除了基础的交互功能，Cesium 还允许开发者在地球上绘制几何图元，如点、线、形状和标签。这些图元可以用来标记重要的位置、路径等。
添加标记点
Cesium 允许使用
Billboard
（广告牌）在地图上显示标记点。通过
viewer.entities.add()
方法可以在指定位置添加标记。
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777,40.03883),// 经纬度
billboard:{
image:'path/to/marker.png',// 标记点图标
width:32,
height:32}});
这个示例在指定的经纬度位置添加了一个自定义标记点图标。
添加线条
Cesium 支持在地球上绘制直线，通过
polyline
来定义一条线段。
viewer.entities.add({
polyline:{
positions: Cesium.Cartesian3.fromDegreesArray([-75.10,39.57,-80.12,25.46]),// 两个点之间的经纬度
width:5,// 线宽
material: Cesium.Color.RED// 线的颜色}});
这段代码在地图上绘制了一条从指定的起始点到终点的红色直线。
添加形状
你可以在 Cesium 中绘制简单的几何形状，例如圆、矩形或多边形。例如，绘制一个圆形：
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-100.0,40.0),// 圆心位置
ellipse:{
semiMinorAxis:250000.0,// 短轴
semiMajorAxis:400000.0,// 长轴
material: Cesium.Color.BLUE.withAlpha(0.5)// 半透明的蓝色填充}});
这个示例将在指定的经纬度位置绘制一个半透明的蓝色圆形。
添加标签
标签（
Label
）可以用来在地图上标记位置的文字说明：
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-100.0,40.0),
label:{
text:'Hello Cesium!',// 标签内容
font:'24px Helvetica',// 字体样式
fillColor: Cesium.Color.WHITE// 字体颜色}});
这段代码将在指定位置添加一段文字标签。
总结
本文介绍了如何初始化 Cesium Viewer 并加载地图和地形，讲解了地球的基础交互操作，并展示了如何添加标记、线条、形状和标签等简单几何图元。通过这些基础功能的学习，你已经可以构建一个简单的 Cesium 应用，并在地球上进行交互和数据可视化。
Cesium 拥有强大的功能和灵活的 API，未来可以在此基础上继续深入学习更复杂的几何图形、动画、地形分析、数据交互等高级功能。希望这篇入门文章对你的学习之旅有所帮助。
版权归原作者 T0uken 所有， 如有侵权，请联系我们删除。