1. 实现效果
2.实现方法
官方文档 Cesium的material
中提供了水water
的相关材质:传送门
详细代码:
const getWater = (data) => {// 根据几何实例创建贴地面图元waterPrimitive = new Cesium.GroundPrimitive({geometryInstances: new Cesium.GeometryInstance({geometry: new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(data.flat())),}),}), //可以是实例数组appearance: new Cesium.EllipsoidSurfaceAppearance({material: new Cesium.Material({fabric: {type: "Water",uniforms: {baseWaterColor: new Cesium.Color(42 / 255.0,202 / 255.0,226 / 255.0,0.1),normalMap: waterJpg,frequency:900.0, // 波纹数量animationSpeed: 0.1, // 水的流速amplitude: 20, // 波纹振幅specularIntensity: 10, //镜面反射强度},},}),}),});// 将图元添加到集合onViewer.scene.primitives.add(waterPrimitive);
};
这里需要注意的点:数据源格式
let arr = [[93.9094982787014, 30.006507815957583],[93.90959962902026, 30.006785434013253],[93.90992138854492, 30.006901056001432],[93.91013081875192, 30.007310364439057],[93.91000623918005, 30.00775298436221],[93.91017401290898, 30.008023270365413],[93.91047081433788, 30.008275056856814],[93.91058396213256, 30.00850507749738],[93.91118823267622, 30.008419291295343],[93.91114741959169, 30.008693585389125],[93.91138636113698, 30.00862855836003],[93.91147337460198, 30.0089342709621],[93.91148649462788, 30.009171653160802]
]
在这里需要推荐一个关于Cesium博主,对初学者有很大帮助右弦GISer