使用气象、环境类空间数据绘制等值线通常是由 NCL、Python 来做，在一些场景中：

你也许需要使用纯 Javascript 来做这件事。本文尝试根据空间中的一组散点来绘制等值线图（或色斑图）。

Generated by carbon

基本流程就是这样一串操作 —— 散点（Points）经过插值、等值线绘制、裁剪和渲染展示。按照 turfjs 的哲学，各个函数间传递GeoJSON 数据。

一般业务数据往往是一个数组，大概是这样

你需要把 data 转为一组 feature。 array.map() 大法好~

你没有业务数据？ 那就随机来一些

turf.interpolate() 提供了基于 IDW（反距离权重）算法的将数据插值为格点的方法。插值的精度是由第二个参数与 interpolate_options.units 共同决定的，单位支持 degrees, radians, miles, or kilometers，IDW 要为每个格点计算所有散点的权重，计算规模是 (散点数 * 格点数)，所以要在精度与性能间做好平衡。 我们将之前的散点（points）代入

这一步基于插值获得的格点绘制等值区域，并为区域配置颜色。turf.isobands() 根据 zProperty 分段，形成一些 MultiPolygon。

到这步，你就有了覆盖整个格点的色斑图。

这一步，我们利用准备的边界来裁剪整个色斑图。这里要用到 turf.intersect()，根据文档，这里输入的参数要 Feature ，而我们拿到的是 MultiPolygon，需要先 flatten() 处理一下。

之后对每个 Polygon 做一次 intersect() 操作。

色斑图绘制之后，可能会生成一些非法 Polygon ，例如 在 hole 里存在一些形状（听不懂？去查一下 GeoJSON 的规范），我遇到的一个意外情况大概是这样，这种 Polygon 在做 intersect() 操作的时候会报错，所以在代码中做了个容错操作。解决的方法通常就是做一次 turf.buffer() 操作，这样可以把一些小的碎片 Polygon 清理掉。

这个操作的计算量很大，在使用精细边界时，运行耗时甚至超过插值过程，所以如果仅仅是为了渲染一个边界范围内的色斑图，那建议利用 turf.mask() 做一个遮罩，在 WebGIS 引擎里叠加到色斑图层之上，可以达到预期的效果。

最后一步工作就是形成的色斑 GeoJSON 叠加到地图上了，这里使用 MapBox 来实现，利用其 expressions 功能，可以很便捷的实现一些样式渲染和交互效果。

综上，通过一串操作，我们使用 turfjs 实现了散点数据的等值线绘制和渲染，最终的效果请访问 Codepen 。对比在 Python 或 NCL， Javascript 虽然完成了任务，但略显业余，比如，在 Javascript 生态中，达到业务应用水平的插值的算法实现非常少。性能方面，本文给出的方案在浏览器中表现只能应对非常有限的数据规模，仍可以通过空间数据索引、控制插值计算规模等方法进行优化。