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

 文章版权由做者李晓晖和博客园共有，若转载请于明显处标明出处：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.成果展现    

   

 

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

                                                                           若是您以为本文确实帮助了您，能够微信扫一扫，进行小额的打赏和鼓励，谢谢 ^_^