vue leaflet实现动态风场
目录
功能说明
气象数据动态展示,包括压力场、风场等。效果如图:

实现方式
- 安装leaflet
- 安装leaflet-velocity
- 引入依赖
- 初始化地图
- 加载气象数据,初始化风场图层
- 数据格式及效果配置
安装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)
Interested in buying buy roaccutane? Check out buy roaccutane for trusted suppliers.
404是啥意思