用cesium本身添加水纹效果
参考网站:https://blog.csdn.net/XLSMN/article/details/78752669
1、首先来看一下整体效果
2、具体方法如下:
首先,你必须有两张很重要的图片,你可以从我这里保存为本地
3.具体代码如下
- var scene=viewer.scene;
- function applyWaterMaterial(primitive, scene) {
- primitive.appearance.material = new Cesium.Material({
- fabric : {
- type : 'Water',
- uniforms : {
- specularMap:'images/earthspec1k.jpg',
- normalMap:'images/waterNormals.jpg',
- frequency: 10000.0,
- animationSpeed: 0.01,
- amplitude: 1.0
- }
- }
- });
- }
- var worldRectangle = viewer.scene.primitives.add(new Cesium.Primitive({
- geometryInstances : new Cesium.GeometryInstance({
- geometry : new Cesium.RectangleGeometry({
- rectangle : Cesium.Rectangle.fromDegrees(-180, -90, 180.0, 90.0),
- vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
- })
- }),
- appearance : new Cesium.EllipsoidSurfaceAppearance({
- aboveGround : true
- }),
- show : true
- }));
- applyWaterMaterial(worldRectangle, scene);
以上是全球动态水的加载,当然可以针对某片区域水域进行动态水的加载(只需要将上边的矩形换成你要加载动态水区域的边界一系列坐标值)
- function applydjk_WaterMaterial(primitive, scene) {
- primitive.appearance.material = new Cesium.Material({
- fabric : {
- type : 'Water',
- uniforms : {
- normalMap:'images/waterNormals.jpg',
- frequency: 10000.0,
- animationSpeed: 0.01,
- amplitude: 50
- }
- }
- });
- }
- var djk_Polygon = viewer.scene.primitives.add(new Cesium.Primitive({
- geometryInstances : new Cesium.GeometryInstance({
- geometry : new Cesium.PolygonGeometry({
- polygonHierarchy : new Cesium.PolygonHierarchy(
- Cesium.Cartesian3.fromDegreesArray([
- 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
- ])
- ),
- vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
- })
- }),
- appearance : new Cesium.EllipsoidSurfaceAppearance({
- aboveGround : true
- }),
- show : true
- }));
- applydjk_WaterMaterial(djk_Polygon, scene);
当然,有时获取一系列区域的坐标值数量较多,手动去采集比较麻烦,耗时耗力,推荐一种方法,到Goole earth中画面,然后生成kml文件,里边就包含了你所画区域的边界坐标。(具体做法,可问度娘)
用cesium本身添加水纹效果的更多相关文章
- 给日志添加“复制”效果
给日志添加如上效果的实现方法: 在日志编辑页面,源代码中,添加如下代码,包裹住 目标内容style1: <div class="cnblogs_code"><di ...
- WinForm实现类似QQ停靠,显示隐藏过程添加特效效果
原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...
- JS添加标签效果
JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
- Android开发——为EditText添加烟花效果的实现
)什么时候发射烟花:监听EditText的文字改变,获取文字数量的变化以确定风的方向,还有获取光标的位置确定爆炸的位置.光标的位置没有具体的方法确定坐标,要通过反射自己计算. 2. 主要实现类 库里 ...
- 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
- 为div添加滚动效果:
为div添加滚动效果: .xxxx{ width: 100%; height: 100%; overflow: hidden; overflow-y: auto;} 代码片段 <div clas ...
- [Xcode 实际操作]二、视图与手势-(5)给图像视图添加圆角效果
目录:[Swift]Xcode实际操作 本文将演示给矩形图片添加圆角效果 import UIKit class ViewController: UIViewController { override ...
- WPF 实现水纹效果
原文:WPF 实现水纹效果 鼠标滑过产生水纹,效果图如下: XMAL就放置了一个img标签 后台主要代码 窗体加载: private void Window_Loaded(object s ...
- cesium 实现风场图效果(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
随机推荐
- gearcache在qemu-kvm虚拟化平台下的实现
需要用到的数据结构: 链表,基树. gearcache在qemu-kvm虚拟化平台下的实现主要有以下的步骤: 1.打开镜像文件的时候,为gearcache中的基数池(page_node_pool)和读 ...
- RDD基础
RDD的两种操作 1.Tansformation(转化操作):返回值还是一个RDD 2.Action(行动操作):返回值不是一个RDD 第一种Transformation是返回一个新的RDD ...
- java web框架收集
一.前端框架: 1.vue.js 2.angular.js 二.后端框架: 1.struts2 2.springmwc 三.数据库映射框架: 1.hibernate 2.mybatis 四.数据库: ...
- Windows代码heap内存分析实战
知识这东西有时候很奇怪,每次当你重新审视他的时候可能都会有新的收获.最近为了研究一个内存相关的问题,把windows heap相关的内容又复习了一遍,收获不小,记录一下,希望有朋友使用的时候少走些弯路 ...
- 使用slot分发内容 作用域插槽
除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会别丢弃.当子组件模板只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在的DOM位置,并替换掉slot标签本 ...
- 使用 dynamic 标记解析JSON字符串(转)
http://www.cnblogs.com/taotaodetuer/p/4171327.html string jsonStr = "{\"data\": {\&qu ...
- E20170521-ts
redirect vt. 使改寄,更改(信件等)姓名地址; 改变方向,改变线路; 重新寄送; teletype n. 电传打字机,电报交换机,打字电报通讯; descriptor n. 描述符; ...
- TCP协议中的三次握手和四次挥手(图解)【转载】
建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...
- Spring Boot之配置文件值注入(@ConfigurationProperties)
前言:Spring Boot配置文件值的注入有两种方式,分别是 @ConfigurationProperties @Value 这里我们使用第一种 首先我们创建一个application.yml文件, ...
- 面试杂谈:面试程序员时都应该考察些什么?<转>
一般来说,一线成熟企业技术岗位的典型招聘流程分为以下几个步骤: 初筛:一般由直接领导的技术经理或HR进行,重点考察教育和工作经历 一面:一般由可能直接与之共事的工程师进行,重点考察基础和工作能力 二面 ...