leaflet实现动态地图风场效果

原创

此爱如少年

修改于 2019-07-05 09:41:07

5.4K0

修改于 2019-07-05 09:41:07

文章被收录于专栏：地图可视化地图可视化地图可视化

leaflet风场插件

首先，这里需要用到一款leaflet插件，它是一个js文件，插件地址：https://download.csdn.net/download/u012413551/11267433

有了它，一切都变得简单。

示例代码

// 初始化地图，返回一个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风场示例(https://download.csdn.net/download/u012413551/11267442）

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html