web前端利用leaflet生成粒子风场，类似windy

最新推荐文章于 2024-08-09 07:55:11 发布

weixin_34268579

最新推荐文章于 2024-08-09 07:55:11 发布

阅读量5.3k

点赞数

文章标签：前端 json ViewUI

本文介绍如何在web前端利用Leaflet库结合自定义的wind.js，实现类似windy.com的粒子风场动画效果，展示动态风向和速度信息。

摘要由CSDN通过智能技术生成

wind.js如下：

$(function() {
    var dixing = L.tileLayer.chinaProvider('Google.Satellite.Map', {
        maxZoom: 18,
        minZoom: 2
    });
    var map = L.map("map", {
        center: [33.5, 114.6],
        zoom: 10,
        maxZoom: 20,
        minZoom: 3,
        layers: dixing,
        zoomControl: false,
        attributionControl: false,
        //        crs:L.CRS.EPSG4326
    });
    map.setView([-19, 150], 5);
    //各种定义和参数
    var grid = []; //定义经纬度网格数组
    var particles = []; //存放粒子数组
    var PARTICLE_MULTIPLIER = 0.4 / 300; //粒子数量参数，默认1/300，可以根据实际调
    var max_age = 100; //定义粒子的最大运动次数
    //没有风的情况
    var NULL_WIND_VECTOR = [NaN, NaN, null];
    var min_color = 0; // 风速为0使用的颜色
    var max_color = 10; // 风速最大使用的颜色
    var linewidth = 1.5; //定义粒子粗细
    var FRAME_RATE = 35, //定义每秒执行的次数
        FRAME_TIME = 1000 / FRAME_RATE; // desired frames per second
    var galpha = 0.92; //定义透明度，透明度越大，尾巴越长
    //存放颜色的数组
    var colorScale = ["rgb(36,104, 180)", "rgb(60,157, 194)", "rgb(128,205,193 )", "rgb(151,218,168 )", "rgb(198,231,181)", "rgb(238,247,217)", "rgb(255,238,159)", "rgb(252,217,125)", "rgb(255,182,100)", "rgb(252,150,75)", "rgb(250,112,52)", "rgb(245,64,32)", "rgb(237,45,28)", "rgb(220,24,32)", "rgb(180,0,35)"];
    //粒子动画的速度，为参数乘以屏幕的像素密度开三次方
    //如果不支持像素密度，就乘以1,
    //默认0.0005
    //    var vscale = (0.01) * (Math.pow(window.devicePixelRatio, 1 / 3) || 1); // scale for wind velocity (completely arbitrary--this value looks nice)
    var vscale = 0.01;
    var animationLoop; //定义动画
    //第一步生成经纬度网格///
    $.getJSON("leaflet-velocity-master/demo/wind-global.json", function(data) {
        setTimeout(function() {
            buildGrid(data);
            map.fire("moveend");
        }, 100)
        //        bulid_grid();
        //        create_new_lizi();
        //        var then = Date.now();
        //        (function frame() {
    
        //            animationLoop = requestAnimationFrame(frame);
        //            var now = Date.now();
        //            var delta = now - then;
        //            if(delta > FRAME_TIME) {
    
        //                then = now - delta % FRAME_TIME;
        //                evolve();
        //                draw();
        //            }
        //        })();
        //      map.fire("moveend");
    })
    var lon_min, lat_min, x_kuadu, y_kuadu, ni, nj;

    function createWindBuilder(uComp, vComp) {
        var uData = uComp.data,
            vData = vComp.data;
        return {
            header: uComp.header,
            //recipe: recipeFor("wind-" + uComp.header.surface1Value),
            data: function data(i) {
                return [uData[i], vData[i]];
            }
        };
    };

    function createBuilder(data) {
        var uComp = null,
            vComp = null,
            scalar = null;
        //从这里判断出，数据中的这两个参数，必须是固定的，否则会不执行
        data.forEach(function(record) {
            switch(record.header.parameterCategory + "," + record.header.parameterNumber) {
                case "1,2":
                case "2,2":
                    uComp = record;
                    break;
                case "1,3":
                case "