leaflet实现风场动态粒子效果

---

前言

效果实现需要用到一款开源插件：leaflet-velocity，
来自Github：https://github.com/onaci/leaflet-velocity
演示地址：https://onaci.github.io/leaflet-velocity/
参考实现：https://www.windy.com/

本文只是针对个人实际项目做出的开发记录，无其他参考意义。

---

一、部分代码摘录

（一）velocity插件代码.js

风向粒子参数设置

// 粒子颜色数组为设置或只设置单值时，以下两个设置无效
// 粒子最小速度时颜色设置 
var MIN_VELOCITY_INTENSITY = params.minVelocity || 0; 
// 粒子最大速度时颜色设置 
var MAX_VELOCITY_INTENSITY = params.maxVelocity || 20;
 
// 风速比例，实际效果为粒子的拖尾长度 
var VELOCITY_SCALE = (params.velocityScale || 0.0015) * (Math.pow(window.devicePixelRatio, 1 / 3) || 1); 

// 粒子生命周期 
var MAX_PARTICLE_AGE = params.particleAge || 90; 

// 粒子的宽度
var PARTICLE_LINE_WIDTH = params.lineWidth || 1.5; 

// 粒子的密度 
var PARTICLE_MULTIPLIER = params.particleMultiplier || 0.9 / 300;
 
// 用于移动端减少粒子 
ar PARTICLE_REDUCTION = Math.pow(window.devicePixelRatio, 1 / 3) || 1.6; 

// 刷新帧率以及渲染时间，实际影响粒子速度 
// 用于控制帧的频率，越大，频率越快，例子速度越快 
var FRAME_RATE = params.frameRate || 60; 
// 渲染时间 
var FRAME_TIME = 1000 / FRAME_RATE; 

//不透明度 
var OPACITY = 1; 

//粒子颜色（单值） 
var colorScale = ["rgb(255,255,255)"]; 
//粒子颜色（数组） 
var defaulColorScale = ["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)"]; 
// 根据风俗设置粒子颜色 
var colorScale = params.colorScale || defaulColorScale; 
// 无风时默认设置 
var NULL_WIND_VECTOR = [NaN, NaN, null];

鼠标事件代码L.Control.Velocity.js

L.Control.Velocity = L.Control.extend({
   
  options: {
   
    position: "bottomleft",
    emptyString: "Unavailable",
    // Could be any combination of 'bearing' (angle toward which the flow goes) or 'meteo' (angle from which the flow comes)
    // and 'CW' (angle value increases clock-wise) or 'CCW' (angle value increases counter clock-wise)
    angleConvention: "bearingCCW",
    showCardinal: false,
    // Could be 'm/s' for meter per second, 'k/h' for kilometer per hour, 'mph' for miles per hour or 'kt' for knots
    speedUnit: "m/s",
    directionString: "Direction",
    speedString: "Speed",
    onAdd: null,
    onRemove: null
  },
  onAdd: function onAdd(map) {
   
    this._container = L.DomUtil.create("div", "leaflet-control-velocity");
    L.DomEvent.disableClickPropagation(this._container);
    map.on("mousemove", this