SuperMap iClient3D for WebGL 场景美化之飞线

2024-02-25 08:38

本文主要是介绍SuperMap iClient3D for WebGL 场景美化之飞线,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

作者:Taco

前言

        之前有过一篇美化场景的文章,而那篇文章主要是通过添加各种各样的光源来实现的,先给整个场景一个环境光把场景的亮度调暗,再通过添加各式各样的光源(点光源,平行光源,聚光源)来使得场景看起来更加美观。但是这样的场景依然显得空落落的,空的区域还是占了很多。那么该加一些什么让场景看起来好看一些呢?

        在有些案例中会绘制一些向上移动的线条这里简称成飞线,用来添补上空荡的场景。从直观效果感觉,会比常规的场景更加的吸引一些眼球。显得更富有科技感,更加的炫酷!那么,这些飞线是如何实现的呢?

一,实现思路

        说到点线面的添加,其实第一个想法就是实体(entity),那么用实体能够实现这种效果么?当然!是可以的!官网的示例中有一个与我们最后想实现的效果是类似的,没错!它就是尾迹线!(http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#airlinesTrailLines)只不过尾迹线是从一个地区向另一个地区的移动,而我们要实现的是从底部竖直向上的移动。实现的方法依然是类似的。

        那么具体实现的方法是什么呢?先来看下接口。

       需要使用到的接口就是 PolylineTrailMaterialProperty 尾迹线材质类。通过修改线条的材质信息让我们的线更加的美观。关于尾迹线的绘制之前有文章已经介绍过了可以通过这个链接去查看到(SuperMap iClient3D for WebGL教程(Entity)-PolylineGraphics_SuperMap技术控-CSDN博客)

二,实现代码

viewer.entities.add({ // 尾迹线polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([longitude, latitude, height, longitude, latitude,height + 500]),width: 4, // 线的宽度,像素为单位material: new Cesium.PolylineTrailMaterialProperty({ // 尾迹线材质color: Cesium.Color.fromCssColorString(rgbColor(1)), //给一个随机的颜色值trailLength: 0.18,period: 2.0})}});

这样我们就绘制除了一个尾迹线的效果,如果场景中需要的是单一的一种颜色,我们可以去修改它的color值,改成Cesium.Color.fromCssColorString("rgba(118, 233, 241, 1)")改成单色即可。而这里为了让场景更加的丰富多彩一些,给了随机的颜色值,rgbColor()。

function rgbColor(a) {var r = Math.floor(Math.random() * 256); //随机r的值var g = Math.floor(Math.random() * 256); //随机g的值var b = Math.floor(Math.random() * 256); //随机b的值if (a || a == 0) {return "rgba(" + r + "," + g + "," + b + "," + a + ")"} else {return "rgb(" + r + "," + g + "," + b + ")"}}

将随机的颜色值传回来就可以达到缤纷多彩的飞线效果啦。

三,实现效果

 

 

 

这篇关于SuperMap iClient3D for WebGL 场景美化之飞线的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/744948

相关文章

java如何实现高并发场景下三级缓存的数据一致性

《java如何实现高并发场景下三级缓存的数据一致性》这篇文章主要为大家详细介绍了java如何实现高并发场景下三级缓存的数据一致性,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 下面代码是一个使用Java和Redisson实现的三级缓存服务,主要功能包括:1.缓存结构:本地缓存:使

C++中detach的作用、使用场景及注意事项

《C++中detach的作用、使用场景及注意事项》关于C++中的detach,它主要涉及多线程编程中的线程管理,理解detach的作用、使用场景以及注意事项,对于写出高效、安全的多线程程序至关重要,下... 目录一、什么是join()?它的作用是什么?类比一下:二、join()的作用总结三、join()怎么

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

python中Hash使用场景分析

《python中Hash使用场景分析》Python的hash()函数用于获取对象哈希值,常用于字典和集合,不可变类型可哈希,可变类型不可,常见算法包括除法、乘法、平方取中和随机数哈希,各有优缺点,需根... 目录python中的 Hash除法哈希算法乘法哈希算法平方取中法随机数哈希算法小结在Python中,

Python主动抛出异常的各种用法和场景分析

《Python主动抛出异常的各种用法和场景分析》在Python中,我们不仅可以捕获和处理异常,还可以主动抛出异常,也就是以类的方式自定义错误的类型和提示信息,这在编程中非常有用,下面我将详细解释主动抛... 目录一、为什么要主动抛出异常?二、基本语法:raise关键字基本示例三、raise的多种用法1. 抛

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解