cesium实现道路闪烁线效果

文章目录

1.实现效果
2.实现方法
- 2.1实现思路
- 2.2具体代码
- - 2.2.1材质
  - 2.2.2调用

Cesium实战系列文章总目录：传送门

1.实现效果

2.实现方法

2.1实现思路

通过修改线的materialProperty材质实现，根据时间变化动态设置透明度。

2.2具体代码

2.2.1材质

将材质封装为lineFlickerMaterialProperty.js，代码如下：

/** @Description: 闪烁线材质* @Version: 1.0* @Author: Julian* @Date: 2022-03-30 16:40:09* @LastEditors: Julian* @LastEditTime: 2022-03-30 17:22:04*/
class LineFlickerMaterialProperty {constructor(options) {this._definitionChanged = new Cesium.Event();this._color = undefined;this._speed = undefined;this.color = options.color;this.speed = options.speed;};get isConstant() {return false;}get definitionChanged() {return this._definitionChanged;}getType(time) {return Cesium.Material.LineFlickerMaterialType;}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, 5.0, result.speed);return result}equals(other) {return (this === other ||(other instanceof LineFlickerMaterialProperty &&Cesium.Property.equals(this._color, other._color) &&Cesium.Property.equals(this._speed, other._speed)))}
}Object.defineProperties(LineFlickerMaterialProperty.prototype, {color: Cesium.createPropertyDescriptor('color'),speed: Cesium.createPropertyDescriptor('speed'),
})Cesium.LineFlickerMaterialProperty = LineFlickerMaterialProperty;
Cesium.Material.LineFlickerMaterialProperty = 'LineFlickerMaterialProperty';
Cesium.Material.LineFlickerMaterialType = 'LineFlickerMaterialType';
Cesium.Material.LineFlickerMaterialSource =`
uniform vec4 color;
uniform float speed;
czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);float time = fract( czm_frameNumber  *  speed / 1000.0);vec2 st = materialInput.st;float scalar = smoothstep(0.0,1.0,time);material.diffuse = color.rgb * scalar;material.alpha = color.a * scalar ;return material;
}
`Cesium.Material._materialCache.addMaterial(Cesium.Material.LineFlickerMaterialType, {fabric: {type: Cesium.Material.LineFlickerMaterialType,uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),speed: 5.0,},source: Cesium.Material.LineFlickerMaterialSource},translucent: function(material) {return true;}
})

2.2.2调用

引入材质js文件后，加载道路线状文件，并设置其材质即可。调用代码如下：

// 道路闪烁线
Cesium.GeoJsonDataSource.load("../data/road_railway.geojson").then(function(dataSource) {viewer.dataSources.add(dataSource);const entities = dataSource.entities.values;// 聚焦viewer.zoomTo(entities);for (let i = 0; i < entities.length; i++) {let entity = entities[i];entity.polyline.width = 3.0;// 设置材质entity.polyline.material = new Cesium.LineFlickerMaterialProperty({color: Cesium.Color.YELLOW,// 设置随机变化速度speed: 20 * Math.random(),})}
});

cesium实现道路闪烁线效果相关推荐

cesium实现道路穿梭线效果
文章目录 1.实现效果 2.实现方法 2.1加载GeoJson道路线状数据 2.2设置每个entity的样式 2.3材质设置 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法 2. ...
高逼格UILabel的闪烁动画效果
高逼格UILabel的闪烁动画效果最终效果图如下: 源码: YXLabel.h 与 YXLabel.m // // YXLabel.h // // Created by YouXianMing o ...
php生成文字闪烁,如何用jquery实现闪烁文字效果
用jquery实现闪烁文字效果的方法:首先获取到最新一条记事的pid,并在添加成功后来闪动这条记事:然后闪动的方法可以写到函数里,直接调用:最后有闪动就要有定时器,开启定时器即可. 本教程操作环境:w ...
GIS实战应用案例100篇（十六）-CASS道路横断面线，如何折线变直线？
前言 CASS绘制的道路横断面线是一条垂直纵断面线的直线.而实地采集的断面点连线,是一条折线.应该采用折线还是直线?如何将折线变成直线? 怎么解决折线变曲线的操作步骤: 1.绘制纵断面线在命令行输入 ...
html怎么在字体中加波浪线,CSS3实现文字波浪线效果
前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...
echart实现3d地图_3D飞线效果——让线“飞”起来的秘密
在城市规划.统计.交通等行业,地图可视化已成为最直接也最吸引眼球的一种表达方式.例如人群迁徙.人口流动.OD出行.职住分析.客流来源等众多场景都需要用到飞线效果呈现. 2D飞线效果图随着可视化技术的 ...
canvas绘制飞线效果
在我们做的可视化大屏项目中,经常会遇到飞线的效果. 在我们的大屏编辑器中,可以通过拖拽+配置参数的方式很快就能够实现.下面是我们使用大屏编辑器实现的一个项目效果: 中间地图就有飞线的效果. 抛开编辑器 ...
shader实现飞线效果(three.js练习)
一.先看看效果二.实现方法: 1.飞线的相关配置数据准备 // 飞线效果的相关配置数据 const flyData = [{start: { //起始点位置x: 0,y: 0,z: 0},end: ...
CSS3实现闪烁动画效果
给class属性名为className的元素添加闪烁动画效果 .className{ -webkit-animation: twinkling 1s infinite ease-in-out ...

cesium实现道路闪烁线效果

文章目录

1.实现效果

2.实现方法

2.1实现思路

2.2具体代码

2.2.1材质

2.2.2调用

cesium实现道路闪烁线效果相关推荐

最新文章

热门文章