Leaflet学习，全球风场图的绘制（earth全球风场）

风场图，指根据风速风向数据进行渲染，以表征空气流动方向、流动速度的一种动态流场图。

今天我们基于Leaflet的风场图插件来实现；

插件的地址是：https://www.npmjs.com/package/leaflet-velocity

在【src】文件夹下的main.js中进行引用；

风场的json文件，我们使用jquery的getJSON获取，具体的代码如下：

loadWind () {
 $.getJSON("../../static/wind.json", data => {
 this.velocityLayer = L.velocityLayer({
 displayValues: true,
 displayOptions: {
 velocityType: 'Global Wind',
 position: 'bottomleft',
 emptyString: 'No velocity data',
 angleConvention: 'bearingCW',
 displayPosition: 'bottomleft',
 displayEmptyString: 'No velocity data',
 speedUnit: 'kt'
 },
 data: data,
 maxVelocity: 10
 });
 this.velocityLayerGroup.addLayer(this.velocityLayer)
 this.velocityLayerGroup.addTo(this.map)
 })
 }

wind.json文件结构如下：

为了在缩放和移动时，地图加载风场图缓慢问题，我们可以在移动或者缩放开始时移除图层，等移动和缩放结束后再加载图层；

最后，来看一下最终的效果；