97 lines
3.2 KiB
JavaScript
97 lines
3.2 KiB
JavaScript
|
class PolylineTrailMaterial {
|
|||
|
|
constructor(option = {}) {
|
|||
|
|
this._definitionChanged = new Cesium.Event()
|
|||
|
|
this._color = undefined
|
|||
|
|
this._colorSubscription = undefined
|
|||
|
|
this._time = (new Date()).getTime()
|
|||
|
|
|
|||
|
|
this.color = option.color ? option.color : Cesium.Color.fromCssColorString('rgba(90,90,255, 1)');
|
|||
|
|
|
|||
|
|
this.duration = option.duration ? option.duration : 5000
|
|||
|
|
// this.img = option.img ? option.img :'/images/colors2.png'
|
|||
|
|
this.img = this.createMaterialImage()
|
|||
|
|
// 类型（会自动加载到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()
|
|||
|
|
}
|
|||
|
|
createMaterialImage(){
|
|||
|
|
var c = document.createElement("canvas");
|
|||
|
|
c.width = 512;
|
|||
|
|
c.height = 32;
|
|||
|
|
var ctx = c.getContext("2d");
|
|||
|
|
var colorstr = this.color.toCssColorString().replace("rgb(","").replace(")","");
|
|||
|
|
var my_gradient = ctx.createLinearGradient(0, 0, c.width, 0);
|
|||
|
|
my_gradient.addColorStop(0, "rgba("+colorstr+", 1)");
|
|||
|
|
my_gradient.addColorStop(1, "rgba("+colorstr+", 0)");
|
|||
|
|
ctx.fillStyle = my_gradient;
|
|||
|
|
ctx.fillRect(0, 0, c.width, c.height);
|
|||
|
|
return c.toDataURL('image/png');
|
|||
|
|
}
|
|||
|
|
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.img
|
|||
|
|
result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration
|
|||
|
|
|
|||
|
|
return 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会报错，需要改为Object
|
|||
|
|
Object.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
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|