html绘制平滑等值面,前端基于Canvas生成等值面的方案

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.成果展示