leaflet 风场流线效果 超级无敌简单！！包教包会（Vue和原生js版本）

概述：利用leaflet官网提供的插件 leaflet-velocity.js ，实现风场流线效果，经测试响应速度、数据流畅程度都比第三方插件要好。

html+js

1. html页面引入leaflet-velocity.js
2. 填写参数

options ={
    displayValues: true,
    displayOptions: {
       velocityType: '海面风',
       displayPosition: 'bottomright',
       displayEmptyString: 'No wind data'
    },
    // 以下为控制参数，后面为默认值
    minVelocity: 0,  // 粒子最小速度（ m/s ）
    maxVelocity: 10,  // 粒子最大速度（ m/s ）
    velocityScale: 0.05,  // 风速的比例 ( 粒子的小尾巴长度 )
    particleAge: 90,  // 粒子在再生之前绘制的最大帧数
    lineWidth: 1,  // 绘制粒子的线宽
    particleMultiplier: 1 / 300,  // 粒子计数标量（ 粒子密度 ）
    frameRate: 15,  // 每秒所需的帧数
    colorScale: [],  // 定义自己的 hex / rgb 颜色数组 ( 粒子颜色 )
}

3. 得到数据文件并调取生成流线方法

$.getJSON("wind.json",
   function (data) {
        options['data']=data;
        L.velocityLayer(options).addTo(map)
  });

这里是一个实现传送门，自己写的一个demo 风场流线-js demo

---

Vue

1. npm引入leaflet
2. 手动引入 leaflet-velocity.js
3. 同上，写options
4. 利用数据生成流线

 L.velocityLayer(
    Object.assign(this.options, {data: data}))
    .addTo(viewer)