一、扩展材质
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'
})
}
});