cesium 在materail 定义上还是比较自由的允许自己构建shader， 我整理一下常用的效果materail 设计
全程使用typescript 来编写这个系列。
首先我们要设计material 的基础类
```javascript
const loadedMap = new Map();
// 着色器的基类
export abstract class MaterialProperty {
public _type_ = "";//类型，不允许修改
protected option: any = {};//用户传入的参数
public _definitionChanged: any = new Cesium.Event();
get isConstant() {
return false
}
get definitionChanged() {
return this._definitionChanged
}
/**
* 需要根据参数变化而新建新的着色器类型，可以动态修改他-----------参考MaterialTrailImage类
*@paramoption
/ protected abstract _getType(option: any):string; /*
* 获得着色器字符串
*@paramoption 参数
/ protected abstract getSource(option: any): string; /*
*
*@paramchildprototype 实现类的原型链
*@paramdefaultOption 默认的参数
*@paramoption 用户传入的参数
/ constructor(childprototype: any, defaultOption: any, option: any) { super(); this._type_ = this.getType(option); this.init(childprototype, defaultOption, option); this.option = JSON.parse(JSON.stringify(defaultOption)); Object.assign(this.option, option); this.setattributes(this.option); } /*
* 判断是否相等
*@paramother 比较的对象
/ public equals(other: any): boolean { if (other === this) { return true; } for (const key in this.option) { if (other[key] !== this.option[key]) { return false; } } return true; } /*
* 获得类型
*@paramoption
*/
public getType(option?: any) {
if (this._type_) {
return this._type_;
} else {
return this._getType(option);
}
}
/**
* 是否要透明度，按照具体需求设置,默认有透明度
* @param material
*/
protected _getTranslucent(material: any){
return true;
}
/**
* 设置必须要的属性
* @param option
更多参考https://xiaozhuanlan.com/topic/6479351028
网友评论