Cesium 迁徙图,飞线、动态圆。

效果图放前面

  • 符合你预期效果往下看,不符合出门右转,不耽搁大家时间。
    请添加图片描述

流光线

这个流光线网上其实都有很多案例

  • 第一步绘制抛物线
    里面有些配置参数已经添加了说明。
//抛物线绘制
function parabola(twoPoints: number[]) {let s: number[] = []let startPoint = [twoPoints[0], twoPoints[1], 0]; //起点的经度、纬度s = s.concat(startPoint)let step = 80;  //线的多少,越多则越平滑(但过多浏览器缓存也会占用越多)let heightProportion = 0.125; //最高点和总距离的比值let dLon = (twoPoints[2] - startPoint[0]) / step;  //经度差值let dLat = (twoPoints[3] - startPoint[1]) / step;  //纬度差值let deltaLon = dLon * Math.abs(111000 * Math.cos(twoPoints[1]));  //经度差(米级)let deltaLat = dLat * 111000;  //纬度差(米),1纬度相差约111000米let endPoint = [0, 0, 0];  //定义一个端点(后面将进行startPoint和endPoint两点画线)let heigh: number = step * Math.sqrt(deltaLon * deltaLon + deltaLat * deltaLat) * heightProportion * 2let x2 = (10000 * Math.sqrt(dLon * dLon + dLat * dLat)); //小数点扩大10000倍,提高精确度let a = (heigh / (x2 * x2));function y(x: number, height: number) { return height - a * x * x; }for (var i = 1; i <= step; i++) {  //逐“帧”画线endPoint[0] = startPoint[0] + dLon; //更新end点经度endPoint[1] = startPoint[1] + dLat; //更新end点纬度let x = x2 * (2 * i / step - 1);  //求抛物线函数xendPoint[2] = y(x, heigh) * 1;  //求end点高度s = s.concat(endPoint)// end点变为start点startPoint[0] = endPoint[0];startPoint[1] = endPoint[1];startPoint[2] = endPoint[2];}return Cesium.Cartesian3.fromDegreesArrayHeights(s)
}
  • 第二步添加曲线

就是cesium常用的primitive方式

let mm = parabola(i)const polyline = new Cesium.PolylineGeometry({positions: mm,width: 2});const instance = new Cesium.GeometryInstance({geometry: polyline,id: 'flyline',
})const pi = viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: [instance],appearance: getFlylineMaterial1(),releaseGeometryInstances: false,compressVertices: false,}))
  • 第三步添加材质

重点来了

变量或函数解释:
czm_frameNumber:cesium内置变量,随时间变化的帧数
mix:混合函数
smoothstep:样条插值
纹理坐标st.s纵向,st.t横向,随着时间不断移动材质的位置

