淹没分析一般有两种效果：第一种是模拟水从上游流入下游，有逐渐演进和上涨的过程，能够较真实地还原淹没过程，这种一般称为有源淹没分析，需要结合DEM来进行分析，运算成本较高；另一种是简单无源淹没效果，默认洪水已经充分填充了淹没区域，后续的淹没只涉及到水面高低变化，不涉及到上下游洪水演进，这种一般就是水面抬升的效果，例如降雨导致的水库、湖泊水位上涨。
这里实现第二种无源淹没分析效果。具体到水面也有两种材质：一种是纯色的静态水面效果，水面没有波动；一种是用法线贴图做了水面波动的动态效果，水面会朝着一个方向波动，相对要真实一些。
Mapbox是一个Web端地图数据可视化的框架，可以轻松加载各类GIS数据在浏览器里高效展示。由于在Mapbox里是没办法加载三维面的，只能加载贴地图元，如果用拉升的方式去做这种效果，在大范围上无法和地形融合，而且由于深度检测的原因，无法隐藏水下部分，因此原生的Mapbox方法是做不到这种效果的。
此处借鉴官网加载Threejs模型的案例，利用threejs来实现水面模型，将二者结合实现上述效果，恰好Threejs里也自带了一个水面效果的案例，稍加改造就能用。
Mapbox加载模型案例：docs.mapbox.com/mapbox-gl-j…
Threejs水面案例：threejs.org/examples/?q…
基于以上两个案例，把Threejs 案例里的水面Shader材质效果简化下，剔除Sky等无关的内容，只保留水面贴图等关键材质内容即可。当然也可以直接把这个水面效果完整应用到Mapbox里，但是仍需要改造。
代码在这里：
关注公众号交流知识哇😄
