【Cesium】波纹圆效果

news2025/2/26 6:25:06

效果图:

代码:

需要扩展源码:circleRippleMaterialProperty.js

/*
 * @Description: 波纹圆效果(和水波纹扩散类似,参考开源代码)
 * @Version: 1.0
 */
class CircleRippleMaterialProperty {
    constructor(options) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._speed = undefined;
        this.color = options.color;
        this.speed = options.speed;
        this.count = options.count;
        this.gradient = options.gradient;
    };

    get isConstant() {
        return false;
    }

    get definitionChanged() {
        return this._definitionChanged;
    }

    getType(time) {
        return Cesium.Material.CircleRippleMaterialType;
    }

    getValue(time, result) {
        if (!Cesium.defined(result)) {
            result = {};
        }

        result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);
        result.speed = Cesium.Property.getValueOrDefault(this._speed, time, 10, result.speed);
        result.count = this.count;
        result.gradient = this.gradient;
        return result
    }

    equals(other) {
        return (this === other ||
            (other instanceof CircleRippleMaterialProperty &&
                Cesium.Property.equals(this._color, other._color) &&
                Cesium.Property.equals(this._speed, other._speed) &&
                Cesium.Property.equals(this.count, other.count) &&
                Cesium.Property.equals(this.gradient, other.gradient))
        )
    }
}

Object.defineProperties(CircleRippleMaterialProperty.prototype, {
    color: Cesium.createPropertyDescriptor('color'),
    speed: Cesium.createPropertyDescriptor('speed'),
    count: Cesium.createPropertyDescriptor('count'),
    gradient: Cesium.createPropertyDescriptor('gradient')
})

Cesium.CircleRippleMaterialProperty = CircleRippleMaterialProperty;
Cesium.Material.CircleRippleMaterialProperty = 'CircleRippleMaterialProperty';
Cesium.Material.CircleRippleMaterialType = 'CircleRippleMaterialType';
Cesium.Material.CircleRippleMaterialSource = `
                                            uniform vec4 color;
                                            uniform float speed;
                                            uniform float count;
                                            uniform float gradient;

                                            czm_material czm_getMaterial(czm_materialInput materialInput)
                                            {
                                            czm_material material = czm_getDefaultMaterial(materialInput);
                                            material.diffuse = 1.5 * color.rgb;
                                            vec2 st = materialInput.st;
                                            float dis = distance(st, vec2(0.5, 0.5));
                                            float per = fract(czm_frameNumber * speed / 1000.0);
                                            if(count == 1.0){
                                                if(dis > per * 0.5){
                                                discard;
                                                }else {
                                                material.alpha = color.a  * dis / per / 2.0;
                                                }
                                            } else {
                                                vec3 str = materialInput.str;
                                                if(abs(str.z)  > 0.001){
                                                discard;
                                                }
                                                if(dis > 0.5){
                                                discard;
                                                } else {
                                                float perDis = 0.5 / count;
                                                float disNum;
                                                float bl = 0.0;
                                                for(int i = 0; i <= 999; i++){
                                                    if(float(i) <= count){
                                                    disNum = perDis * float(i) - dis + per / count;
                                                    if(disNum > 0.0){
                                                        if(disNum < perDis){
                                                        bl = 1.0 - disNum / perDis;
                                                        }
                                                        else if(disNum - perDis < perDis){
                                                        bl = 1.0 - abs(1.0 - disNum / perDis);
                                                        }
                                                        material.alpha = pow(bl,(1.0 + 10.0 * (1.0 - gradient)));
                                                    }
                                                    }
                                                }
                                                }
                                            }
                                            return material;
                                            }
                                            `

Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleRippleMaterialType, {
    fabric: {
        type: Cesium.Material.CircleRippleMaterialType,
        uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
            speed: 3.0,
            count: 4,
            gradient: 0.2
        },
        source: Cesium.Material.CircleRippleMaterialSource
    },
    translucent: function(material) {
        return true;
    }
})

