Cesium三维地图开发入门：从零构建你的第一个WebGIS应用

1次阅读

没有评论

共计 2816 个字符，预计需要花费 8 分钟才能阅读完成。

Cesium 是一个开源的 JavaScript 库，用于创建高性能的三维地理空间应用。它在 WebGIS 领域具有以下优势：

跨平台兼容性：基于 WebGL 技术，可在任何现代浏览器中运行
丰富的可视化能力：支持地形、影像、3D 模型、点云等多种数据类型的渲染
精确的空间参考：内置 WGS84 坐标系支持，满足专业 GIS 需求
活跃的社区生态：拥有大量插件和扩展功能

典型应用场景包括：智慧城市、应急指挥、军事仿真、地质勘探等需要三维地理可视化的领域。

安装 Node.js：
前往 Node.js 官网下载 LTS 版本
安装后验证：node -v和 npm -v 应显示版本号

创建项目：

mkdir cesium-demo
cd cesium-demo
npm init -y

引入 Cesium：
```
npm install cesium
```

项目结构：

/src
  index.html
  main.js
/node_modules
package.json

// main.js
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

// 1. 初始化 Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
  baseLayerPicker: false, // 禁用默认底图选择器
  terrainProvider: Cesium.createWorldTerrain(), // 使用 Cesium 全球地形
  timeline: false, // 禁用时间轴
  animation: false, // 禁用动画控件
});

// 2. 设置初始视角
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 1000000),
  orientation: {heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
  }
});

Cesium 提供多种地形数据源选择：

Cesium.createWorldTerrain()：官方全球地形（需要 Token）
new Cesium.EllipsoidTerrainProvider()：平滑椭球体（无真实地形）
自定义地形服务（通过 Cesium.CesiumTerrainProvider 加载）

Cesium 提供两种主要图形绘制方式：

Primitive API：
底层 WebGL 绘制接口
高性能，适合大量静态图形

代码示例：

viewer.scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.RectangleGeometry({rectangle: Cesium.Rectangle.fromDegrees(116.3, 39.8, 116.5, 40.0),
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
      })
    }),
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true,
      translucent: false
    })
  })
);

Entity API：
高级抽象接口
支持动态属性绑定和时间轴控制

代码示例：

viewer.entities.add({
  name: 'Beijing',
  position: Cesium.Cartesian3.fromDegrees(116.4, 39.9),
  point: {
    pixelSize: 10,
    color: Cesium.Color.RED
  },
  label: {
    text: '北京市',
    font: '14pt sans-serif',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE
  }
});

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cesium 入门 Demo</title>
  <script src="node_modules/cesium/Build/Cesium/Cesium.js"></script>
  <link href="node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    #cesiumContainer {width: 100%; height: 100vh;}
    body {margin: 0; overflow: hidden;}
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script src="main.js"></script>
</body>
</html>

内存管理：
及时销毁不再使用的实体：viewer.entities.remove(entity)
使用 destroy() 方法释放资源
相机控制：
避免频繁调用flyTo，改用setView
限制相机移动范围：viewer.scene.screenSpaceCameraController.enableCollisionDetection = true
LOD 策略：
对大量点数据使用Cesium3DTileset
设置适当的 maximumScreenSpaceError 值（建议 2 -4）