前端基于Canvas生成等值面的方案

时间:2021-12-15 04:06:58

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

1.背景

在之前的项目中,我们做过基于PM2.5的站点监测数据对全区域进行插值渲染来可视化预测,其实现方案为后台工具进行定时生成插值栅格图,对应文章为:《WebGIS中等值面展示的相关方案简析》(http://www.cnblogs.com/naaoveGIS/p/6145339.html)。但是该方案依赖AE,且为定时生成等值面(也可以改造为实时,但是因为是工具类型,对并发支持有瓶颈)。

随后,我又研究了基于前端库Turf.js将等值面转移到前端生成,基本逻辑为先将插值范围格网化,分别对每个格子的中心点进行克里金插值,最后利用turf生成等值面,然后等值面和插值范围做拓扑相交判断获取相交面。该方案对应的文章为:《WebGIS中前端JS生成等值面方法探讨》(http://www.cnblogs.com/naaoveGIS/p/7346299.html)。但是,由于turf内部存在bug,当等值面非常复杂比如包含多个内环等情况时,其生成的等值面有误。

基于此,我们着手开始研究新的等值面生成方案。经搜寻资料,一种是可以基于wcontour在服务端生成,另一种是在博友GIS之家中发现的开源库krigingjs来生成。考虑到预报的实时性,以及对服务器压力的减轻,我们选用了采用krigingjs前端生成方案。

2.集成和优化

2.1集成

在集成中,我们重点需要解决的是地理坐标与屏幕坐标的转换,以及根据地图的缩放等作出相应的重绘,这里不做详细描述。

2.2优化

我们实际试用中发现有如下问题:

a.我们的区域边界比较复杂,每次裁剪绘制时效率很低,容易出现卡顿。

b无法对等值面进行阈值指定颜色的设置。

c.插值间隔参数对插值效率和效果影响很大。如果设置小了,在地图分辨率很高时,将直接导致绘制效率下降卡顿。如果设置大了,容易出现绘制锯齿状。

针对以上问题,我们分别做了优化,基本重写了krigingjs中的绘制代码:

a采用多线程进行插值计算,不影响前端其他操作。

b.点面判断不再通过矢量拓扑关系去判断,而是改成预先给canvas进行二值化赋值,区域内是1,非区域内是0,在逐像素计算绘制时通过此二值来判断是否进行透明设置。

c.插值大小采用地图各级别中的居中分辨率来计算。

3.成果展示

前端基于Canvas生成等值面的方案

                       -----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

                                 前端基于Canvas生成等值面的方案

相关文章