Cesium中內(nèi)置了水面效果的shader，通過添加圖元（Primitive），能夠在Cesium的地圖上實現(xiàn)水面流動的效果，借助互聯(lián)網(wǎng)上搜索、并進(jìn)行了修改。

效果實現(xiàn)

下載了一塊水系的geojson數(shù)據(jù)，因為按照代碼，需要根據(jù)polygon的坐標(biāo)進(jìn)行勾畫。關(guān)鍵實現(xiàn)代碼：

//_polygonArr?為polygon的坐標(biāo)

? ? ? ? ?let?waterPrimitive?=?new?Cesium.Primitive({

????????????????allowPicking:?false,

????????????????geometryInstances:?new?Cesium.GeometryInstance({

????????????????????geometry:?new?Cesium.PolygonGeometry({

????????????????????????polygonHierarchy:?new?Cesium.PolygonHierarchy(Cesium.Cartesian3

????????????????????????????.fromDegreesArrayHeights(_polygonArr)),

????????????????????????vertexFormat:?Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,

????????????????????})

????????????????}),

????????????????// 使用內(nèi)置的水面shader

????????????????appearance:?new?Cesium.EllipsoidSurfaceAppearance({

????????????????????aboveGround:?true,

????????????????????material:?new?Cesium.Material({

????????????????????????fabric:?{

????????????????????????????type:?'Water',

????????????????????????????uniforms:?{?

????????????????????????????????blendColor:?new?Cesium.Color(0.0,?0.0,?1.0,?0.3),?

? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ?//設(shè)置水面使用的圖片，

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //此圖片在Cesium源碼Source\Assets\Textures文件夾中

????????????????????????????????normalMap:?'images/waterNormalsSmall.jpg',

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//頻率速度設(shè)置

????????????????????????????????frequency:?200.0,

????????????????????????????????animationSpeed:?0.01,

????????????????????????????????amplitude:?10.0

????????????????????????????}

????????????????????????}

????????????????????})

?? ? ? ? ? ??//frameShader代碼也可以根據(jù)需要進(jìn)行修改

????????????????????//?????????????????????fragmentShaderSource:?'varying?vec3?v_positionMC;\nvarying?vec3?v_positionEC;\nvarying?vec2?v_st;\nvoid?main()\n{\nczm_materialInput?materialInput;\nvec3?normalEC?=?normalize(czm_normal3D?*?czm_geodeticSurfaceNormal(v_positionMC,?vec3(0.0),?vec3(1.0)));\n#ifdef?FACE_FORWARD\nnormalEC?=?faceforward(normalEC,?vec3(0.0,?0.0,?1.0),?-normalEC);\n#endif\nmaterialInput.s?=?v_st.s;\nmaterialInput.st?=?v_st;\nmaterialInput.str?=?vec3(v_st,?0.0);\nmaterialInput.normalEC?=?normalEC;\nmaterialInput.tangentToEyeMatrix?=?czm_eastNorthUpToEyeCoordinates(v_positionMC,?materialInput.normalEC);\nvec3?positionToEyeEC?=?-v_positionEC;\nmaterialInput.positionToEyeEC?=?positionToEyeEC;\nczm_material?material?=?czm_getMaterial(materialInput);\n#ifdef?FLAT\ngl_FragColor?=?vec4(material.diffuse?+?material.emission,?material.alpha);\n#else\ngl_FragColor?=?czm_phong(normalize(positionToEyeEC),?material);\

????????????????????// gl_FragColor.a=0.5;\n#endif\n}\n'?//重寫shader，修改水面的透明度

????????????????})

????????????});

//添加水面數(shù)據(jù)到viewer中

??viewer.scene.primitives.add(waterPrimitive);

效果圖：