加载代码:

        let viewer = new Cesium.Viewer('cesiumContainer');
        let entity = viewer.entities.add({
            name:'圆形波纹',
            position: Cesium.Cartesian3.fromDegrees(116.397289 , 39.968679, 0 ),
            ellipse: {
                height: 200,
                // 短半轴、长半轴设置
                semiMinorAxis: 300,
                semiMajorAxis: 300,
                material: new Cesium.CircleRippleMaterialProperty({
                    color: Cesium.Color.fromCssColorString("#00FFFF"),
                    speed: 5,
                    count: 4,
                    gradient: 0
                })
            }
        });
        viewer.flyTo(entity)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1528734.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言例3-27:使用条件运算符的例子

条件运算符的优先级&#xff1a; 其他运算符 优先于 条件运算符 优先于 赋值和复合赋值运算符 优先于 逗号运算符条件运算符的结合性是从右至左 条件运算符的一般使用形式&#xff1a; 表达式1&#xff1f;表达式2&#xff1a;表达式3 条件表达式的执行过程是先表达式1&…

C++ Qt开发:QUdpSocket网络通信组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍如何运用QUdpSocket组件实现基于UDP的网络通信…

Spring Bean的生命周期是怎么样的?

一、问题解析 一个Spring的Bean从出生到销毁的全过程就是他的整个生命周期&#xff0c;那么经历以下几个阶段&#xff1a; ​ 整个生命周期可以大致分为3个大的阶段&#xff0c;分别是&#xff1a;创建、使用、销毁。还可以进一步分为5个小的阶段&#xff1a;实例化、初始化、…

计算机生物科技在基因编辑中的应用及其前景

一、引言 基因编辑&#xff0c;作为一种能够精准修改生物体基因组的技术&#xff0c;近年来受到了广泛的关注。 而计算机生物科技作为连接计算机科学与生物学的桥梁&#xff0c;为基因编辑技术的快速发展提供了强大的支持。通过利用计算机算法和数据分析方法&#xff0c;研究人…

Java基础学习笔记三

环境变量CLASSPATH classpath环境变量是隶属于java语言的&#xff0c;不是windows操作系统的&#xff0c;和PATH环境变量完全不同classpath环境变量是给classloader&#xff08;类加载器&#xff09;指路的java A 。执行后&#xff0c;先启动JVM&#xff0c; JVM启动classload…

反射 Reflection

