高质量编码-克里金插值地图可视化(高级技巧)

上文介绍的克里金插值地图可视化是由各个站点的经纬度和PM2.5值，使用kriging.js 生成canvas，然后将canvas叠加到地图上。

除了克里金插值算法需要的krigingModel(使用'exponential'，还可选'gaussian','spherical')，krigingSigma(使用0)，krigingAlpha(使用100)外。要把生成的canvas合适的叠加到百度地图上，还需要许多尝试。下面介绍几个高级技巧：

1.根据合适经纬度宽度生成多个canvas同时叠加到地图上

因为坐标系投影的问题，使用kriging.js生成的canvas只根据BMap.Bounds添加BMap.GroundOverlay到地图上，纬度方向上发生很大的坐标偏移。

2.自定义分级色彩

由于kriging.plot方法生成canvas时会将颜色数组的第一个颜色和最后一个颜色对应为最小值最大值，一般上我们想自定义数值范围来分级色彩表示，这时需要在调用kriging.plot方法生成canvas时需要传入动态计算的colors数组。

3.百度地图叠加层其实为img元素，2.0版本遇到图片高度不能完全填充显示。需要覆盖img样式(#allmap img) ( height: 100%)

为避免以上三个问题需要对代码中多个变量进行调整，最后根据效果选择合适的数值。最后效果如下：