cesium实现道路穿梭线效果

文章目录

1.实现效果
2.实现方法
- 2.1加载GeoJson道路线状数据
- 2.2设置每个entity的样式
- 2.3材质设置

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

1.实现效果

2.实现方法

2.1加载GeoJson道路线状数据

使用Cesium的GeoJsonDataSource接口添加线状道路geojson文件。

  // 道路穿梭线Cesium.GeoJsonDataSource.load("./data/road1.geojson").then(function(dataSource) {this.viewer.dataSources.add(dataSource);const entities = dataSource.entities.values;for (let i = 0; i < entities.length; i++) {let entity = entities[i];entity.polyline.width = 1.7;entity.polyline.material = new Cesium.Spriteline1MaterialProperty(1000, './data/pictures/spriteline1.png');}});

2.2设置每个entity的样式

遍历加载后文件的entity，将其材质设置为自定义的传输线材质。

2.3材质设置

参考gitee上的开源代码，将材质文件保存为单独的js文件，在进行entity材质赋值时直接调用即可。主要的逻辑实现代码是下文中的几行WebGL代码。

/***  精灵穿梭路光效果，*  参考gitee开源*  entity的材质使用MaterialProperty,而primitive使用的是material。*  @Data：2022-01-11*/function Spriteline1MaterialProperty(duration, image) {this._definitionChanged = new Cesium.Event()this.duration = durationthis.image = imagethis._time = performance.now()
}
Object.defineProperties(Spriteline1MaterialProperty.prototype, {isConstant: {get: function() {return false},},definitionChanged: {get: function() {return this._definitionChanged},},color: Cesium.createPropertyDescriptor('color'),duration: Cesium.createPropertyDescriptor('duration')
})
Spriteline1MaterialProperty.prototype.getType = function(time) {return 'Spriteline1'
}
Spriteline1MaterialProperty.prototype.getValue = function(time,result
) {if (!Cesium.defined(result)) {result = {}}result.image = this.imageresult.time =((performance.now() - this._time) % this.duration) / this.durationreturn result
}
Spriteline1MaterialProperty.prototype.equals = function(e) {return (this === e ||(e instanceof Spriteline1MaterialProperty && this.duration === e.duration))
}
Cesium.Spriteline1MaterialProperty = Spriteline1MaterialProperty
Cesium.Material.Spriteline1Type = 'Spriteline1'
Cesium.Material.Spriteline1Source = `
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));
material.alpha = colorImage.a;
material.diffuse = colorImage.rgb * 1.5 ;
return material;
}
`// st :二维纹理坐标// czm_material：保存可用于照明的材质信息
Cesium.Material._materialCache.addMaterial(Cesium.Material.Spriteline1Type, {fabric: {type: Cesium.Material.Spriteline1Type,uniforms: {color: new Cesium.Color(1, 0, 0, 0.5),image: '',transparent: true,time: 20,},source: Cesium.Material.Spriteline1Source,},translucent: function(material) {return true},
})

cesium实现道路穿梭线效果相关推荐

cesium实现道路闪烁线效果
文章目录 1.实现效果 2.实现方法 2.1实现思路 2.2具体代码 2.2.1材质 2.2.2调用 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法 2.1实现思路通过修改线的 ...
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: ...
php加波浪线不解析,给文字加波浪线效果
这次给大家带来给文字加波浪线效果,给文字加波浪线效果的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了lin ...
android 图片底部波浪线,Android实现波浪线效果（xml bitmap）
我们要实现的效果如下: 在这之前先带大家了解一下xml bitmap,何为xml bitmap? xml bitmap是一个用xml定义的文件放在资源目录,定义的对象是图片,为bitmap定义别名,这 ...
html怎么下划波浪线,CSS3如何实现文字波浪线效果
CSS3如何实现文字波浪线效果发布时间:2021-06-29 11:40:23 来源:亿速云阅读:92 作者:小新这篇文章主要介绍CSS3如何实现文字波浪线效果,文中介绍的非常详细,具有一定的参 ...

cesium实现道路穿梭线效果

文章目录

1.实现效果

2.实现方法

2.1加载GeoJson道路线状数据

2.2设置每个entity的样式

2.3材质设置

cesium实现道路穿梭线效果相关推荐

最新文章

热门文章