保姆级教程：从零在Cesium里搭建一个林火模拟器（附完整代码）-编程实验室

从零构建Cesium林火动态可视化系统：完整开发指南与实战代码

当我在去年参与森林防火项目时，第一次尝试将专业模型与三维地理可视化结合，那种数据"活起来"的震撼至今难忘。本文将带你完整复现一个可交互的林火蔓延模拟系统，即使你是刚接触WebGIS的开发者，也能在2小时内搭建出媲美专业软件的演示效果。

1. 环境准备：构建Cesium开发基础

在开始编写代码前，我们需要搭建一个稳定的开发环境。不同于简单的HTML示例，真实的Cesium项目需要考虑跨域访问、地形数据加载和本地服务调试等实际问题。

1.1 开发工具选择与配置

推荐两种主流开发环境方案：

VSCode + Live Server插件（适合纯前端演示）
- 安装步骤：
  1. 在VSCode扩展商店搜索"Live Server"并安装
  2. 创建项目文件夹，新建index.html
  3. 右键HTML文件选择"Open with Live Server"

Node.js + Express服务（推荐完整项目）

# 初始化项目 mkdir cesium-fire && cd cesium-fire npm init -y npm install express cesium

1.2 Cesium基础配置

在项目根目录创建public文件夹存放静态资源，下载 CesiumJS 并解压到public/libs目录。典型的项目结构如下：

cesium-fire/ ├── node_modules/ ├── public/ │ ├── libs/cesium/ │ ├── assets/ # 存放GeoJSON等数据文件 │ └── styles/ ├── server.js └── package.json

在server.js中添加基础Express配置：

const express = require('express'); const path = require('path'); const app = express(); app.use(express.static('public')); app.use('/cesium', express.static(path.join(__dirname, 'public/libs/cesium'))); app.listen(3000, () => { console.log('Server running on http://localhost:3000'); });

2. 三维场景初始化：打造专业级地理可视化

2.1 基础地球实例化

创建public/index.html文件，构建基础HTML结构：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>林火蔓延动态模拟</title> <link href="/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <style> #cesiumContainer { width: 100%; height: 100vh; margin: 0; padding: 0; } body { margin: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script src="/cesium/Build/Cesium/Cesium.js"></script> <script src="/app.js"></script> </body> </html>

在public/app.js中初始化三维地球：

Cesium.Ion.defaultAccessToken = 'your_ion_token'; // 替换为实际token const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain(), timeline: true, animation: true, shouldAnimate: true, baseLayerPicker: false, sceneModePicker: false }); // 设置中国区域视角 viewer.camera.flyTo({ destination: Cesium.Rectangle.fromDegrees(85.0, 20.0, 135.0, 50.0), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-30), roll: 0.0 } });

2.2 时间轴动态控制

林火模拟的核心是时间维度变化，我们需要精确控制时钟参数：

const startTime = Cesium.JulianDate.now(); const endTime = Cesium.JulianDate.addHours(startTime, 6, new Cesium.JulianDate()); viewer.clock.startTime = startTime.clone(); viewer.clock.stopTime = endTime.clone(); viewer.clock.currentTime = startTime.clone(); viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环播放 viewer.clock.multiplier = 100; // 时间流逝速度 viewer.timeline.zoomTo(startTime, endTime);

3. 火场数据准备与动态可视化

3.1 模拟火场边界生成

在没有真实数据的情况下，我们可以用代码生成模拟火场。创建public/assets/fire-simulation.js：

