等值线图以及色斑图实现方式综述

Posted 2021-05-14 游侠

修改于2021/1/10

1、服务器模式

通用的方式是基于Java + Geotools + wContour在服务端处理数据，适用业务如下：

1. 大范围高密度的空间数据插值
2. 服务器端可以设置定时任务，流水线处理原始数据，生成目标数据（图片或者GeoJSON数据）

专题图输出

服务器端负责上色、出图，前端负责叠加图片展示。气象数据需要通过鼠标坐标值在服务器端获取或者通过图片像素点颜色与颜色表映射得到。缺点是不利于客户端颜色表动态设置与数据过滤。

灰度图输出

服务器端负责生成灰度图，前端根据颜色表上色，鼠标移动可通过灰度值直接读取气象数据。方便客户端颜色表动态设置与数据过滤。

GeoJSON输出

服务器端负责生成GeoJSON格式数据，前端生成对应的几何图形，并根据颜色表进行颜色渲染，可通过矢量数据的属性获取气象数据。方便客户端颜色表动态设置与数据过滤。

2、客户端模式

通用的方式是前端插值处理数据，生成网格数据，再进行等值线或等值面的生成，适用业务如下：

1. 数据更新频率高，实时性强
2. 按需服务，减轻服务器压力

利用Turf.js输出

完全使用turf.js内置函数通过离散点插值、等值面绘制、裁剪，生成矢量数据然后绘制数据。实现简便且显示效果好，但存在以下问题：

1. 插值效果不理想
2. 区域边界比较复杂，每次裁剪绘制时效率很低，容易出现卡顿
3. 等值面绘制会生成非法Polygon，裁剪会报错

参考文档

利用kriging.js输出

使用kriging.js内置的函数，离散点生成网格数据然后网格渲染。实现简便且插值效果好，但性能上存在问题：

1. 每次重新渲染都要将整个网格数组遍历一次，交互体验不是很好
2. 网格是以方块的形式呈现的，视觉效果不理想
3. 大比例尺网格需要切分的比较小，计算量较大

参考文档

结合Turf.js和kriging.js输出

结合turf.js和kriging.js两者的优点，提升交互性能、插值效果和显示效果。具体实现步骤如下：

1. 使用kriging.js处理离散点生成网格点数据
2. 使用turf.js处理网格点数据，生成等值面
3. 使用WebGIS SDK渲染上色
4. 使用矢量图层范围裁剪