leaflet實現動態地圖風場效果

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風場示例