leaflet-velocity vs wind-js-leaflet：气象可视化插件到底怎么选？

【免费下载链接】leaflet-velocity Visualise velocity data on a leaflet layer 项目地址: https://gitcode.com/gh_mirrors/le/leaflet-velocity

想在 Leaflet 地图上展示流动的风场或洋流，leaflet-velocity 和 wind-js-leaflet 是两款最常被提起的气象可视化插件。它们都源自经典的 WindJS 粒子动画思想，都能做出"丝滑"的动态箭头效果，但选错工具往往会在后续开发中踩坑。这篇文章从定位、数据格式、扩展能力三个维度帮你一次性看清两者的差异，并给出明确的选择建议。

两者的出身：同源但路线不同

两款插件本质上都脱胎于 WindJS 的粒子系统——通过大量粒子沿矢量场轨迹流动，配合颜色编码表达速度大小。wind-js-leaflet 是早期广为人知的实现，专注于"风"这一种场景；而 leaflet-velocity 在 README 中明确写到：它"much more versatile"，提供了一个通用的速度场可视化图层，并不限制数据类型。

这一根本定位差异，决定了后续几乎所有选择逻辑。

核心差异：通用 vs 专用

在 L.VelocityLayer.js 中可以看到，leaflet-velocity 的图层对外暴露了 setData 和 setOptions 两个公开方法，意味着你可以在不重建图层的情况下动态刷新数据、切换展示参数——这对接实时气象数据源非常关键。

洋流可视化：leaflet-velocity 的杀手锏

如果你只需要展示"风"，两款插件都能胜任；但如果你要展示洋流、海面高度异常、甚至温度梯度，leaflet-velocity 就是明显更优的选择。

项目自带的 demo/demo.js 就同时加载了三组数据演示：

• Wind - Global：全球风场，对应 wind-global.json
• Wind - Great Barrier Reef：区域风场
• Ocean Current - Great Barrier Reef：大堡礁洋流，对应 water-gbr.json

同一套 API、同一个图层体系，风场和洋流可以无缝切换叠加，这正是"通用速度场图层"带来的灵活度。其中洋流示例还专门调低了 maxVelocity 并调高了 velocityScale，可见它对不同量级的矢量数据都有良好的适配性。

快速上手指南

引入项目后，核心用法非常简洁：

var velocityLayer = L.velocityLayer({
  displayValues: true,
  displayOptions: {
    velocityType: "Global Wind", // 悬浮提示的前缀
    position: "bottomleft",
    emptyString: "No velocity data",
    speedUnit: "ms", // m/s、k/h、mph、kt
    showCardinal: false
  },
  data: data, // 来自 grib2json 转换的 JSON
  maxVelocity: 10, // 色阶上限
  velocityScale: 0.005 // 粒子动画速度调节
});

velocityLayer.addTo(map);

其中的角度约定 angleConvention 支持 bearing（流向）/ meteo（来向）与 CW/CCW 的任意组合，方便对接不同气象数据的习惯表达。详细参数说明可参考项目 README.md。

到底怎么选？

给出三条最实用的判断标准：

1. 只看风场、追求开箱即用 → 选 wind-js-leaflet，代码更少更直观。
2. 需要同时展示风、洋流等多类数据 → 选 leaflet-velocity，一套代码吃遍所有矢量场。
3. 要接实时数据、做交互式气象平台 → 选 leaflet-velocity，setData/setOptions 动态更新能力是硬需求。

另外，leaflet-velocity 对 Leaflet v0.7.7 和 v1.x 都有兼容支持，并允许通过 paneName 自定义图层挂载层级，在地图渲染优化上给开发者留了更多余地。

写在最后

两款气象可视化插件各有拥趸：wind-js-leaflet 胜在简单直接，leaflet-velocity 赢在通用与灵活。如果你的项目涉及海洋气象、多源速度场叠加或实时数据刷新，优先考虑 leaflet-velocity；如果只是要在演示页面画一片流动的风，怎么简单怎么来。动手前把项目克隆下来跑一遍 demo，十分钟就能做出判断——仓库地址：https://gitcode.com/gh_mirrors/le/leaflet-velocity

【免费下载链接】leaflet-velocity Visualise velocity data on a leaflet layer 项目地址: https://gitcode.com/gh_mirrors/le/leaflet-velocity