leaflet实现动态地图风场效果

leaflet风场插件

首先,这里需要用到一款leaflet插件,插件来自github,插件地址:https://github.com/danwild/leaflet-velocity(感谢作者开源贡献)

其次,本文的意义主要在于记录对上面插件的使用方法的个人理解、以及对风场数据源结构的理解,本文最后会附有本文示例代码的下载链接,如果需要下载插件,请移步github

言归正传,有了上面的插件,实现风场效果一切都变得简单。

示例代码

// 初始化地图,返回一个map对象
function initMap(){
    var Esri_DarkGreyCanvas = L.tileLayer(
        "http://{s}.sm.mapstack.stamen.com/" +
        "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
        "{z}/{x}/{y}.png",
    );


    map = L.map('map', {
        layers: [Esri_DarkGreyCanvas]
    });
    
    map.setView([33, 118], 11);
    return map;
}

// 生成一个wind图层并返回
function windLayer(data){
    var velocityLayer = L.velocityLayer({
        displayValues: true,
        displayOptions: {
            velocityType: 'GBR Wind',
            displayPosition: 'bottomleft',
            displayEmptyString: 'No wind data'
        },
        data: data,
        minVelocity: 0, //Velocity:速率
        maxVelocity: 10,
        velocityScale: 0.005,
        particleMultiplier: 1 / 300,//粒子的数量
        lineWidth: 2,                     //粒子的粗细
        frameRate: 15,                      //定义每秒执行的次数
        colorScale: ["rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)"]
    });
    return velocityLayer;
}
// 立即执行
(function(){
    var map = initMap();
    var data = '/static/data/windydata.json';
    $.getJSON(data).done(function(data){
        var layer = windLayer(data);
        layer.addTo(map);
    })
})()

结果

动态风场

插件使用方法

L.velocityLayer

如上述代码中windLayer函数中所示,L.velocityLayer来自插件中的一个方法,它New一个L.VelocityLayer(options)对象,options中包含如下参数:

     displayValues: true,
            displayOptions: {
                velocityType: 'GBR Wind',
                displayPosition: 'bottomleft',
                displayEmptyString: 'No wind data'
            },
            data: data,//数据源
            minVelocity: 0, //Velocity:速率
            maxVelocity: 10,
            velocityScale: 0.005,
            particleMultiplier: 1 / 300,//粒子的数量
            lineWidth: 2,                     //粒子的粗细
            frameRate: 15,                      //定义每秒执行的次数
            colorScale: ["rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)"]

其中,

  • data:

(必要参数),为数据源,有一定的格式要求,后面会来分析

  • velocityScale:

改变该值会改变粒子的运动速度,值越大越快

  • particleMultiplier:

控制单位面积内的粒子数量,分母越大粒子越稀疏

  • lineWidth:

控制粒子的粗细,值越大越粗;

  • frameRate:

粒子刷新频率;

  • colorScale:

颜色数组,控制粒子的颜色,映射在粒子的向量值上。

数据源

数据结构

[
    {
        header: {
            dx: 1
            dy: 1
            la1: -7.5
            la2: -28.5
            lo1: 143
            lo2: 156
            nx: 14
            ny: 22
            parameterCategory: 2
            parameterNumber: 2
            parameterNumberName: "eastward_wind"
            parameterUnit: "m.s-1"
            refTime: "2017-02-01 23:00:00"
        },
        data:[num1,num2,....]
    },{
        header{
            结构同上
        },
        data:[.....]
    }

]

数据源为json格式,内容可以看作是一个数组里包含了两个对象,每个对象分header和data两部分。
header用以定义网格,
其中:
dx、dy网格间距,
nx、ny网格数量,总网格数量= nx * ny = data.length;
数据表达
data中记录了在正东方向的风速值,每个值对应网格上一个点。
第二部分header和第一个基本相同,只是代表风速方向的差异。
如此,数据中记录了每个网格点上的正北方向、正东方向的风速值,两个值进行向量加运算,即该点的风速向量。

完整示例代码下载(包含数据):
leaflet风场示例

  • 1
    点赞
  • 20
    收藏
  • 打赏
    打赏
  • 23
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 23

打赏作者

此爱如少年

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值