Cesium中实现流光线

概要

Cesium中实现流光线，本质上是在特定的时间改变颜色等属性即可。可以通过MaterialProperty实现，但是它是用在Entity上的，如果要用Primitvie上就得通过自定义的Material实现。要想Material实现会动的效果，需要借助Cesium的一些内置函数实现，比如：czm_frameNumber等。

一、Primitive流光线

class SpriteLineMaterial extends Cesium.Material { constructor(options) { options = SpriteLineMaterial.getDefaultOptions(options) const props = { fabric: { type: SpriteLineMaterial.TYPE, uniforms: options, source: SpriteLineMaterial.SOURCE } } super(props) } } SpriteLineMaterial.SOURCE = ` czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; float time = czm_frameNumber * animationSpeed; // 获取小数部分，负数小数部分+1 float s = fract(st.s - time); vec4 colorImage = texture(image, vec2(s, st.t)); material.alpha = colorImage.a; // 混色 material.diffuse = mix(colorImage.rgb, baseColor.rgb, 1.0); // 光泽 material.emission = baseColor.rgb * 0.5; return material; } ` SpriteLineMaterial.getDefaultOptions = function (options) { return Object.assign({ // 一张线性渐变图片。颜色无所谓，但要有透明度；尺寸无所谓，比如：200*1 image: DEFAULT_SPRITE_LINE, animationSpeed: 0.01, baseColor: Cesium.Color.YELLOW, }, options) } SpriteLineMaterial.TYPE = 'SpriteLine' // 使用 const primitive = new Cesium.Primitive({ geometryInstances: [...], // MaterialAppearance,PolylineMaterialAppearance appearance: new Cesium.PolylineMaterialAppearance({ material: new SpriteLineMaterial(options) }) })

二、Entity流光线

class SpriteLineMaterialProperty { constructor(options) { this._definitionChanged = new Cesium.Event() this._time = performance.now() options = SpriteLineMaterial.getDefaultOptions(options) this._animationSpeed = options.animationSpeed this._baseColor = options.baseColor this._image = options.image // 主要是这里，其他的照搬Cesium相关的MaterialProperty代码即可 Cesium.Material._materialCache.addMaterial(SpriteLineMaterial.TYPE, { fabric: { type: SpriteLineMaterial.TYPE, uniforms: options, source: SpriteLineMaterial.SOURCE } }) } getType() { return SpriteLineMaterial.TYPE } ...... } Object.defineProperties(SpriteLineMaterial.prototype, { isConstant: { get: function() { return false } }, definitionChanged: { get: function() { return this._definitionChanged } }, ...... }) // 使用 const entity = new Cesium.Entity({ polyline: { material: new SpriteLineMaterialProperty(options), ...... } })

效果

复杂些的效果，可依据上述代码实现，此处仅作简单实现

Cesium中实现流光线