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分量数据]

    }

]

 

转载自:https://blog.csdn.net/qq_35131811/article/details/82761238

You may also like...