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

1次阅读

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

Cesium 是目前最流行的开源 WebGIS 三维引擎之一，特别适合构建高性能的地理空间可视化应用。它的优势主要体现在：

全面的地理空间支持：内置全球地形、多种坐标系支持、时间动态数据展示能力
强大的 3D 渲染能力：基于 WebGL 实现流畅的三维场景渲染，支持海量数据加载
丰富的 API：提供从基础地图显示到高级空间分析的全套解决方案
活跃的社区：拥有大量开源插件和持续更新的文档

首先需要安装 Node.js 作为开发环境基础：

访问 Node.js 官网下载 LTS 版本
运行安装程序，确保勾选 ”npm package manager” 选项
安装完成后，在命令行验证版本：

node -v
npm -v

推荐使用 Vite 快速搭建项目骨架：

创建新项目文件夹并初始化：

npm create vite@latest my-cesium-app --template vanilla
cd my-cesium-app

安装 Cesium 依赖：

npm install cesium

创建 index.html 文件，包含必要的 CSS 和容器：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 我的第一个 Cesium 应用 </title>
  <!-- 引入 Cesium CSS -->
  <link href="node_modules/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>
  <!-- 引入 Cesium JS -->
  <script src="node_modules/cesium/Build/Cesium/Cesium.js"></script>
  <script src="main.js" type="module"></script>
</body>
</html>

// 设置 Cesium 静态资源路径
window.CESIUM_BASE_URL = './node_modules/cesium/Build/Cesium/';

// 初始化 Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {terrain: Cesium.Terrain.fromWorldTerrain(), // 使用 Cesium 全球地形
  timeline: false, // 禁用时间轴
  animation: false, // 禁用动画控件
  baseLayerPicker: false, // 禁用底图选择器
  shouldAnimate: true // 启用动画
});

// 去除默认的版权信息（仅开发环境使用）viewer.cesiumWidget.creditContainer.style.display = "none";

// 设置初始视角
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000), // 北京坐标
  orientation: {heading: Cesium.Math.toRadians(0), // 朝向
    pitch: Cesium.Math.toRadians(-90), // 俯仰角
    roll: 0.0 // 翻滚角
  }
});

// 加载 GeoJSON 数据
Cesium.GeoJsonDataSource.load('data/buildings.geojson', {
  stroke: Cesium.Color.BLUE,
  fill: Cesium.Color.RED.withAlpha(0.5),
  strokeWidth: 3
}).then(dataSource => {viewer.dataSources.add(dataSource);

  // 自动缩放到数据范围
  viewer.zoomTo(dataSource);
}).catch(error => {console.error('加载 GeoJSON 失败:', error);
});

使用 3DTiles 替代传统模型：对于大规模三维建筑数据，3DTiles 格式比传统模型性能更好
启用 LOD（细节层次）：确保远距离显示简化模型，近距离显示详细模型
合理设置相机远裁剪面：避免渲染视野外的物体

viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; // 最小视距
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000000; // 最大视距

开发时如果遇到跨域错误，可以：

使用 Vite 的代理配置
或者启动本地服务器：

npm install -g http-server
http-server --cors="*"

Cesium 使用 WGS84 坐标系，如需与其他坐标系互转：

// 经纬度转笛卡尔坐标
const cartesian = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

// 笛卡尔坐标转经纬度
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
const latitude = Cesium.Math.toDegrees(cartographic.latitude);