一、插件下载

    提前安装好leaflet，安装leaflet-velocity插件

npm install leaflet-velocity

二、vue3内使用

//leaflet相关资源引入
******
//引入安装的插件
import 'leaflet-velocity/src/css/leaflet-velocity.css';
import 'leaflet-velocity';

//创建图层
let velocityLayer = L.velocityLayer({
        displayValues: false,// 是否显示速度值
        displayOptions: {
          velocityType: "GBR Wind", // 显示的类型名称
          position: "bottomleft",// 显示位置
          emptyString: "No wind data",// 没有数据时显示的文字
          showCardinal: true,
          speedUnit: 'm/s', // 速度单位
          speedString: 'Speed', // 速度标签
        },
        id: id,
        data: [],//风向数据
        minVelocity: 0, // 最小速率
        maxVelocity: 16, // 最大速率
        velocityScale: 0.1, // 风速比例 (粒子的小尾巴长度)
        particleAge: 90, // 粒子在再生之前绘制的最大帧数
        particleMultiplier: 1 / 2000, // 粒子的数量
        lineWidth: 2, // 粒子的粗细
        frameRate: 10, // 定义每秒执行的次数
        // colorScale: ['#00BFFF'], //表示所有速度值都用相同的颜色显示
        colorScale: ["rgb(224, 247, 171)", "rgb(252,150,75)", "rgba(251, 147, 103, 0.9)", "rgba(251, 137, 88, 0.9)", "rgba(249, 135, 78, 0.9)"]// 定义颜色渐变，用于根据速度值映射不同的颜色
      })
 map.addLayer(velocityLayer);//添加到地图中

三、风向数据

https://github.com/onaci/leaflet-velocity/archive/refs/heads/master.zip 下载官方包，文件夹路径\leaflet-velocity-master\demo\wind-global.json。