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
|
||
}
|
||
})
|
||
}
|
||
} |