资源推荐
cesium-wind - Cesium 风场可视化插件

想在 Cesium 上加风场效果？6 行代码搞定

cesium-wind 是一个专为 Cesium 设计的风场可视化插件，用于在 Cesium 三维地球上展示风速和风向数据。项目基于 wind-layer 核心库开发，数据格式与 wind-layer 保持一致。

核心特点：

  • 兼容多个 Cesium 版本
  • 基于 wind-layer 核心库，渲染性能经过优化
  • 支持多种风场数据格式
  • 已在生产环境中验证

能力边界： cesium-wind 专注于风场数据的前端可视化渲染，不包含气象数据的获取、处理或分析功能。数据需要预先转换为指定的 JSON 格式。

安装方式

npm install cesium-wind

使用方法

cesium-wind 提供两种集成方式：

方式一：浏览器直接引入（UMD）

适用于不使用构建工具的项目，参考项目中的 examples/umd.html 示例。

<script src="path/to/Cesium.js"></script>
<script src="path/to/cesium-wind.umd.js"></script>
<script>
  const viewer = new Cesium.Viewer('cesiumContainer');
 
  // 加载风场数据
  fetch('wind-data.json')
    .then(res => res.json())
    .then(windData => {
      const windLayer = new CesiumWind.WindLayer(windData, {
        colorScale: [
          "rgb(36,104,180)",
          "rgb(60,157,194)",
          "rgb(128,205,193)",
          "rgb(151,218,168)",
          "rgb(198,231,181)",
          "rgb(238,247,217)",
          "rgb(255,238,159)",
          "rgb(252,217,125)",
          "rgb(255,182,100)",
          "rgb(252,150,75)",
          "rgb(250,112,52)",
          "rgb(245,64,32)",
          "rgb(237,45,28)",
          "rgb(220,24,32)",
          "rgb(180,0,35)"
        ],
        frameRate: 16,
        maxAge: 60,
        globalAlpha: 0.9,
        velocityScale: 1 / 30,
        paths: 2000
      });
      windLayer.addTo(viewer);
    });
</script>

方式二：模块化项目（Vite / Webpack）

适用于使用现代前端构建工具的项目。

import * as Cesium from 'cesium';
import * as CesiumWind from 'cesium-wind';
 
// 初始化 Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
});
 
// 配置风场参数
const windOptions = {
  colorScale: [
    "rgb(36,104,180)",
    "rgb(60,157,194)",
    "rgb(128,205,193)",
    "rgb(151,218,168)",
    "rgb(198,231,181)",
    "rgb(238,247,217)",
    "rgb(255,238,159)",
    "rgb(252,217,125)",
    "rgb(255,182,100)",
    "rgb(252,150,75)",
    "rgb(250,112,52)",
    "rgb(245,64,32)",
    "rgb(237,45,28)",
    "rgb(220,24,32)",
    "rgb(180,0,35)"
  ],
  frameRate: 16,
  maxAge: 60,
  globalAlpha: 0.9,
  velocityScale: 1 / 30,
  paths: 2000
};
 
// 加载风场数据并创建图层
fetch('wind-data.json')
  .then(res => res.json())
  .then(windData => {
    const windLayer = new CesiumWind.WindLayer(windData, windOptions);
    windLayer.addTo(viewer);
  });

配置参数

参数类型说明
colorScalestring[]颜色梯度数组，用于根据风速映射颜色
frameRatenumber动画帧率，影响粒子运动流畅度
maxAgenumber粒子最大生命周期，控制粒子轨迹长度
globalAlphanumber全局透明度，取值 0-1
velocityScalenumber速度缩放比例，调整粒子移动速度
pathsnumber粒子数量，数值越大风场越密集

数据格式

cesium-wind 使用的数据格式与 wind-layer 一致，通常来源于 GFS 等气象数据源。数据需要包含：

  • U/V 风分量数据（水平和垂直方向的风速）
  • 地理范围（经纬度边界）
  • 网格间距和维度信息

可以使用 grib2json (opens in a new tab) 工具将 GRIB2 格式的气象数据转换为所需的 JSON 格式。

使用示例

假设你要在 Cesium 地球上展示全球风场数据：

步骤操作说明
1安装依赖npm install cesium cesium-wind
2初始化 Viewer创建 Cesium.Viewer 实例
3准备数据获取或转换风场 JSON 数据
4配置参数设置颜色、粒子数量等 windOptions
5创建图层new CesiumWind.WindLayer(data, options)
6添加到场景windLayer.addTo(viewer)

在线演示： https://qjvic.github.io/cesium-wind/examples/umd.html (opens in a new tab)

与 wind-layer 的关系

cesium-wind 是 wind-layer (opens in a new tab) 项目在 Cesium 平台的适配实现。wind-layer 是一个支持多种 WebGIS 地图库的气象可视化插件，提供了：

  • Mapbox GL / MapLibre GL 适配
  • OpenLayers 适配
  • Leaflet 适配
  • Maptalks 适配
  • 高德地图 / 百度地图适配

如果你的项目同时使用多种地图库，可以考虑直接使用 wind-layer 的对应适配包，保持数据格式和配置的一致性。

适用场景

适合的场景：

  • 在 Cesium 三维地球上展示气象风场数据
  • 需要粒子动画效果展示风速风向
  • 已有符合格式要求的风场 JSON 数据

不适合的场景：

  • 需要复杂的气象数据分析和计算
  • 需要实时获取和处理气象数据
  • 对渲染性能有极端要求，需要深度定制

小结

cesium-wind 为 Cesium 用户提供了一个可用的风场可视化方案。通过配置粒子数量、颜色梯度、透明度等参数，可以在三维地球上展示风场的流动效果。项目基于 wind-layer 核心库，数据格式通用，便于与其他地图库的风场可视化保持一致。

项目地址：https://github.com/QJvic/cesium-wind (opens in a new tab)

Astral3DEditor三维编辑器Cesium-三维地图可视化应用