vue leaflet实现动态风场

功能说明

气象数据动态展示，包括压力场、风场等。效果如图：

实现方式

1. 安装leaflet
2. 安装leaflet-velocity
3. 引入依赖
4. 初始化地图
5. 加载气象数据，初始化风场图层
6. 数据格式及效果配置

安装leaflet

npm install leaflet

安装leaflet-velocity

npm install leaflet-velocity

引入依赖

import "leaflet/dist/leaflet.css";
import "leaflet-velocity/dist/leaflet-velocity.css";
import L from "leaflet";
import velocityLayer from "leaflet-velocity/dist/leaflet-velocity";

初始化地图

 initMap() {
      let map = L.map("mapContent", {
        minZoom: 2,
        maxZoom: 18,
        center: [35.96022296929672, 103.97460937500001],
        zoom: 5,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      });
      this.map = map; //data上需要挂载
      window.map = map;
      let dtL = L.tileLayer("http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}");
      dtL.addTo(map);
    }

加载气象数据，初始化风场图层

$.getJSON("wind-global.json", function(data) {
  var velocityLayer = L.velocityLayer({
    displayValues: true,//是否显示当前鼠标移动位置，风场信息
    displayOptions: {//显示信息配置
      velocityType: "Global Wind",
      displayPosition: "bottomleft",
      displayEmptyString: "No wind data"
    },
    data: data,//数据  格式可参照
    maxVelocity: 15
  });

  velocityLayer.addTo(map);//添加到图上
});

效果配置

数据格式

效果配置参数

一般只需要调整maxVelocity、velocityScale就能实现调整

minVelocity // velocity at which particle intensity is minimum (m/s)

maxVelocity  // velocity at which particle intensity is maximum (m/s)

velocityScale  // scale for wind velocity (completely arbitrary--this value looks nice)

particleAge  // max number of frames a particle is drawn before regeneration

lineWidth // line width of a drawn particle

particleMultiplier // particle count scalar (completely arbitrary--this values looks nice)