参考网站: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文件,里边就包含了你所画区域的边界坐标。(具体做法,可问度娘)

用cesium本身添加水纹效果的更多相关文章

  1. 给日志添加“复制”效果

    给日志添加如上效果的实现方法: 在日志编辑页面,源代码中,添加如下代码,包裹住 目标内容style1: <div class="cnblogs_code"><di ...

  2. WinForm实现类似QQ停靠,显示隐藏过程添加特效效果

    原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...

  3. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  4. Android开发——为EditText添加烟花效果的实现

    )什么时候发射烟花:监听EditText的文字改变,获取文字数量的变化以确定风的方向,还有获取光标的位置确定爆炸的位置.光标的位置没有具体的方法确定坐标,要通过反射自己计算. 2.  主要实现类 库里 ...

  5. 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  6. 为div添加滚动效果:

    为div添加滚动效果: .xxxx{ width: 100%; height: 100%; overflow: hidden; overflow-y: auto;} 代码片段 <div clas ...

  7. [Xcode 实际操作]二、视图与手势-(5)给图像视图添加圆角效果

    目录:[Swift]Xcode实际操作 本文将演示给矩形图片添加圆角效果 import UIKit class ViewController: UIViewController { override ...

  8. WPF 实现水纹效果

    原文:WPF 实现水纹效果 鼠标滑过产生水纹,效果图如下:     XMAL就放置了一个img标签   后台主要代码 窗体加载: private void Window_Loaded(object s ...

  9. cesium 实现风场图效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

随机推荐

  1. 比特币客户端Electrum使用介绍

    简介 比特币的客户端很多,为什么选择Electrum. 首先Electrum真的很轻量,安装马上可以用,不用下载几百G的区块链账本.我之前安装bitcoin核心客户端,这是个完整节点.下载账本都要好多 ...

  2. 数据库sqlite3的使用-ios中引用方法

    一.简单说明 在iOS中使用SQLite3,首先要添加库文件libsqlite3.dylib和导入主头文件. 导入头文件,可以使用库中的函数(是纯C语言的) 二.具体说明 新建一个项目,在项目的主界面 ...

  3. 牛客练习赛13D:幸运数字Ⅳ(康托展开) F:关键字排序

    链接:https://www.nowcoder.com/acm/contest/70/D 题目: 定义一个数字为幸运数字当且仅当它的所有数位都是4或者7. 比如说,47.744.4都是幸运数字而5.1 ...

  4. BZOJ_3209_花神的数论题_组合数+数位DP

    BZOJ_3209_花神的数论题_组合数+数位DP Description 背景 众所周知,花神多年来凭借无边的神力狂虐各大 OJ.OI.CF.TC …… 当然也包括 CH 啦. 描述 话说花神这天又 ...

  5. 转3xian之所在 (一位ACM大牛的博文)

    3xian的经历和见解...我深思... 最后一天,漫天飘起了雪花,假装欢送我离去. 这次WF之战不太顺利,早期的C题大概花了1秒钟构思,然而由于输出格式多了一个空格直到两个半小时才逃脱Wrong A ...

  6. java获取操作系统的MAC地址和硬盘序列号

    1.判断操作系统是Windows还是Linux private static Boolean isLinux() { String os = System.getProperty("os.n ...

  7. 设计模式-COMMOND PATTERN (ACTIVE OBJECT PATTERN是一种特殊的COMMOND PATTERN)

    复用控制逻辑. 理解方式:Controller 获取到Light TeleVision Computer中的一个的对像,通过Icommond接口作用于它. ACTIVE OBJECT模式: class ...

  8. bzoj 1661: [Usaco2006 Nov]Big Square 巨大正方形【枚举】

    每句两个顶点确定正方形,取max即可 #include<iostream> #include<cstdio> using namespace std; int n,x,y,s, ...

  9. [App Store Connect帮助]八、维护您的 App(1)App 维护概述

    您在 App Store 上发行 App 后,需要执行一些任务来回复顾客反馈并在整个产品周期内维护您的 App.您可以按任何顺序执行这些任务. 监控顾客评论.销售情况和分析 您可以在 App 页面的“ ...

  10. Taro 小程序 自定义导航栏

    在小程序中,有的页面需求可能需要我们做一个自定义的导航栏, 今天就来踩一踩坑 首先需要在app.js 中给全局的导航栏隐藏, // app.js window: { navigationStyle: ...