直接上代码

图片：

自行旋转图片为横的

代码：

import * as Cesium from 'cesium/Cesium'
class PolylineTrailMaterial {constructor(option = {}) {this._definitionChanged = new Cesium.Event()this._color = undefinedthis._colorSubscription = undefinedthis._time = (new Date()).getTime()this.color = option.color ? option.color : Cesium.Color.fromCssColorString('rgba(90,90,255, 1)')this.duration = option.duration ? option.duration : 5000this.img = option.img ? option.img : require('../../assets/image/color2.png')// 类型（会自动加载到cesium中）this.type = option.type ? option.type : 'PolylineTrail'// 着色器this.source = option.source ? option.source : '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 * color.a;' +'material.diffuse = (colorImage.rgb+color.rgb)/2.0;' +'return material;' +'}'this.addMaterial()}getType() {return 'PolylineTrail'}getValue(time, result) {if (!Cesium.defined(result)) {result = {}}result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color)result.image = this.imgresult.time = (((new Date()).getTime() - this._time) % this.duration) / this.durationreturn result}equals(other) {return this === other || (other instanceof PolylineTrailMaterial && Cesium.Property.equals(this._color, other._color))}addMaterial() {Cesium.Material._materialCache.addMaterial(this.type, {fabric: {type: this.type,uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),image: this.img,time: 100},source: this.source},translucent: (material) => {return true}})// 注意Cesium.defineProperties会报错，需要改为ObjectObject.defineProperties(PolylineTrailMaterial.prototype, {isConstant: {get: () => {return false},configurable: true},definitionChanged: {get: () => {return this._definitionChanged},configurable: true},color: {value: Cesium.createPropertyDescriptor('color'),configurable: true,writable: true}})}
}
export default PolylineTrailMaterial

对于如何自定义材质有问题的，可以查看这个链接的代码

源码例子

Cesium 动态轨迹线 ES6版本相关推荐

Cesium|xt3d动态轨迹线
Cesium|xt3d动态轨迹线效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head& ...
Cesium实现动态绘制轨迹线
需求就是一个飞机动画,飞机飞到哪里,轨迹线就画到哪里. 我的轨迹线非常长,从我国出发一直到欧洲那边,光是经过的点就有7000多个. 刚开始的时候想要使用的是entity的画线方法进行轨迹线的绘制,如果 ...
VUE+Cesium 初始化地球，加载三维模型（.glb），绘制轨迹线，homebutton 按键重写（默认定位位置的设置）
Cesium是什么我们打开Cesium官网,能够很清晰的看到官方赋予Cesium的使命,即构建世界一流的3D地理空间应用程序.那Cesium到底是个什么东东呢? Cesium是一个跨平台.跨浏览器的 ...
Windows HTML本地快速渲染轨迹线
有时候需要排查原始数据是否有问题,最直接的就是可视化看效果. Windows渲染有多种方法,可以用mapbox.echarts.也可以用minedata等: echarts渲染轨迹线 minedata ...
【Android NDK 开发】Android.mk 配置动态库 ( Android Studio 配置动态库 | 动态库加载版本限制 | 本章仅做参考推荐使用 CMake 配置动态库 )
文章目录 I . Android Studio 中使用 Android.mk 配置动态库总结 II . 第三方动态库来源 III . 配置 Android.mk 构建脚本路径 IV . 预编译第三 ...
ES6-1 ES6版本过渡历史
一历史 HTML HTML 1, HTML 2, HTML 3 1991-1997 IETF(the Internet Engineering Task Force) 国际互联网工程任务组 1997 ...
cesium动态绘制圆，矩形，自定义区域
cesium动态绘制圆,矩形,自定义区域自己封装了一个类,可以放在js文件中引入项目,具体使用和代码如下 class Draw {constructor(viewer, config) {/**ce ...
OpenGL中绘制轨迹线
在加载进模型后,有时候需要根据模型的移动来绘制轨迹线,假设该轨迹由机器人模型的某个关节,通过机器人关节的移动绘制出,思路如下: 获取机器人模型该关节在世界坐标系中的模型矩阵根据模型矩阵及起点坐标的值 ...
百度地图api实现渐变色轨迹线
使用百度地图api实现的渐变色轨迹线,效果如下: 实现方法: 1.百度地图api使用首先引入百度地图api的依赖文件 <script type="text/javascript&qu ...

Cesium 动态轨迹线 ES6版本

直接上代码

Cesium 动态轨迹线 ES6版本相关推荐

最新文章

热门文章