import * as cesium from 'cesium'
|
|
const Cesium: any = cesium
|
|
const getResource = (name: string) => {
|
return new URL(`/src/assets/icons/${name}`, import.meta.url).href
|
}
|
|
const defaultColor = Cesium.Color.TRANSPARENT
|
const defaultImage = getResource('arrow-right.png')
|
const defaultImageimageW = 10
|
const defaultAnimation = false
|
const defaultDuration = 3000
|
|
function ImageTrailMaterial (this: any, opt: any = {}) {
|
opt = Cesium.defaultValue(opt, Cesium.defaultValue.EMPTY_OBJECT)
|
this._definitionChanged = new Cesium.Event()
|
// 自定义材质
|
// 自定义图片颜色
|
this._color = undefined
|
this._colorSubscription = undefined
|
// 自定义背景颜色
|
this._backgroundColor = undefined
|
this._backgroundColorSubscription = undefined
|
// 图片
|
this._image = undefined
|
this._imageSubscription = undefined
|
// 图片宽度
|
this._imageW = undefined
|
this._imageWSubscription = undefined
|
// 是否开启动画
|
this._animation = undefined
|
this._animationSubscription = undefined
|
// 动画持续时间
|
this._duration = undefined
|
this._durationSubscription = undefined
|
|
// 变量初始化
|
this.color = opt.color || defaultColor // 颜色
|
this.backgroundColor = opt.backgroundColor || defaultColor // 颜色
|
this._image = opt.image || defaultImage // 材质图片
|
this.imageW = opt.imageW || defaultImageimageW
|
this.animation = opt.animation || defaultAnimation
|
this.duration = opt.duration || defaultDuration
|
this._time = undefined
|
}
|
|
ImageTrailMaterial.prototype.getType = function () {
|
return Cesium.Material.ImageTrailMaterialType
|
}
|
|
// 这个方法在每次渲染时被调用，result的参数会传入glsl中。
|
ImageTrailMaterial.prototype.getValue = function (
|
time: any,
|
result: {
|
color?: any
|
backgroundColor?: any
|
image?: any
|
imageW?: any
|
animation?: any
|
time?: any
|
},
|
) {
|
if (!Cesium.defined(result)) {
|
result = {}
|
}
|
// result.color = Cesium.Property.getValueOrClonedDefault(
|
// this._color,
|
// time,
|
// defaultColor,
|
// result.color,
|
// )
|
// result.backgroundColor = Cesium.Property.getValueOrClonedDefault(
|
// this._backgroundColor,
|
// time,
|
// defaultColor,
|
// result.backgroundColor,
|
// )
|
result.color = Cesium.Property.getValueOrUndefined(this._color, time)
|
result.backgroundColor = Cesium.Property.getValueOrUndefined(this._backgroundColor, time)
|
result.image = this._image
|
result.imageW = this._imageW
|
result.animation = this._animation
|
if (this._time === undefined) {
|
this._time = new Date().getTime()
|
}
|
result.time =
|
((new Date().getTime() - this._time) % this._duration) / this._duration
|
return result
|
}
|
|
ImageTrailMaterial.prototype.equals = function (other: {
|
_color: any
|
_backgroundColor: any
|
}) {
|
return (
|
this === other ||
|
(other instanceof ImageTrailMaterial &&
|
Cesium.Property.equals(this._color, other._color) &&
|
Cesium.Property.equals(this._backgroundColor, other._backgroundColor))
|
)
|
}
|
|
Object.defineProperties(ImageTrailMaterial.prototype, {
|
isConstant: {
|
get: function get () {
|
return false
|
},
|
},
|
definitionChanged: {
|
get: function get () {
|
return this._definitionChanged
|
},
|
},
|
color: Cesium.createPropertyDescriptor('color'),
|
backgroundColor: Cesium.createPropertyDescriptor('backgroundColor'),
|
image: Cesium.createPropertyDescriptor('image'),
|
imageW: Cesium.createPropertyDescriptor('imageW'),
|
animation: Cesium.createPropertyDescriptor('animation'),
|
duration: Cesium.createPropertyDescriptor('duration'),
|
})
|
|
// 写到Cesium对象上，就可以像其他MaterialProperty一样使用了
|
Cesium.Material.ImageTrailMaterialType = 'PolylineImageTrail'
|
|
Cesium.Material._materialCache.addMaterial(Cesium.Material.ImageTrailMaterialType, {
|
fabric: {
|
type: 'ImageLine',
|
uniforms: {
|
// uniforms参数跟我们上面定义的参数以及getValue方法中返回的result对应，这里值是默认值
|
color: new Cesium.Color(1, 0, 0, 1.0),
|
backgroundColor: new Cesium.Color(0, 0, 0, 0.0),
|
image: '',
|
imageW: 1,
|
animation: false,
|
duration: 30,
|
time: 0,
|
repeat: new Cesium.Cartesian2(1, 1),
|
},
|
// source编写glsl，可以使用uniforms参数，值来自getValue方法的result
|
source: `
|
#extension GL_OES_standard_derivatives : enable
|
czm_material czm_getMaterial(czm_materialInput materialInput)
|
{
|
czm_material material = czm_getDefaultMaterial(materialInput);
|
vec2 st = repeat * materialInput.st;
|
float s = st.s / (abs(fwidth(st.s)) * imageW * czm_pixelRatio);
|
if(animation==true){
|
s = s-time;//增加运动效果
|
}
|
float t = st.t;
|
vec4 colorImage = texture(image, vec2(fract(s), t));
|
material.diffuse = colorImage.rgb;
|
material.emission = max(backgroundColor.rgb*material.alpha*1.,backgroundColor.rgb);
|
return material;
|
}
|
`,
|
},
|
translucent: function translucent () {
|
return true
|
},
|
})
|
|
export default (ImageTrailMaterial as any)
|
