vue + cesium: 动态水面（WaterMaterialHelper/WaterMaterialHelper.mini.js）

import * as Cesium from "cesium/Cesium.js";
/**
 *Created by gisergao on 2017/10/17
 * Email：gaoweisc@qq.com
 * QQ：245054134
 *本文件用于生成动态水效果；
 */
/**
 * 自定义区域的动态水效果
 * waterScene 当前场景；
 * geometryInstance 用于限定动态水域的范围；
 * * 使用方法：applyWaterMaterial(geometryInstance, waterScene);
 * */
/**
 * 全球动态水效果
 * waterScene 当前场景；
 * * 使用方法：applyWaterMaterialWorld(waterScene);
 * */

/**
 * 移除动态水效果
 * waterScene 当前场景；
 * * 使用方法：removeWaterMaterial(waterScene);
 * */
var _0;
/**
 *
 * @param waterScene
 * @param lal  经纬度
 */
export const applyWaterMaterial = (waterScene, lal) => {
    // 加载水域部分
    // var polygon = new Cesium.PolygonGeometry({
    //     polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(lal)),
    //     vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
    // });
    // var instance = new Cesium.GeometryInstance({
    //     geometry: polygon,
    // });
    _0 = lal._primitives.add(new Cesium.Primitive({
    	cull:true,
        geometryInstances: waterScene,
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            aboveGround: true,
            material: new Cesium.Material({
                fabric: {
                    type: 'Water',
                    uniforms: {
                        normalMap: require('./waterNormals.jpg'),
                        // baseWaterColor: Cesium.Color.fromCssColorString("rgba(113, 172, 255, 0.4)"),
                        baseWaterColor: Cesium.Color.fromCssColorString("rgba(67, 92, 166, 0.7)"),
                        frequency: 2000,  // 水流密度
                        animationSpeed: 0.01,
                        amplitude: 10.0,
                        specularIntensity: 2,
                        fadeFactor: 2.0
                    }
                }
            })
        }),
        show: true,
        allowPicking:false,
        name: "水域",
    }))
    return _0
}

/**
 * 加载世界的水域
 * @param waterScene
 */
export const applyWaterMaterialWorld = (waterScene) => {
    _0 = waterScene.primitives.add(new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
                vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
            })
        }),
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            aboveGround: false,
            material: new Cesium.Material({
                fabric: {
                    type: 'Water',
                    uniforms: {

                        specularMap: './earthspec1k.jpg',
                        normalMap: './waterNormals.jpg',
                        frequency: 10000.0,
                        animationSpeed: 0.01,
                        amplitude: 1.0
                    }
                }
            })
        }),
        show: true
    }))
}

function removeWaterMaterial(waterScene) {
    if (!_0) {
        waterScene.primitives.remove(_0)
    }
}