【WebGIS】Cesium：Viewer 初始化、地图加载与基础交互

2024-10-13 07:02:12

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，未来可以在此基础上继续深入学习更复杂的几何图形、动画、地形分析、数据交互等高级功能。希望这篇入门文章对你的学习之旅有所帮助。

码农公寓