【CesiumJS-6】绘制多边形(PolygonGeometry)动态水面

效果

注意(cesium版本必须是1.108！！！)

cesium版主必须是1.108！！！

绘制多边形

    let river = []; // 经纬度数组
    const geometry = new Cesium.PolygonGeometry({
      polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(river)),
      height: 0, // 底面高度
      extrudedHeight: 1, // 水面高度
      ellipsoid: Cesium.Ellipsoid.WGS84
    });
    // 创建GeometryInstance
    const geometryInstances = new Cesium.GeometryInstance({ geometry });

创建水的材质

声明material

    const material = new Cesium.Material({
      fabric: {
        type: "Water",
        uniforms: {
          baseWaterColor: new Cesium.Color(0.25, 0.6, 0.9, 0.5), // 水面颜色
          normalMap: waterPng, // 贴图
          frequency: 2000, // 水波纹数量
          animationSpeed: 0.05, // 水流速
          amplitude: 25, // 水波纹振动幅度
          specularIntensity: 5, // 镜面反射强度
        },
      },
    });

声明appearance

    const appearance = new Cesium.EllipsoidSurfaceAppearance({
      aboveGround: true,
      material,
    });

创建primitive以及将多边形和材质添加到场景中

    const primitive = new Cesium.Primitive({
      geometryInstances,
      appearance,
    });

    viewer.value.scene.primitives.add(primitive);

完整代码

    let river = [
      120.13533037295073, 30.326272478547747,
      120.13533522252332, 30.32586488872129,
      120.13535312870857, 30.325411638922045,
      120.13537168328233, 30.324932102155415,
      120.13538580716056, 30.324818496722603,
      120.13540223744941, 30.324680281028744,
      120.13541927578466, 30.324271751239905,
      120.13542761463684, 30.32391586867913,
      120.13544483999758, 30.323605628151906,
      120.1354692223726, 30.323332978301934,
      120.13548940273851, 30.32302286648121,
      120.13548546507083, 30.322764175414612,
      120.13547770724875, 30.32252203549519,
      120.13546504433491, 30.322237452991697,
      120.13543786374548, 30.321877867478715,
      120.1353679881514, 30.321374682148548,
      120.13532867083563, 30.3211635082862,
      120.13527676829021, 30.320760970649005,
      120.13522850905899, 30.320464825168298,
      120.1351840656857, 30.320354297017026,
      120.1351505698885, 30.320108785919352,
      120.1351219091782, 30.319833888896,
      120.13505330998134, 30.319567210874887,
      120.13498974126912, 30.319126486619602,
      120.13494174618248, 30.31874370618642,
      120.13495618966394, 30.31856380471428,
      120.13497823973545, 30.318304618881662,
      120.13495099732698, 30.317958148884095,
      120.13490024038087, 30.317679482309693,
      120.13485670933868, 30.317447541257728,
      120.13474949351134, 30.317098667459625,
      120.13462178035178, 30.316727987838828,
      120.13454193552606, 30.31633788213745,
      120.13421914099824, 30.316385882657475,
      120.1336988904616, 30.31645535488708,
      120.13354728537915, 30.316485824210968,
      120.13361928102942, 30.316784992308623,
      120.13377194980592, 30.31739561258507,
      120.13384935978128, 30.31798430519958,
      120.13392826688853, 30.318722469894723,
      120.13394103894619, 30.319241245272647,
      120.13403579797671, 30.319686407798255,
      120.13422113940568, 30.320497223643148,
      120.13411174495731, 30.32081010454761,
      120.13424001469495, 30.321437381229476,
      120.13438741419029, 30.32215516065891,
      120.13440110723215, 30.322242280896248,
      120.13462728651837, 30.322214058606157,
      120.1346955840153, 30.322572385848638,
      120.13470672804985, 30.322887725966492,
      120.13466577457568, 30.323383565019764,
      120.134651377323, 30.323813914710794,
      120.13461814088585, 30.324040628052416,
      120.13454186342398, 30.324096114325023,
      120.13449119804982, 30.324563228178857,
      120.13442238031627, 30.32514967259101,
      120.13439528406474, 30.32553195911747,
      120.1342970528941, 30.326185887217694
    ];
    // 1. 创建geometry
    const geometry = new Cesium.PolygonGeometry({
      polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(river)),
      height: 0, // 底面高度
      extrudedHeight: 1, // 水面高度
      ellipsoid: Cesium.Ellipsoid.WGS84
    });
    // 2. 创建GeometryInstance
    const geometryInstances = new Cesium.GeometryInstance({ geometry });
    // 3. 创建material
    const material = new Cesium.Material({
      fabric: {
        type: "Water",
        uniforms: {
          baseWaterColor: new Cesium.Color(0.25, 0.6, 0.9, 0.5), // 水面颜色
          normalMap: waterPng, // 贴图
          frequency: 2000, // 水波纹数量
          animationSpeed: 0.05, // 水流速
          amplitude: 25, // 水波纹振动幅度
          specularIntensity: 5, // 镜面反射强度
        },
      },
    });
    // 4. 创建Appearance
    const appearance = new Cesium.EllipsoidSurfaceAppearance({
      aboveGround: true,
      material,
    });
    // 5. 创建primitive
    const primitive = new Cesium.Primitive({
      geometryInstances,
      appearance,
    });

    viewer.value.scene.primitives.add(primitive);