当前位置：首页 > news >正文

Cesium粒子系统模拟风场动态效果

news 2025/8/8 12:15:59

基于 Cesium 实现风向分布可视化的完整 Web 应用代码，采用粒子系统模拟风场动态效果，支持交互式参数调整：

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cesium 风场可视化</title><link href="https://cdn.tailwindcss.com" rel="stylesheet"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.128.0/Build/Cesium/Widgets/widgets.css"><style>#cesiumContainer {width: 100%;height: 100%;position: absolute;}.control-panel {position: absolute;top: 20px;right: 20px;z-index: 999;background: rgba(255, 255, 255, 0.8);padding: 15px;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);width: 300px;}.gradient-key {height: 20px;background: linear-gradient(to right, rgb(36,104,180), rgb(60,157,194),rgb(128,205,193),rgb(198,231,181),rgb(255,238,159),rgb(252,150,75),rgb(237,45,28));border-radius: 4px;margin-top: 10px;}</style>
</head>
<body class="overflow-hidden"><div id="cesiumContainer"></div><div class="control-panel"><h2 class="text-xl font-bold mb-4">风场控制面板</h2><div class="space-y-4"><div><label class="block text-sm font-medium">粒子数量</label><input type="range" id="particleCount" min="500" max="5000" value="2000" step="100" class="w-full"><span id="particleCountValue" class="text-sm">2000</span></div><div><label class="block text-sm font-medium">风速比例</label><input type="range" id="velocityScale" min="0.01" max="0.1" value="0.03" step="0.01" class="w-full"><span id="velocityScaleValue" class="text-sm">0.03</span></div><div><label class="block text-sm font-medium">透明度</label><input type="range" id="globalAlpha" min="0.1" max="1" value="0.9" step="0.1" class="w-full"><span id="globalAlphaValue" class="text-sm">0.9</span></div><div><label class="block text-sm font-medium">颜色映射</label><div class="gradient-key"></div></div><button id="resetView" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition">重置视图</button></div></div><script src="https://cdn.jsdelivr.net/npm/cesium@1.128.0/Build/Cesium/Cesium.js"></script><script src="cesium-wind.js"></script><script src="app.js"></script>
</body>
</html>

app.js

let viewer;
let windLayer;
let windOptions = {colorScale: ['rgb(36,104,180)','rgb(60,157,194)','rgb(128,205,193)','rgb(198,231,181)','rgb(255,238,159)','rgb(252,150,75)','rgb(237,45,28)'],frameRate: 16,maxAge: 60,globalAlpha: 0.9,velocityScale: 0.03,paths: 2000
};// 初始化Cesium Viewer
function initViewer() {viewer = new Cesium.Viewer('cesiumContainer', {animation: false,baseLayerPicker: false,fullscreenButton: false,vrButton: false,geocoder: false,homeButton: false,infoBox: false,sceneModePicker: false,selectionIndicator: false,timeline: false,navigationHelpButton: false,terrain: Cesium.Terrain.fromWorldTerrain()});// 隐藏logoviewer.cesiumWidget.creditContainer.style.display = "none";// 设置初始视图viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(104.0, 30.0, 10000000.0),orientation: {heading: 0.0,pitch: -Cesium.Math.PI_OVER_TWO,roll: 0.0}});// 启用抗锯齿viewer.scene.postProcessStages.fxaa.enabled = true;
}// 加载风场数据
async function loadWindData() {try {const response = await fetch('./ncep2016-wind.json');const windData = await response.json();Cesium.Cartesian2if (windLayer) {windLayer.remove();}windLayer = new CesiumWind.WindLayer(windData, { windOptions });windLayer.addTo(viewer);} catch (error) {console.error('加载风场数据失败:', error);}
}// 初始化控制面板交互
function initControls() {document.getElementById('particleCount').addEventListener('input', (e) => {const value = e.target.value;document.getElementById('particleCountValue').textContent = value;windOptions.paths = parseInt(value);if (windLayer) {windLayer.updateOptions({ windOptions });}});document.getElementById('velocityScale').addEventListener('input', (e) => {const value = e.target.value;document.getElementById('velocityScaleValue').textContent = value;windOptions.velocityScale = parseFloat(value);if (windLayer) {windLayer.updateOptions({ windOptions });}});document.getElementById('globalAlpha').addEventListener('input', (e) => {const value = e.target.value;document.getElementById('globalAlphaValue').textContent = value;windOptions.globalAlpha = parseFloat(value);if (windLayer) {windLayer.updateOptions({ windOptions });}});document.getElementById('resetView').addEventListener('click', () => {viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(104.0, 30.0, 10000000.0),orientation: {heading: 0.0,pitch: -Cesium.Math.PI_OVER_TWO,roll: 0.0}});});
}// 主初始化函数
async function main() {initViewer();initControls();await loadWindData();
}// 启动应用
document.addEventListener('DOMContentLoaded', main);

代码功能说明：

‌三维风场可视化‌：基于Cesium粒子系统实现动态风场效果，通过颜色梯度表示风速强度15
‌交互式控制面板‌：提供粒子数量、风速比例和透明度等参数的实时调整功能1
‌响应式设计‌：适配不同屏幕尺寸，控制面板采用浮动布局5
‌数据加载‌：支持从远程JSON接口加载风场数据，格式符合气象数据标准23
‌性能优化‌：通过限制粒子数量和帧率确保流畅渲染4

实现原理：

使用CesiumWind库处理风场数据并生成粒子动画1
通过WebGL着色器实现高效的风向粒子渲染5
采用三次卷积插值法计算粒子运动轨迹4
颜色映射方案基于气象学标准色标

官方气象数据平台

‌美国国家气象服务中心(NCEP)‌
- 访问官网：https://nomads.ncep.noaa.gov
- 选择 ‌0.25°高精度数据‌，按时间/区域筛选GRIB2格式风场数据（含U/V分量）1
- 支持下载全球每日4次更新的实时气象数据

🔧 数据转换工具

‌grib2json转换工具‌
- GitHub项目地址：https://github.com/cambecc/grib2json1
- 功能：将下载的GRIB2原始数据转为标准JSON格式
- 转换命令示例：
  bashCopy Code
  grib2json -d -n -o wind.json input.grib2

查看全文

http://www.lryc.cn/news/613372.html