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

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 "
  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值