为解决格点可视化的两种主要业务场景，目前主流做法有以下几种：

• 栅格图像等值面可视化
• 矢量等值面可视化
• 矢量切片等值面可视化
• WebGL纹理渲染等值面新方案

栅格图像等值面可视化

实现思路

1. axios获取要展示的tiff图像
2. geotiff解析tiff图像，获取格点数据
3. plotty将格点数据绘制在canvas上，利用地图框架如leaflet将canvas转img绘制在地图上

优点

不用考虑几十M格网数据如何传输到客户端，直接将几十K渲染好的图片传到前端，加载速度快

缺点

用户体验差，由于栅格不能放大，放大后虚化严重，在移动端体验很不好

矢量等值面可视化

实现思路

1. axios将格点数据传输到前端
2. 根据d3-contour(MarchingCube算法实现)生成等值面，然后以矢量形式加载到地图上

优点

由于前端是矢量的等值面，所以更改颜色，等值面过滤都不是问题了，在地图上缩放时，也不会像栅格那样失真

缺点

d3-contour库应该算目前效果最好的，效果如上图，但是存在等值面压盖的问题，某个阈值较大的等值面内部还会有很多其他范围的等值面，按道理等值面是排他的，不可能存在一个范围既是阈值A又是阈值B的情况，很难通过js解决

矢量切片等值面可视化

其实由前文可知，矢量形式展示是最优的，而方案二存在很多问题，方案三矢量切片方案其实是方案二的进化版。该方案在后台生成矢量等值面的矢量数据集，然后利用制作矢量切片的包对数据集进行切片，生成矢量切片给客户端渲染，效果是丝般柔滑。

该思路中，使用d3-contour.js生成等值面geojson（并未涉及等值面压盖裁剪问题，这个问题是大问题，必须要处理），并使用tippecanoe工具制作矢量切片数据集，然后可以使用node-mbtiles包对其发布成矢量切片服务，前端MapboxGL的矢量切片渲染动画。其实这个方案其实比较适合静态数据，因为步骤比较复杂，有数据生成，数据切片，数据发布等一系列流程，比较麻烦和耗时，而熟悉气象的人应该知道类似气象雷达产品，每6分钟更新一次数据，采用这种方案其实不太合适的。

改进方案：从静态矢量切片升级成动态矢量切片方案，使用d3-contour.js生成等值面并将等值面存PostGIS数据库，然后在数据库中将压盖等值面批量裁剪处理成互相无压盖的数据，最后结合数据库的矢量切片+并行地理计算方案，能对连续20个时刻的数据一次性传输到前端，耗时200ms即可，页面加载秒开，动画流畅，图形效果很平滑

优点

矢量切片，加载流畅，可视化和动画较流畅，阈值过滤和色值变更都支持。在满足业务要求和用户体验上，都已经算是合格的了。

缺点

主要问题是流程复杂，静态矢量切片方案历经等值面生成->等值面切片->等值面数据服务发布->前端等值面可视化等步骤，静态矢量切片数据时效性会降低；动态矢量切片方案历经等值面生成->等值面写入PostGIS->调优PG的sql与并行计算机制->发布动态矢量切片服务->前端可视化等步骤，动态矢量切片对PG数据库所在服务器性能有较大要求。次要问题是时序动画仍然是根据时间“一蹦一蹦”的，平滑效果不足。