Cesium 是一个功能强大、基于 WebGL 的开源三维地球引擎，它允许用户在浏览器中渲染高性能的三维地图和地球。本文将带领新手入门 Cesium，学习如何初始化 Cesium Viewer，加载地图和地形，了解地球的基础交互操作，并掌握如何添加标记、线条、几何图形和标签等基本功能。
初始化 Cesium Viewer 并加载地图和地形
在 Cesium 中，Cesium.Viewer 是主要的 API 入口，它封装了场景、地形、图层、控件等各种功能，帮助开发者快速构建三维地图应用。
安装 Cesium
首先，需要在 HTML 文件中引入 Cesium 的 JavaScript 和 CSS 文件。如果你使用本地文件或从 CDN 引入，可以这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cesium Example</title>
<link href="https://cesium.com/downloads/cesiumjs/releases/latest/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="https://cesium.com/downloads/cesiumjs/releases/latest/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
<script>
// Cesium 代码将在这里编写
</script>
</body>
</html>
这段代码引入了 Cesium 的核心库和基本的样式文件，创建了一个用于显示 Cesium 地球的容器。
初始化 Cesium Viewer
在 HTML 页面中成功引入 Cesium 之后，可以通过以下代码来初始化一个基本的 Viewer：
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(), // 加载全球地形数据
imageryProvider: new Cesium.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(new Cesium.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，未来可以在此基础上继续深入学习更复杂的几何图形、动画、地形分析、数据交互等高级功能。希望这篇入门文章对你的学习之旅有所帮助。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 【WebGIS】Cesium：Viewer 初始化、地图加载与基础交互
发表评论 取消回复