function getFlylineMaterial1() {return new Cesium.PolylineMaterialAppearance({material: new Cesium.Material({fabric: {type: 'test',uniforms: {speed: 20,repeat: 1,color: Cesium.Color.fromCssColorString('rgba(0, 209, 237,.1)'), // 线段颜色flowColor: Cesium.Color.fromCssColorString('rgba(0, 181, 255,1)'), // 流光颜色flowSpeed: 0.01, // 流光速度flowIntensity: 1.0, // 流光强度startTime: Math.random()},source: /* glsl */ `uniform vec4 color;uniform vec4 flowColor;uniform float speed;uniform float repeat;uniform float startTime;czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);//st.s纵向 st.t横向vec2 st = materialInput.st;float time = fract(czm_frameNumber * speed / 1000.0 + startTime);float offset = fract(st.s*repeat - time);//mix混合 smoothstep样条插值vec4 ackColor = mix(color, flowColor, smoothstep(1.0 - offset, 1.0 + offset, st.s));material.diffuse = ackColor.rgb;material.alpha = ackColor.a;material.emission = ackColor.rgb * 0.5;return material;}`}})})
}

动态扩散圆

逻辑是和上面一致的
着色器中的材质代码:
discard:用于丢弃当前片段(像素)的渲染。当在片段着色器中遇到 discard 关键字时,当前片段将被丢弃,不会参与后续的渲染过程。白话(不渲染)

 viewer.scene.groundPrimitives.add(new Cesium.GroundPrimitive({geometryInstances: new Cesium.GeometryInstance({geometry: new Cesium.EllipseGeometry({center: Cesium.Cartesian3.fromDegrees(i[2], i[3]),semiMajorAxis: 30000.0,semiMinorAxis: 30000.0,}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)}}),appearance: new Cesium.MaterialAppearance({vertexShaderSource: ``,material: new Cesium.Material({fabric: {type: 'dynamics point',uniforms: {color: new Cesium.Color(1, 1, 0, 0.7),speed: 12.0,count: 2,gradient: 0.2,},source: /* glsl */ `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 < 5; i++) {// 在循环中执行操作// }for(int i = 0; i <= 5; 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;}`},}),})}))

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

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

相关文章

Android 13 Hotseat定制化修改——001 hotseat布局方向

目录 一.背景 二.hotseat布局方向 一.背景 由于需求是需要自定义修改Hotseat,所以此篇文章是记录如何自定义修改hotseat的,应该可以覆盖大部分场景,修改点有修改hotseat布局方向,hotseat图标数量,hotseat图标大小,hotseat布局位置,hotseat图标禁止形成文件夹,hotseat图…

单细胞分类和预测任务

对于分类和预测任务&#xff0c;在生物信息学领域有一些常用的方法和工具可以使用。以下是一些常见的方法和工具&#xff1a; 1. 机器学习方法&#xff1a; 包括支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;、随机森林&#xff08;Random Forest…

linux安装C++ opencv

1. 安装依赖 opencv中的一些图像、视频相关的功能需要一些依赖&#xff0c;因此在安装opencv之前需要先安装这些依赖&#xff1b;在使用apt安装相关依赖时&#xff0c;会出现无法安装的情况&#xff0c;这时可以用aptitude来降级安装。 名称apt package 名称功能编译系统buil…

7.6 创建对象内存分析

7.6 创建对象内存分析 主程序实例 package com.baidu.www.oop;import com.baidu.www.oop.demo03.Pet;public class Application {public static void main(String[] args) {Pet dog new Pet();dog.name "旺财";//这里的对象的属性在类中需要定义为public&#xff…

mongodb-win32-x86_64-2008plus-3.4.24-signed.msi

Microsoft Windows [版本 6.1.7601] 版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\Administrator>cd C:\MongoDB\Server\3.4\binC:\MongoDB\Server\3.4\bin>C:\MongoDB\Server\3.4\bin>mongod --help Options:General options:-h [ --help ] …

【C# 基础精讲】条件语句:if、else、switch

条件语句是C#编程中用于根据条件执行不同代码块的关键结构。C#支持if、else和switch三种常见的条件语句&#xff0c;它们允许根据表达式的结果决定程序的执行路径。在本文中&#xff0c;我们将详细介绍这三种条件语句的语法和使用方法。 if语句 if语句用于在给定条件为真&…

Linux Shell 编程入门

从程序员的角度来看&#xff0c; Shell本身是一种用C语言编写的程序&#xff0c;从用户的角度来看&#xff0c;Shell是用户与Linux操作系统沟通的桥梁。用户既可以输入命令执行&#xff0c;又可以利用 Shell脚本编程&#xff0c;完成更加复杂的操作。在Linux GUI日益完善的今天…

嵌入式虚拟仿真实验教学平台之串口发送数据

嵌入式虚拟仿真实验教学平台课程系列 串口发送数据实验 课程内容 本实验使用 STM32 的串口发送数据。开始仿真后,打开串口监视器&#xff0c;串口监视器会打印出要发送的数据。 课程目标 学习配置使用GPIO功能学习配置使用复用功能学习配置使用UART功能 硬件设计 本课程…

整理出来的精选shiro面试题

1、简要介绍Shiro框架吗? Apache Shiro是Java的安全框架。 使用Shiro&#xff0c;可以轻松地开发足够好的APP应用程序。 这不仅可以用于JavaSE环境&#xff0c;也可以用于JavaEE环境。 Shiro提供了身份验证、许可、加密、会话管理、与Web集成和缓存等功能。 三个核心组件&am…

微信小程序如何配置并使用less?

1&#xff0c;检查微信开发者工具&#xff08;工具版本1.03&#xff09;————这步很重要不然后面按步骤实行后会发现急死你也还是不管用&#xff0c;我之前死在过这一步&#xff0c;所以大家不要再次踩坑了 ~ ~ 。。。 2&#xff0c;在VScode中下载Less插件 3&#xff0c;…

uni-app:分页实现多选功能

效果 代码解析 一、标签-列表 <view class"item_all" v-for"(item, index) in info" :key"index"><view class"position parameter-info text-over" :class"{checked_parameter: item.checked}" :data-id"i…

SSH 认证原理

SSH协议登录服务器&#xff1a; $ ssh userhost 主要有两种登录方式&#xff1a;第一种为密码口令登录&#xff0c;第二种为公钥登录 密码口令登录 通过密码进行登录&#xff0c;主要流程为&#xff1a; 1、客户端连接上服务器之后&#xff0c;服务器把自己的公钥传给客户端…

界面控件DevExpress.Drawing图形库早期增强功能分享

众所周知&#xff0c;DevExpress在v22.2发布周期中引入了全新的DevExpress.Drawing图形库&#xff08;并且已经在随后的小更新中引入了一系列增强功能&#xff09;。 在这篇博文中&#xff0c;我们将总结在DevExpress v23.1中解决的一些问题&#xff0c;以及在EAP构建中为以下…

C++中点云聚类算法的实现与应用探索

第一部分&#xff1a;C中点云聚类算法的实现与应用 在当今的计算机视觉领域&#xff0c;点云数据是一种重要的三维数据类型&#xff0c;它能有效表达三维物体的形状信息。然而&#xff0c;由于点云数据的无序性和稀疏性&#xff0c;对其进行分析与处理的难度较大。本文将介绍如…

Android 13 Hotseat定制化修改——006 hotseat图标禁止移动到Launcher中

目录 一.背景 二.方案 三.具体实践 一.背景 客户定制需要修改让hotseat中的icon不要移动到Launcher中,所以需要进行定制 二.方案 原生的Hotseat与Launcher是可以相互移动的,然后现在的需求是Hotseat中的图标只能在Hotseat中移动,所以需要做下限制 思路:在事件拦截的地…

代码随想录算法训练营day59

文章目录 Day59 下一个更大元素II题目思路代码 接雨水题目思路代码 Day59 下一个更大元素II 503. 下一个更大元素 II - 力扣&#xff08;LeetCode&#xff09; 题目 给定一个循环数组&#xff08;最后一个元素的下一个元素是数组的第一个元素&#xff09;&#xff0c;输出每…

ChatGPT“侵入”校园,教学评价体制受冲击,需作出调整

北密歇根大学的教授奥曼在学生作业中发现了一篇关于世界宗教的“完美论文”。“这篇文章写得比大多数学生都要好......好到不符合我对学生的预期&#xff01;”他去问ChatGPT&#xff1a;“这是你写的吗&#xff1f;”ChatGPT回答&#xff1a;“99.9%的概率是的。” ChatGPT“侵…

【Axure 教程】动态面板

【动态面板】是 Axure 中另外一个神级的元件&#xff0c;它的江湖地位可以说跟【中继器】不相上下&#xff0c;【动态面板】提供了简单的配置&#xff0c;却可以实现非常丰富的效果&#xff0c;在实际设计中应用非常广泛。 对于刚入门的产品经理来说&#xff0c;学习【动态面板…

AndroidStudio学习笔记

AndroidStudio学习笔记/踩坑 webview组件和其他组件起冲突问题解决方法原因 webview组件和其他组件起冲突 问题 webview和NestedScrollView组件一起使用时,会出现webview无法滑动的问题 解决方法 NestedScrollView nestedScrollView getView().findViewById(R.id.mine_scro…

Bootload U-Boot分析

Bootloader是在操作系统运行之前执行的一段小程序。通过这段小程序可以初始化硬件设备、建立内存空间的映射表&#xff0c;从而建立适当的系统软硬件环境&#xff0c;为最终调用操作系统内核做好准备。 对于嵌入式系统&#xff0c;Bootloader是基于特定硬件平台来实现的。因此…