vue 利用leaflet实现leaflet-velocity 风场

最终效果图如下：

第一步：安装leaflet
命令：npm install leaflet
第二步：引用
import L from ‘leaflet’
第三步：安装leaflet-velocity
npm install leaflet-velocity
第四步：引用
import ‘leaflet-velocity/dist/leaflet-velocity.css’
import ‘leaflet-velocity/dist/leaflet-velocity’

  //页面代码
  <template>
	<a-spin :spinning="spinning" size="small">
		<div id="map" style="margin:0 auto;width: 100%;height: 800px;"></div>
	</a-spin>
</template>


  //风场样式引用
  var Esri_DarkGreyCanvas = L.tileLayer(
       "http://{s}.sm.mapstack.stamen.com/" +
       "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
       "{z}/{x}/{y}.png",
   );
   //生成风场实例
   var velocityLayer = L.velocityLayer({
          displayValues: true,
           displayOptions: {
               velocityType: 'GBR Wind',
               displayPosition: 'bottomleft',
               displayEmptyString: 'No wind data'
           },
           data: this.datas,//风场数据
           minVelocity: 0, //Velocity：速率
           maxVelocity: 10,
           velocityScale: 0.005,
           particleMultiplier: 1 / 1200,//粒子的数量
           lineWidth: 5,                     //粒子的粗细
           frameRate: 15,                      //定义每秒执行的次数
           colorScale: ["rgb(47,112,47)","rgb(47,112,47)","rgb(47,112,47)","rgb(47,112,47)","rgb(47,112,47)"]
       });
  //添加风场样式至地图中
   this.map = L.map('map', {
     center: [38.065, 114.610],
     zoom: 13,
     layers: [Esri_DarkGreyCanvas]
   })
   // 风场实例添加到地图上
   velocityLayer.addTo(this.map)
   注：this.datas为风场数据 格式类型可参照wind-js-server 的grib2json格式
   至此结束，风场数据已经可以展示在地图中！
   有什么不理解的地方或者报错的地方欢迎留言