function generateFireData(centerLon, centerLat, hours, rings) { const features = []; const baseRadius = 500; // 基础半径（米） for (let i = 0; i < rings; i++) { const radius = baseRadius * (i + 1); const timeOffset = i * (hours * 3600 / rings); const positions = []; for (let angle = 0; angle < 360; angle += 10) { const radians = Cesium.Math.toRadians(angle); const lon = centerLon + (radius / 111320) * Math.cos(radians); const lat = centerLat + (radius / 110540) * Math.sin(radians); positions.push(lon, lat); } features.push({ type: 'Feature', properties: { timeOffset: timeOffset }, geometry: { type: 'Polygon', coordinates: [[ ...positions.map((lon, idx) => idx % 2 === 0 ? [lon, positions[idx+1]] : null ).filter(Boolean) ]] } }); } return { type: 'FeatureCollection', features: features }; }

3.2 动态加载与时间序列控制

在app.js中添加数据加载逻辑：

const fireData = generateFireData(116.4, 39.9, 6, 12); // 北京附近模拟 viewer.dataSources.add( Cesium.GeoJsonDataSource.load(fireData, { clampToGround: true }) ).then(dataSource => { const entities = dataSource.entities.values; const start = viewer.clock.startTime; entities.forEach((entity, i) => { // 设置颜色渐变 entity.polygon.material = new Cesium.ColorMaterialProperty( Cesium.Color.fromCssColorString( `rgb(${Math.floor(255 * (i/entities.length))}, ${Math.floor(100 * (1 - i/entities.length))}, 0)` ) ); // 设置时间序列 const intervalStart = Cesium.JulianDate.addSeconds( start, entity.properties.timeOffset.getValue(), new Cesium.JulianDate() ); entity.availability = new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: intervalStart, stop: Cesium.JulianDate.addSeconds(intervalStart, 1800, new Cesium.JulianDate()) }) ]); }); });

4. 高级效果优化：让模拟更真实

4.1 热力图效果叠加

通过Cesium的CustomShader实现热力图效果：

const fireShader = { fragmentShaderSource: ` uniform sampler2D colorTexture; varying vec2 v_textureCoordinates; void main() { vec4 color = texture2D(colorTexture, v_textureCoordinates); float intensity = (color.r * 0.3 + color.g * 0.59 + color.b * 0.11); vec3 heat = vec3( smoothstep(0.0, 0.3, intensity), smoothstep(0.3, 0.6, intensity), smoothstep(0.6, 1.0, intensity) ); gl_FragColor = vec4(mix(color.rgb, heat, 0.7), color.a); } ` }; viewer.scene.postProcessStages.add( new Cesium.PostProcessStage(fireShader) );

4.2 粒子系统模拟火焰

虽然Cesium没有专门的火焰粒子，但我们可以模拟类似效果：

function createFireParticles(viewer, position) { const particleSystem = viewer.scene.primitives.add( new Cesium.ParticleSystem({ image: '/assets/fire.png', // 准备火焰贴图 startColor: Cesium.Color.ORANGE.withAlpha(0.7), endColor: Cesium.Color.RED.withAlpha(0.0), startScale: 1.0, endScale: 3.0, minimumParticleLife: 1.0, maximumParticleLife: 3.0, minimumSpeed: 1.0, maximumSpeed: 3.0, imageSize: new Cesium.Cartesian2(25, 25), emissionRate: 30.0, lifetime: 16.0, emitter: new Cesium.CircleEmitter(100.0), modelMatrix: Cesium.Matrix4.fromTranslation( Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0) ), emitterModelMatrix: computeEmitterModelMatrix() }) ); function computeEmitterModelMatrix() { const hpr = new Cesium.HeadingPitchRoll(); const trs = new Cesium.TranslationRotationScale(); trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr); return Cesium.Matrix4.fromTranslationRotationScale(trs); } }

5. 交互功能增强：打造专业分析工具

5.1 火场参数动态控制

添加UI控件来实时调整模拟参数：

<div id="controlPanel" style="position: absolute; top: 20px; left: 20px; background: white; padding: 10px; z-index: 999;"> <h3>火场模拟控制</h3> <div> <label>蔓延速度: </label> <input type="range" id="speedControl" min="1" max="1000" value="100"> </div> <div> <label>风向: </label> <select id="windDirection"> <option value="N">北风</option> <option value="NE">东北风</option> <option value="E">东风</option> <option value="SE">东南风</option> <option value="S">南风</option> <option value="SW">西南风</option> <option value="W">西风</option> <option value="NW">西北风</option> </select> </div> <button id="resetSimulation">重置模拟</button> </div>

添加对应的JavaScript控制逻辑：

document.getElementById('speedControl').addEventListener('input', (e) => { viewer.clock.multiplier = Number(e.target.value); }); document.getElementById('windDirection').addEventListener('change', (e) => { // 这里可以添加风向影响火场形状的逻辑 console.log('风向改变为:', e.target.value); }); document.getElementById('resetSimulation').addEventListener('click', () => { viewer.clock.currentTime = viewer.clock.startTime.clone(); });

5.2 火场面积计算与标注

为每个火圈添加面积标注：

entities.forEach(entity => { entity.label = { text: `${Cesium.PolygonGeometry.computeArea(entity.polygon.hierarchy.getValue()).toFixed(2)} ㎡`, font: '14pt sans-serif', style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -10), showBackground: true, backgroundColor: new Cesium.Color(0.2, 0.2, 0.2, 0.7) }; });

6. 性能优化与移动端适配

6.1 大数据量优化策略

当火场数据量较大时，可以采用以下优化方案：

细节层次（LOD）控制：

entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN; entity.polygon.zIndex = 10 - Math.floor(i / 3); // 每3层一个LOD级别

视锥体剔除：

viewer.scene.globe.depthTestAgainstTerrain = true; viewer.scene.camera.changed.addEventListener(() => { const visible = viewer.scene.camera.viewRectangle.intersects( entity.boundingRectangle ); entity.show = visible; });

6.2 移动端触摸交互优化

添加触摸友好的控制方式：

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction((movement) => { const pickedObject = viewer.scene.pick(movement.endPosition); if (Cesium.defined(pickedObject) && pickedObject.id) { // 显示火场详细信息 showFireInfo(pickedObject.id); } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

7. 项目部署与后续扩展

7.1 生产环境部署建议

对于正式项目部署，建议：

使用CDN加速Cesium资源：

<script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

地形服务优化：

viewer.terrainProvider = new Cesium.CesiumTerrainProvider({ url: 'https://assets.agi.com/stk-terrain/world', requestVertexNormals: true, requestWaterMask: true });

7.2 可能的扩展方向

真实数据接入：
- 连接气象API获取实时风向风速
- 接入卫星热源数据自动生成火场边界

高级分析功能：

// 火势蔓延预测算法 function predictSpread(fireFront, windSpeed, windDirection) { // 实现预测模型 }

多灾种综合可视化：
- 结合地形数据模拟火势蔓延速度变化
- 叠加疏散路线规划功能

在真实项目中，我发现最实用的技巧是合理设置TimeInterval的交叉时间，让火场边界过渡更自然。比如当前火圈的结束时间与下一火圈的开始时间保持20%的重叠，可以避免生硬的切换效果。

保姆级教程：从零在Cesium里搭建一个林火模拟器（附完整代码）