• 用cesium本身添加水纹效果


    参考网站: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.  
       
    17.  
      var worldRectangle = viewer.scene.primitives.add(new Cesium.Primitive({
    18.  
      geometryInstances : new Cesium.GeometryInstance({
    19.  
      geometry : new Cesium.RectangleGeometry({
    20.  
      rectangle : Cesium.Rectangle.fromDegrees(-180, -90, 180.0, 90.0),
    21.  
      vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
    22.  
      })
    23.  
      }),
    24.  
      appearance : new Cesium.EllipsoidSurfaceAppearance({
    25.  
      aboveGround : true
    26.  
      }),
    27.  
      show : true
    28.  
      }));
    29.  
       
    30.  
      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.  
       
    15.  
      var djk_Polygon = viewer.scene.primitives.add(new Cesium.Primitive({
    16.  
      geometryInstances : new Cesium.GeometryInstance({
    17.  
      geometry : new Cesium.PolygonGeometry({
    18.  
      polygonHierarchy : new Cesium.PolygonHierarchy(
    19.  
      Cesium.Cartesian3.fromDegreesArray([
    20.  
      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
    21.  
      ])
    22.  
      ),
    23.  
      vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
    24.  
      })
    25.  
      }),
    26.  
      appearance : new Cesium.EllipsoidSurfaceAppearance({
    27.  
      aboveGround : true
    28.  
      }),
    29.  
      show : true
    30.  
      }));
    31.  
      applydjk_WaterMaterial(djk_Polygon, scene);

    当然,有时获取一系列区域的坐标值数量较多,手动去采集比较麻烦,耗时耗力,推荐一种方法,到Goole earth中画面,然后生成kml文件,里边就包含了你所画区域的边界坐标。(具体做法,可问度娘)

  • 相关阅读:
    vue2 作用域插槽slot-scope详解
    vue2 inheritAttrs、attrs和attrs和listeners使用
    vue 渲染后更新数据
    php 两次encodeURI,解决浏览器跳转请求页乱码报错找不到页面的bug
    nginx 和 tp兼容pathinfo和rewrite两种url访问方式
    TFTP
    FTP服务相关实现
    FTP相关内容
    Redis高级
    Redis的相关命令
  • 原文地址:https://www.cnblogs.com/yanan-boke/p/9337214.html
Copyright © 2020-2023  润新知