图形渲染中,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);

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

[原创.数据可视化系列之十三]idw反距离权重插值算法的javascript代码实现的更多相关文章

  1. PIE SDK反距离权重插值算法

      1.算法功能简介 反距离权重 (IDW) 插值使用一组采样点的线性权重组合来确定像元值.权重是一种反距离函数.进行插值处理的表面应当是具有局部因变量的表面.此方法假定所映射的变量因受到与其采样位置 ...

  2. [原创.数据可视化系列之五]韩国"萨德"系统防御图

    自从7月8日美国和韩国共同宣布将在韩国部署萨德反导系统后,韩国国内对此事的巨大争议以及本地区一些国家的强烈不满情绪在持续发酵.“萨德”(THAAD)全称“末段高空区域防御系统”,是美国导弹防御局和美国 ...

  3. [原创.数据可视化系列之八]使用等d3进行灰度图转伪彩色

    对灰度图进行彩色化是数据可视化中常见的需求,使用d3在客户端比较容易实现,本文使用d3生成图片,并显示: 代码如下: 代码中首先下载数据文件,然后设定d3的色带信息,生成一个空白的canvas元素,并 ...

  4. [原创.数据可视化系列之三]使用Ol3加载大量点数据

    不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI ...

  5. [原创.数据可视化系列之十二]使用 nodejs通过async await建立同步数据抓取

    做数据分析和可视化工作,最重要的一点就是数据抓取工作,之前使用Java和python都做过简单的数据抓取,感觉用的很不顺手. 后来用nodejs发现非常不错,通过js就可以进行数据抓取工作,类似jqu ...

  6. [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布

    基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案. 很久之前用过skyline,使用CS居 ...

  7. [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据

    在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的 ...

  8. [原创.数据可视化系列之六]使用openlyaers进行公网地图剪切

    进行地图开发的过程中,我一般使用天地图或者微软的地图作为地图,因为这两种地图的经纬度偏差最小,基本可以满足用户需求,比如: 不用说,都是全部地图,这也是最常用的一种方法. 但是用户说,我只看大连的地图 ...

  9. 反距离权重插值inverse distance weighting,IDW

    反距离权重 (IDW) 插值显式假设:彼此距离较近的事物要比彼此距离较远的事物更相似.当为任何未测量的位置预测值时,反距离权重法会采用预测位置周围的测量值.与距离预测位置较远的测量值相比,距离预测位置 ...

随机推荐

  1. python2与python3编码问题

    python2: UnicodeDecodeError: 'ascii' codec can't decode byte 0xc4 in position 33: 解决办法: 在报错的页面添加代码:  ...

  2. iOS workspace 依次编译多个工程

    目的:当我封装一个framework的时候,需要检验当前的改动,但是又不想编译完framework,又要编译测试工程. 步骤: 1. 选择测试工程 2. Edit Scheme 3. 选中Build- ...

  3. JavaScript定时机制、以及浏览器渲染机制 浅谈

    昨晚,朋友拿了一道题问我: a.onclick = function(){ setTimeout(function() { //do something ... },0); }; JavaScript ...

  4. 浅谈Android的Activity运行流程(生命周期)

    关于Android的Activity运行流程,我们可以写一些程序来直观的查看Activity的运行流程.在这里我们使用Log工具来获取Activity运行日志.假如我们新建一个Android项目,Pr ...

  5. Delphi判断一个字符是否为汉字的最佳方法

    //判断字符是否是汉字 function IsHZ(ch: WideChar): boolean; var i:integer; begin i:=ord(ch); if( i<19968) o ...

  6. Promise基础

    前言: ES2015将Promise引入语言规范,包括fetch等在内的API也构建在Promise之上.作为让js摆脱“回调地狱”的重要一环和众多框架中的重要基础设施之一,学习如何自己实现一个Pro ...

  7. U盘安装系统

    http://www.ushendu.com/usdpzxt/1566.html http://www.ushendu.com/plus/view.php?aid=1571 http://www.ud ...

  8. Canvas贝塞尔三级曲线

    两个控制点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. Bootstrap入门(十二)组件6:导航标签页

    Bootstrap入门(十二)组件6:导航标签页   1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单   先引入本地的CSS文件和JS文件(注:1. ...

  10. substring和substr、$.extend()、$.fn.extend()、(function($){….})(jQuery)的简易讲解

    1.    JS中substring与substr的区别 Substring: 该方法可以有一个参数也可以有两个参数. l  一个参数: 示例: var str="Olive": ...