zoukankan      html  css  js  c++  java
  • [原创.数据可视化系列之十三]idw反距离权重插值算法的javascript代码实现

    图形渲染中,idw反距离权重插值算法是一个应用非常广泛的方法,但是js实现的比较少,目前实现一个:

    //idw算法
    //输入[[x:0,y:0,v:0],[x:0,y:0,v:0],[x:0,y:0,v:0]]
    function idwcomputer(datas,result){
        if(datas.lenght<3) return result;
        var m0=datas.length;
        var m1=result.length;
        
        //console.info(datas);
        
        //距离列表
        var r=[];
        
        for(var i=0;i<m1;i++){
            for(var j=0;j<m0;j++){
                  var tmpDis = Math.sqrt(Math.pow(result[i].x - datas[j].x, 2) + Math.pow(result[i].y - datas[j].y, 2));
                  r.push(tmpDis);
            }
        }
        
        //插值函数
    
        for (var i = 0; i < m1; i++)
        {
            //查找重复
            var ifFind = false;
            for (var j = m0 * i; j < m0 * i + m0; j++)
            {
                if (Math.abs(r[j]) < 0.0001)
                {
                    result[i].v = datas[j - m0 * i].v;
                    ifFind = true;
                    break;
                }
            }
    
            if (ifFind) continue;
    
            var numerator = 0;
            var denominator = 0;
    
            for (var j = m0 * i; j < m0 * i + m0; j++)
            {
                numerator += datas[j - m0 * i].v / (r[j] * r[j]);
                denominator += 1 / (r[j] * r[j]);
            }
          
            result[i].v = numerator / denominator;
        }
        return result;
     
    }

    调用方法如下:

    var idwdatas=[],idwresult=[];
    //填充计算点的位置

    //下边的数据从后端返回
    $.each(result.result,function(i,val){
    idwdatas.push({"x":val.pointLongitude,"y":val.pointLatitude,"v":val.value});
    });
    //计算需要范围的结果的经纬度坐标

    //需要插值的格点坐标。这个通过等分经纬度实现的,
    idwresult=countgridlocal(grid);
    //返回idw计算结果
    idwresult=idwcomputer(idwdatas,idwresult);
    console.info(idwresult);

    注意,前端不适合使用大量的这个算法,我这个是格点用的插值。

  • 相关阅读:
    Java中的线程安全问题
    谈谈你对Spring的理解
    Word 2016问题导致无法创建其他博客账号
    JS中 Cookie、 LocalStorage 与 SessionStorage
    CSDN代码块显示颜色
    Java中创建线程的两种方式
    毕业设计每日博客——第五周1
    毕业设计每日博客--第四周5
    毕业设计每日博客--第四周4
    毕业设计每日博客--第四周3
  • 原文地址:https://www.cnblogs.com/songsgroup/p/6439966.html
Copyright © 2011-2022 走看看