1. 程式人生 > >用cesium本身添加水紋效果

用cesium本身添加水紋效果

tps 采集 生成 畫面 car ray 邊界 fun 手動

參考網站:https://blog.csdn.net/XLSMN/article/details/78752669

1、首先來看一下整體效果

技術分享圖片

2、具體方法如下:

首先,你必須有兩張很重要的圖片,你可以從我這裏保存為本地

技術分享圖片

技術分享圖片

3.具體代碼如下

  1. var scene=viewer.scene;
  2. function applyWaterMaterial(primitive, scene) {
  3. primitive.appearance.material = new Cesium.Material({
  4. fabric : {
  5. type : ‘Water‘,
  6. uniforms : {
  7. specularMap:‘images/earthspec1k.jpg‘,
  8. normalMap:‘images/waterNormals.jpg‘,
  9. frequency: 10000.0,
  10. animationSpeed: 0.01,
  11. amplitude: 1.0
  12. }
  13. }
  14. });
  15. }
  16. var worldRectangle = viewer.scene.primitives.add(new Cesium.Primitive({
  17. geometryInstances : new Cesium.GeometryInstance({
  18. geometry : new Cesium.RectangleGeometry({
  19. rectangle : Cesium.Rectangle.fromDegrees(-180, -90, 180.0, 90.0),
  20. vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  21. })
  22. }),
  23. appearance : new Cesium.EllipsoidSurfaceAppearance({
  24. aboveGround : true
  25. }),
  26. show : true
  27. }));
  28. applyWaterMaterial(worldRectangle, scene);

以上是全球動態水的加載,當然可以針對某片區域水域進行動態水的加載(只需要將上邊的矩形換成你要加載動態水區域的邊界一系列坐標值)

  1. function applydjk_WaterMaterial(primitive, scene) {
  2. primitive.appearance.material = new Cesium.Material({
  3. fabric : {
  4. type : ‘Water‘,
  5. uniforms : {
  6. normalMap:‘images/waterNormals.jpg‘,
  7. frequency: 10000.0,
  8. animationSpeed: 0.01,
  9. amplitude: 50
  10. }
  11. }
  12. });
  13. }
  14. var djk_Polygon = viewer.scene.primitives.add(new Cesium.Primitive({
  15. geometryInstances : new Cesium.GeometryInstance({
  16. geometry : new Cesium.PolygonGeometry({
  17. polygonHierarchy : new Cesium.PolygonHierarchy(
  18. Cesium.Cartesian3.fromDegreesArray([
  19. 111.48894522023063,32.55843610413914,111.48869238776277,32.55602570974643,111.49004745721604,32.5548361448687,111.49250635559537,32.5526581917131,111.49401017612676,32.55129837476868,111.49557557543416,32.549965127681524,111.49805874806115,32.550219820173126,111.49881935514881,32.550823388219456,111.49893286824275,32.55195597852755,111.4983164393889,32.5535655841798,111.49817521853979,32.554570336381104,111.49914284747027,32.55554277243855,111.49967950821859,32.555814392110264,111.50062151969038,32.556517275179836,111.50149914222958,32.55731250438687,111.50207800636986,32.55757396515373,111.50386396090245,32.55781206769338,111.50391371888884,32.559650818164926,111.50077307397399,32.56013340913413,111.49625702141412,32.560250133340446,111.49171532588734,32.560183453792156,111.48920373670329,32.56015020231049,111.48844043918616,32.55981856869106,111.48743657311691,32.55945303779285,111.48760383414758,32.55863069835514,111.48812831262538,32.55837951411848
  20. ])
  21. ),
  22. vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  23. })
  24. }),
  25. appearance : new Cesium.EllipsoidSurfaceAppearance({
  26. aboveGround : true
  27. }),
  28. show : true
  29. }));
  30. applydjk_WaterMaterial(djk_Polygon, scene);

當然,有時獲取一系列區域的坐標值數量較多,手動去采集比較麻煩,耗時耗力,推薦一種方法,到Goole earth中畫面,然後生成kml文件,裏邊就包含了你所畫區域的邊界坐標。(具體做法,可問度娘)

用cesium本身添加水紋效果