vue中leaftet插件velocity加载风流场

引入及所需数据格式

1、安装引入leaflet
import * as L from ‘leaflet’

2、安装引入leaflet-velocity
import ‘leaflet-velocity/dist/leaflet-velocity.css’
import ‘leaflet-velocity/dist/leaflet-velocity’

3（1）这里是一份download的json数据文件
import windJson from ‘/static/newjs/wind-global.json’
数据格式如下

[
    {
        "header": {
            "numberPoints": 65160, // data.length
            "winds": "true",
            "nx": 360,
            "ny": 181,
            "lo1": 0.0,
            "la1": 90.0,
            "lo2": 359.0,
            "la2": -90.0,
            "dx": 1.0,
            "dy": 1.0
        },
        "data": [], // u分量
    },
    {
        "header": {}, // 同上
        "data": [], // v分量
    },
]

（2）如果数据来源是后缀为.json的url，需要jquery或者axios去解析
import * as $ from ‘jquery’
$.getJSON(‘***.json’, (data: any) => {})
或者
import axios from ‘axios’
axios({ url: url, method: ‘get’,
}).then((res) => {})

引用插件，配置参数

 this.velocityLayer = L.velocityLayer({
		displayValues: true,
		displayOptions: {
			velocityType: '风向/风速',
			displayPosition: 'bottomleft',
			displayEmptyString: 'No wind data',
			speedUnit: 'm/s',
			speedString: 'Speed',
		},
		data: windJson, // 风场数据
		minVelocity: 0, // Velocity：速率
		maxVelocity: 16,
		velocityScale: 0.08, // 风速的比例 ( 粒子的小尾巴长度 )
		particleAge: 90, // 粒子在再生之前绘制的最大帧数
		particleMultiplier: 1 / 2000, // 粒子的数量
		lineWidth: 2, // 粒子的粗细
		frameRate: 30, // 定义每秒执行的次数
		colorScale: ['#fff', '#fff'],
})

添加图层至地图

const map: any = this.$refs.map
const mapObject = map.mapObject
this.velocityLayer.addTo(mapObject)

使用wind-global数据显示无误，自己的数据流场显示错误

——试着解决（但事实与想法相差甚远）

数据来源正确、数据格式正确、为何显示出入较大。
查阅资料得知uv分量的方向可能有所出入，所以从uv分量入手

风速风向与uv值分量

// uv值转换（横向二维数据转换成纵向）
const dataJson = JSON.parse(JSON.stringify(data.data))
const newUV = dataJson[0].map(function(col: any, i: any) {
	return dataJson.map(function(row: any) {
		return row[i];
	})
});
// console.log(newUV)
const newSD = []as any // 风速与风向数组
const changeUV = []as any
newUV.map((e: any) => {
	const windAbs = Math.sqrt(Math.pow(e[0], 2) + Math.pow(e[1], 2))
	const windDirTrigTo = Math.atan2(e[0]/ windAbs, e[1]/ windAbs)
	const windDirTrigToDegrees = windDirTrigTo * 180 / Math.PI
	const windDirTrigFromDegrees = windDirTrigToDegrees + 180
	const u = windAbs < 0 ? 0 : windAbs * Math.cos((270 - windDirTrigFromDegrees) * Math.PI / 180)
	const v = windAbs < 0 ? 0 : windAbs * Math.sin((270 - windDirTrigFromDegrees) * Math.PI / 180)
	newSD.push({windAbs, windDirTrigTo, windDirTrigToDegrees, windDirTrigFromDegrees, u, v})
	changeUV.push([u, v])
 })
// console.log(newSD)
// console.log(changeUV)
//（纵向二维数据转换成横向）
const resultUV = changeUV[0].map(function(col: any, i: any) {
	return changeUV.map(function(row: any) {
		return row[i];
	})
 });
// console.log(resultUV)
得到最新的data.data放入原对象

结果就是。。。。。。*离谱不能用 *
hhh
不过后续还是成功了
（用了大神的js插件，后续使用在vue项目中）
思路就是利用leaflet的LayerGroup扩展的一个子类
L.FlowWindLayer= L.LayerGroup.extend({})
等待后续更新。。。。。。