一、扩展材质
function PolylineTrailMaterial(options) {options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);this._definitionChanged = new Cesium.Event();// 变量初始化this.color = Cesium.defaultValue(options.color && new Cesium.Color.fromCssColorString(options.color), Cesium.Color.RED);this.image = options.image || '';this.duration = options.duration || 1000;this.time = (new Date()).getTime();}// 材质类型PolylineTrailMaterial.prototype.getType = function (time) {return "PolylineTrail";};// 这个方法在每次渲染时被调用,result的参数会传入glsl中。PolylineTrailMaterial.prototype.getValue = function (time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrClonedDefault(this.color, time, Cesium.Color.WHITE, result.color);result.image = Cesium.Property.getValueOrClonedDefault(this.image);result.time = (((new Date()).getTime() - this.time) % this.duration) / this.duration;return result;};PolylineTrailMaterial.prototype.equals = function (other) {return this === other ||other instanceof PolylineTrailMaterial && Cesium.Property.equals(this.color, other.color) && Cesium.Property.equals(this.image, other.image) && Cesium.Property.equals(this.duration, other.duration);};Object.defineProperties(PolylineTrailMaterial.prototype, {isConstant: {get: function get() {return false;}},definitionChanged: {get: function get() {return this._definitionChanged;}},color: Cesium.createPropertyDescriptor('color'),image: Cesium.createPropertyDescriptor('image'),duration: Cesium.createPropertyDescriptor('duration'),});Cesium.Material._materialCache.addMaterial("PolylineTrail", {fabric: {type: "PolylineTrail",uniforms: {color: new Cesium.Color(1, 1, 0, 1.0),image: '',duration: 1,time: 0},source:`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 = color.rgb;\n\return material;\n\}`},translucent: function translucent() {return true;}});// 写到Cesium对象上,就可以像其他MaterialProperty一样使用了Cesium.Material.PolylineTrailType = 'PolylineTrail'Cesium.PolylineTrailMaterialProperty = PolylineTrailMaterial
二、调用
viewer.entities.add({name: 'polyline',polyline: {positions: Cesium.Cartesian3.fromDegreesArray([113.394743, 38.090979,113.395422, 38.091654,]),width: 10,material: new Cesium.PolylineTrailMaterialProperty({color: '#f00',image: './image/trailLinkBlue.png'})}});