4.Cesium通过GroundPrimitive实现流动水面效果

这里采用GroundPrimitive接口，如果采用Primitive接口，随地图放大缩小会出现缺失的情况

this.waterPrimitive = new Cesium.GroundPrimitive({
    
    
        show: true, // 默认隐藏
        allowPicking: false,
        geometryInstances: new Cesium.GeometryInstance({
    
    
          geometry: new Cesium.PolygonGeometry({
    
    
            polygonHierarchy: new Cesium.PolygonHierarchy(
              new Cesium.Cartesian3.fromDegreesArray(mapConfig.waterData)
            ),
            // mapConfig.waterData水面区域数据
            // 数据结构  [ -75.59695071463018,40.037256279448904,-75.59675522990288,40.036984426189086,75.59695071463018,40.037256279448904]
          }),
          attributes: {
    
    
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              // Cesium.Color.fromCssColorString('#389bab')
              Cesium.Color.WHITE
            ), //color  必须设置 不然没有效果
          },
        }),
        // 可以设置内置的水面shader
        appearance: new Cesium.EllipsoidSurfaceAppearance({
    
    
          material: new Cesium.Material({
    
    
            fabric: {
    
    
              type: 'Water',
              uniforms: {
    
    
                // baseWaterColor:new Cesium.Color(0.0, 0.0, 1.0, 0.5),
                //设置水面颜色
                baseWaterColor: new Cesium.Color.fromCssColorString('#3fb5b5'),
                //blendColor: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
                //specularMap: 'gray.jpg',
                normalMap: require('../assets/img/water.jpg'),
                frequency: 100.0,
                animationSpeed: 0.01,
                amplitude: 10.0,
                specularIntensity: 5,
              },
            },
          }),
          translucent: false,
        }),
      })
      this.viewer.scene.groundPrimitives.add(this.waterPrimitive)

图片放这里water.png