反射 反射的概念 反射机制允许程序在执行期借助于ReflectionAPI取得任何类的内部信息(比如成员变量&#xff0c;构造器&#xff0c;成员方法等等)&#xff0c;并能操作对象的属性及方法。反射在设计模式和框架底层都会用到加载完类之后&#xff0c;在堆中就产生了一个Class类型…

集合Python开发环境搭建

目录 PyCharm搭建Python环境_非虚拟环境 Pycharm的优点 Pycharm的缺点 Pycharm的下载 Pycharm环境配置 VSCode搭建Python环境_非虚拟环境 VSCode的优点 VSCode的缺点 VSCode的下载 VSCode环境配置 虚拟环境使用 虚拟环境介绍 虚拟环境安装 创建虚拟环境 切换虚拟…

使用 Vue CLI 创建一个 Vue2 项目

全局安装 Vue CLI 参考官网 Vue CLI&#xff0c;安装命令如下 npm install -g vue/cli 目前 Vue CLI 的最新版本为 v5.0.8 创建 Vue2 项目 在希望创建项目的目录下打开命令行&#xff0c;键入命令 vue create my-project 其中 my-project 更改为自己需要的项目名 随后&a…

R语言程序设计(零基础速通R语言语法和常见函数的使用)

目录 1.Rstudio中的一些快捷键 2.R对象的属性 3.R语言中常用的运算符​编辑 4.R的数据结构 向量 如何建立向量&#xff1f; 如何从向量里面提取元素&#xff1f; 矩阵 如何建立矩阵&#xff1f; 如何从矩阵里面提取元素&#xff1f; 数据框 如何建立数据框&#xf…

行业逆行者倪张根的十数年

在2015年的一场发布会上,梦百合家居董事长倪张根接受完全国80多家媒体的群访后,突然起身深深鞠了一躬,把在场的记者们吓了一跳。 对此,倪张根直接、坦率地承认“就是想讨好在座的各位”,这种不够柔和、不够世故的直球表达方式,在这个向来讲究中庸的社会,有种让人避之不及却又惊…

idea maven 项目融合

背景 &#xff1a;项目A 和项目B 是两个独立的多模块项目&#xff0c;项目A 和项目B &#xff0c;均为独立的数据源 。其中项目B 有两个数据原。 需要将项目B 以多模块的方式融合进项目A。 解决版本。建立项目C&#xff0c;只含有pom的&#xff0c;空项目&#xff0c;项目A和项…

【经验分享】Wubuntu------体验Windows和Ubuntu的结合体

【经验分享】Wubuntu------体验Windows和Ubuntu的结合体 最近看到有一款Wubuntu的文章&#xff0c;对于习惯使用windows操作系统&#xff0c;又不熟悉ubuntu系统的程序员小白来说&#xff0c;可以说是福音了。目前的Wubuntu兼容性可能还有一点问题&#xff0c;如果再迭代几次的…

nodejs 使用express插件multer文件上传,接收不到文件的bug

把路径改成绝对路径即可 改成 temp是你想上传到文件夹的路径&#xff0c;一般是在项目根目录下

pinia的使用vue3

1.安装pinia pinia持久化工具pinia-plugin-persist npm install pinia pinia-plugin-persist -D -S2.使用pinia main.js import store from "//store"; app.use(store);index.js import { createPinia } from "pinia"; import piniaPluginPersist fro…

攻防世界新手模式例题(Web)

PHP2 首先我们查看页面&#xff0c;查看前端代码 发现均没有什么有效信息&#xff0c;由题目可知&#xff0c;此问题与php相关&#xff0c;于是我们可以看一下他的index.php文件 查看时用?index.phps 补充知识&#xff1a;phps文件就是php的源代码文件&#xff0c;通常用于…

【超图】白模数据如何与抽屉效果结合,展示白膜内部结构

作者&#xff1a;taco 最近在支持的过程中&#xff0c;客户在看别的项目中&#xff0c;发现白模是可以抽插的。而非单独一个白色模型建筑。那么如何使用SuperMap产品来实现抽插的效果呢&#xff1f;本篇文章结合SuperMap iDesktopX产品以及SuperMap iClient for Cesium产品进行…

工业级5g路由器使用案例(5g智慧安防解决方案)

​项目背景: 现代化智慧安防需要满足远程可视化监控、设备联网管理、数据加密传输等多重需求,对通信网络的带宽、时延、安全性等提出了很高要求。业内急需一款高可靠、高性能、易管理的通信网关设备,来确保安防系统的顺利运行。 安装部署: SR800-D路由器采用紧凑型全金属机箱…

【Linux进阶之路】HTTPS = HTTP + S

文章目录 一、概念铺垫1.Session ID2.明文与密文3.公钥与私钥4.HTTPS结构 二、加密方式1. 对称加密2.非对称加密3.CA证书 总结尾序 一、概念铺垫 1.Session ID Session ID&#xff0c;即会话ID&#xff0c;用于标识客户端与服务端的唯一特定会话的标识符。会话&#xff0c;即客…

后端系统开发之——接口参数校验

今天难得双更&#xff0c;大家点个关注捧个场 原文地址&#xff1a;后端系统开发之——接口参数校验 - Pleasure的博客 下面是正文内容&#xff1a; 前言 在上一篇文章中提到了接口的开发&#xff0c;虽然是完成了&#xff0c;但还是缺少一些细节——传入参数的校验。 即用户…

TCP - 传输控制协议

TCP - 传输控制协议 是一种面向连接的可靠传输协议。 特点&#xff1a; TCP是面向连接&#xff08;虚连接&#xff09;的传输层协议。 每一条TCP连接有且只能有两个端点。 可靠、有序、无丢弃和不重复。 TCP协议提供全双工通讯。 发送缓存 存放发送方TCP准备发送的数据。T…