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

本文主要是介绍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)

这篇关于leaflet 风场流线效果 超级无敌简单！！包教包会（Vue和原生js版本）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---