前端实现克里金插值分析(二)
作者:yangjunlin
在上一篇文章中我们已经使用了像素法实现克里金插值的方式,但是问题也就随之抛了出来。1.第一点,在反距离权重插值的时候,因为处理的数据量大会直接导致主线程卡,导致用户体验不好,2.第二点,分析过程中 zoom级别改变,坐标转像素的值的计算方式也会发生变化,这样就会导致(坐标转像素坐标,像素坐标转坐标)会出现错误结果。
我们先分析一下第一个问题,主线程卡顿的问题其实很好解决, Web Worker 可以创建一个独立于主线程运行的子线程。可以将一些【可能会阻塞主线程的操作】,丢在 Worker 里去单独执行。因此我们可以直接将卡住进程的反距离权重插值分析方法直接抛到webworker里面即可
再看下第二个问题,既然像素没法用,那么我们就自己搞‘像素’ 也就是自己画格子。其实坐标到像素仔细来看可以认为是一种投影,那么我们是不是也能自己搞一套投影了。从当前我的数据的坐标系来看,我用的mapboxgl3857的web墨卡托投影的坐标,全球的比例级别可直接认为是1:1,中国地区是没有被压扁的。我的思路是这样的我们也可以画一个1:1的范围是正方形的图形,然后对里面的区域再进行[m,m]的小网格划分。3857web墨卡托与该正方形的范围基本上就是成一个k比例的,也就是说,我们不用复杂的投影计算,只需要简单的算出每个单位的经纬度所占的小格子数就可以,这样就大大降低了难度。
【第二问题的解决】下面我将带着大家先搞第二个问题,用自己创建网格的方式来做前端克里金插值分析
- 首先我们先搞正方形的范围,我采取的方案是将分析范围矩形变为正方形,这个很简单直接用矩形的长边作为正方形的边长即可,然后拿到改边的长度
let width=bbox[2]-bbox[0];let height=bbox[3]-bbox[1];length=width-height>0?width:heightreturn length;
- 确定好网格的大小,我这里使用是的1000*1000
//形成1000*1000的网格。let cw=1000,ch=1000;
- 拿到网格和目前坐标系单位的比例关系
let k=cw/lenght;
- 将气象点坐标,放在几何范围左下为原点的位置上,然后进行所谓的‘投影’–将坐标系单位,转为网格位置,这样我们就能将我们画好的网格和网格坐标系下的分析点的位置关联起来,也就是说后面可以进行反距离权重分析了,将网格上的每个小格子上都填上值
//将几何范围放到左下为原点的位置上let x=data[i].x-xoffset;let y=data[i].y-yoffset;//进行投影,将局部 let posx=x*k;let posy=y*k;
- 5.进行反距离权重,也就是填满小格子的操作(前文有描述,这里不在写)
- 然后利用d3-couter得到等值线,特别需要注意的是这里得到的只是格网单位上的值,而不是真实地理位置上的值,我们需要进行一个’反投影’并再加载几何范围的最小x和最小y即可
let x= coordinates[i][j][m][0]*1/k+box[0]
let y=coordinates[i][j][m][1]*1/k+box[1]
coordinates[i][j][m] = [x, y]
- 剩下的就只是相交和渲染了与上文所描述的一致我们现在看下效果,结果发现有偏移,这是为啥呢
其实很简单,就是格子画的不够小,导致分析结果有误差,现在只要我们在细化下网格搞一个5000*5000的,得到的结果非常的完美
与像素化的分析结果基本是一致的。但是现在这个我们已经可以控制你划分的格网大小了
- 剩下的就只是相交和渲染了与上文所描述的一致我们现在看下效果,结果发现有偏移,这是为啥呢
【第一个问题解决】这个问题就比较简单了,直接搞个子线程将反距离权重交给他来做即可直接上代码
- 首先创建worker.js,并进行监听,监听主线程传过来进行反距离分析的数据data,然后再将结果数据返回给主线程
//Worker.js
self.onmessage = function ({data}) {const resdata=IDW(data['data'],data['cw'],data['ch'])self.postMessage({ resdata })
}
self.onerror = function (err) {throw new Error(err)
}
//主进程:
//webworker
const worker = new Worker('./worker.js', {name: 'my-worker'
})
//主线程向子线程发数据
worker.postMessage({data: pxdata.data,cw: cw,ch: ch,contours
})
// 监听到子线程返回的数据
worker.onmessage = ({data
}) => {const idwdata = data['resdata'];}
然后将拿到结果在进行d3分析,解析渲染即可,这样就解决因为反距离权重分析的时间长导致主进程卡在而导致无法正常使用地图的问题。
后言
当然这个只是我的一个demo,代码肯定还有很多不完善的地方,这两篇文章只是提供给大家做前端插值分析的一个小方向,如果大家有更多的更优的解决方案,欢迎大家在评论里讨论
前端实现克里金插值分析(二)相关推荐
- matlab 克里金插值,克里金插值(arcgis克里金插值步骤)
1. 克里格方法概述 克里格方法(Kriging)又称空间局部插值法,是以变异函数理论和结构分析为基础, 在有限区域内对区域化变量进行无偏最优估计的一种方法,是地. 克里金差值最后的出来的克里金误差有 ...
- gstat | 空间插值(二)——克里金插值之普通克里金
说明:昨天的推文误把可吸入颗粒物当作PM2.5,实应该为PM10,这里修正后重发. 从本篇开始计划分三篇介绍克里金插值.与反距离权重插值不同,克里金插值是无偏估计,其中也涉及到模型估计.本篇先对普通克 ...
- 克里金插值详细步骤_openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇(附源码下载)...
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- 基于主动学习和克里金插值的空气质量推测
基于主动学习和克里金插值的空气质量推测 常慧娟, 於志文, 於志勇, 安琦, 郭斌 西北工业大学计算机学院,陕西 西安 710072 福州大学数学与计算机科学学院,福建 福州 350108 摘要 ...
- ArcGIS之克里金插值教学
本文来自:GIS科研实验室 基本概念 1.什么是克里金插值? 克里金插值又称空间局部插值法,是以半变异函数理论和结构分析为基础,在有限区域内对区域化变量进行无偏最优估计的一种方法,是地统计学的主要内容 ...
- gstat | 空间插值(三)——克里金插值之泛克里金和简单克里金
本篇接着上篇继续介绍克里金插值.首先加载相关工具包和上篇使用的示例数据: library(gstat) library(sf) library(tidyverse) library(readxl) l ...
- ArcGIS中使用协同克里金插值(co-kriging interplotation )对气象数据插值
ArcGIS中如何使用协同克里金插值(co-kriging interplotation )对气象数据插值 ANUSPLIN气象站点数据插值局限性 百度搜索ArcGIS 克里金插值 搭建梯子搜索Arc ...
- GNSS速度场简易MATLAB克里金插值
引言 由于GPS观测点分布离散且不均匀,在进行应变计算和分析前,需要对速度场进行插值,获得均匀分布的速度场.一般采用Kriging 法估计在均匀网格节点上的速度值,需要下载克里金MATLAB工具箱 ...
- 克里金插值(Kriging)在MATLAB中的实现(克里金工具箱)
一,直接献上克里金插值MATLAB工具箱 链接:https://pan.baidu.com/s/1p0lt2G8KQ-els7Dyw5jPFg 提取码:wcss 下载后将该程序添加到MATLAB安装文 ...
最新文章
- 每天写的叫工作日志,每周写的总结叫周报,每月写的叫月报
- telegraf监控mysql数据库_influxdb+grafana+telegraf 监听性能数据 (完整详细版)
- Shell脚本个例二
- Spring Boot——开发新一代Spring Java应用
- 持续集成工具Jenkins看这篇就够啦!
- 单点系统架构的可用性与性能优化
- 在html中2em是多少px,在css设置单位px、em、rem哪个更好?
- POJ 放苹果问题(递归)
- normalize函数_提取棋盘格角点函数解析
- 软件工程实践小队Scrum Meeting
- Java Socket编程中使用ObjectOutputStream 和 ObjectInputStream 出现问题
- javascript-自定义对象-数组形态对象-字典形态对象
- python有什么用-我们为什么要选择学习python?学习python有什么用?
- Python 字典(Dictionary) 基本操作
- 交叉火力dsp手机调音软件_dsp教程_交叉火力dsp调音教程_教你学dsp百度云(2)
- Ubuntu、ROS、PX4常见问题及其解决办法
- 改造create-react-app 引入dva和antd
- ISTQB基础级考试资料汇总
- IBM研究院院长:量子计算“大爆发”将在十年内到来
- win10时间同步服务器修改
热门文章
- java基础项目【团队调度系统开发(需求分析、软件包结构、全部完整代码)】
- net-java-php-python-口试考试系统计算机毕业设计程序
- 2016 CPU桌面级笔记本最新天梯图对比
- mysql distribute by_Hive学习(八) 排序:order by、sort by、distribute by、cluster by
- 为什么要“除夕”,原来是内存爆了!
- kurento 6.6.0 安装部署 + 运行官网demo
- 距离矢量(D-V)和链路状态(LS)的区别(转)
- 炼丹心得|技术信仰有多重要,我们邀请到了这位大咖来聊聊
- TSMaster诊断模块之自动诊断流程
- 仓库管理如何实现扫码出入库?