cesium 动态线效果

一、扩展材质

function PolylineTrailMaterial(options) {
            options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);
            this._definitionChanged = new Cesium.Event();
            // 变量初始化
            this.color = Cesium.defaultValue(options.color && new Cesium.Color.fromCssColorString(options.color), Cesium.Color.RED);
            this.image = options.image || '';
            this.duration = options.duration || 1000;
            this.time = (new Date()).getTime();
        }
        // 材质类型
        PolylineTrailMaterial.prototype.getType = function (time) {
            return "PolylineTrail";
        };
        // 这个方法在每次渲染时被调用，result的参数会传入glsl中。
        PolylineTrailMaterial.prototype.getValue = function (time, result) {
            if (!Cesium.defined(result)) {
                result = {};
            }
            result.color = Cesium.Property.getValueOrClonedDefault(this.color, time, Cesium.Color.WHITE, result.color);
            result.image = Cesium.Property.getValueOrClonedDefault(this.image);
            result.time = (((new Date()).getTime() - this.time) % this.duration) / this.duration;
            return result;
        };

        PolylineTrailMaterial.prototype.equals = function (other) {
            return this === other ||
                other instanceof PolylineTrailMaterial && Cesium.Property.equals(this.color, other.color) && Cesium.Property.equals(this.image, other.image) && Cesium.Property.equals(this.duration, other.duration);
        };

        Object.defineProperties(PolylineTrailMaterial.prototype, {
            isConstant: {
                get: function get() {
                    return false;
                }
            },
            definitionChanged: {
                get: function get() {
                    return this._definitionChanged;
                }
            },
            color: Cesium.createPropertyDescriptor('color'),
            image: Cesium.createPropertyDescriptor('image'),
            duration: Cesium.createPropertyDescriptor('duration'),
        });

        Cesium.Material._materialCache.addMaterial("PolylineTrail", {
            fabric: {
                type: "PolylineTrail",
                uniforms: {
                    color: new Cesium.Color(1, 1, 0, 1.0),
                    image: '',
                    duration: 1,
                    time: 0
                },
                source:
                    `
                czm_material czm_getMaterial(czm_materialInput materialInput)\n\
                    {\n\
                        czm_material material = czm_getDefaultMaterial(materialInput);\n\
                        vec2 st = materialInput.st;\n\
                        vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
                        material.alpha = colorImage.a * color.a;\n\
                        material.diffuse = color.rgb;\n\
                        return material;\n\
                    }
                `
            },
            translucent: function translucent() {
                return true;
            }
        });
        // 写到Cesium对象上，就可以像其他MaterialProperty一样使用了
        Cesium.Material.PolylineTrailType = 'PolylineTrail'
        Cesium.PolylineTrailMaterialProperty = PolylineTrailMaterial

二、调用

viewer.entities.add({
                name: 'polyline',
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArray([
                        113.394743, 38.090979,
                        113.395422, 38.091654,
                    ]),
                    width: 10,
                    material: new Cesium.PolylineTrailMaterialProperty({
                        color: '#f00',
                        image: './image/trailLinkBlue.png'
                    })
                }
            });