Leaflet实现风场流动效果

插件下载地址https://download.csdn.net/download/qq_35131811/10674594

Leaflet实现风场流动效果

1、将leaflet-velocity相关的文件copy到项目目录下，并引用到页面里

2、新建layer并添加到map里，生成的风场效果可以通过下图所示参数进行控制，

也可以直接更改leaflet-velocity.js，如下图：

数据格式见wind-gbr.json，至此已经可以显示风场效果。

3、该插件以正南方向为正方向，可以根据实际情况自己调整方向，我这里调整为正北。该测试数据是100*100的格点数据，是经过如下方式计算UV分量之后的效果，也就是转换为正北方向之后的效果，见下图便可理解。

 

4、UV分量的计算方式

 

dir = (270.0-方向)*Math.PI/180.0)；

U = (速度* Math.cos(dir );

V = (速度* Math.sin(dir );

因为我要将方向由正南方向转为正北方向，故方向值加180，做如下处理

在做更改之后，也需要更改leaflet-velocity.js中关于风向提示的计算方式，

5、数据格式说明

[

    {

        "header":{

            "parameterUnit":"m/s",//单位

            "parameterNumber":2,//固定值

            "dx":1,//间隔 根据生产的数据自定义

            "dy":1,//间隔 根据生产的数据自定义

            "parameterNumberName":"eastward_wind",//无意义值，可默认为eastward_wind

            "la1":-6.5,// 纬度

            "la2":-18.5,// 纬度

            "parameterCategory":2,// 固定值

            "lo2":146,// 经度

            "nx":14,//数量

            "ny":22,//数量

            "refTime":"2017-02-01 23:00:00",//时间

            "lo1":133// 经度

        },

        "data":[U分量数据]

    },

    {

        "header":{

            "parameterUnit":"m/s",

            "parameterNumber":3,

            "dx":1,

            "dy":1,

            "parameterNumberName":"northward_wind",

            "la1":-6.5,

            "la2":-18.5,

            "parameterCategory":2,

            "lo2":146,

            "nx":14,

            "ny":22,

            "refTime":"2017-02-01 23:00:00",

            "lo1":133

        },

        "data":[V分量数据]

    }

]
--------------------- 
作者：高傲的孤独 
来源：CSDN 
原文：https://blog.csdn.net/qq_35131811/article/details/82761238 
版权声明：本文为博主原创文章，转载请附上博文链接！