cesium 车流_vue中cesium自定义材料之流动线条效果-CSDN博客

本文链接：https://blog.csdn.net/weixin_28685487/article/details/111978712

本文介绍了如何在Vue项目中利用Cesium创建流动线条效果，模拟车流轨迹。通过定义`PolylineTrailLinkMaterialProperty`实现自定义材料，结合颜色、持续时间和当前时间来更新线条的状态。同时，展示了Cesium材质源代码，以展示流动纹理线的实现细节。

摘要由CSDN通过智能技术生成

import Cesium from 'cesium/Cesium'

/*流动纹理线

color 颜色

duration 持续时间毫秒*/

functionPolylineTrailLinkMaterialProperty (color, duration) {this._definitionChanged = newCesium.Event()this._color =undefinedthis._colorSubscription =undefinedthis.color =colorthis.duration =durationthis._time = newDate().getTime()

}

Cesium.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {

isConstant: {

get:function() {return false}

definitionChanged: {

get:function() {return this._definitionChanged

}

color: Cesium.createPropertyDescriptor('color')

})

PolylineTrailLinkMaterialProperty.prototype.getType= function(time) {return 'PolylineTrailLink'}

PolylineTrailLinkMaterialProperty.prototype.getValue= function(time, result) {//debugger

if (!Cesium.defined(result)) {

result={}

}

result.color=Cesium.Property.getValueOrClonedDefault(this._color,

time,

Cesium.Color.WHITE,

result.color

)

result.image=Cesium.Material.PolylineTrailLinkImage

result.time=((new Date().getTime() - this._time) % this.duration) / this.durationreturnresult

}

PolylineTrailLinkMaterialProperty.prototype.equals= function(other) {return(this === other ||(otherinstanceof PolylineTrailLinkMaterialProperty &&Property.equals(this._color, other._color))

)

}

Cesium.PolylineTrailLinkMaterialProperty=PolylineTrailLinkMaterialProperty

Cesium.Material.PolylineTrailLinkType= 'PolylineTrailLink'Cesium.Material.PolylineTrailLinkImage= require('../assets/layout/cable.png')

Cesium.Material.PolylineTrailLinkSource=

'czm_material czm_getMaterial(czm_materialInput materialInput)\n\

{\n\

czm_material material = czm_getDefaultMaterial(materialInput);\n\

vec2 st = materialInput.st;\n\

vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\

material.alpha = colorImage.a * color.a;\n\

material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\