C2——cesium流动特效

描述：cesium里面的道路什么的加个流动的效果。

原理：通过创建自定义材质来实现。

效果：可以自己定义流动样式和颜色，可以调整流动速度的快慢，。

代码有点乱没时间整理就这样吧：在其他地方已经把自定义材质封装成了一个对象，但是版本更新太多次没时间去找了。奔来也是参考网上其他人的但现在原文找不到了。

// 自定义材质的
if (Cesium.PolylineTrailLinkMaterialPropertyRoad1 == undefined) {
    function PolylineTrailLinkMaterialPropertyRoad1(color, duration) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.duration = duration;
        this._time = new Date().getTime();
    }
    Object.defineProperties(
        PolylineTrailLinkMaterialPropertyRoad1.prototype,
        {
            isConstant: {
                get: function () {
                    return false;
                }
            },
            definitionChanged: {
                get: function () {
                    return this._definitionChanged;
                }
            },
            color: Cesium.createPropertyDescriptor("color")
        }
    );
    PolylineTrailLinkMaterialPropertyRoad1.prototype.getType = function (time) {
        return "PolylineTrailLink";
    };
    PolylineTrailLinkMaterialPropertyRoad1.prototype.getValue = function (time,result) {
        if (!Cesium.defined(result)) {
            result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
        result.time =((new Date().getTime() - this._time) % this.duration) / this.duration;
        return result;
    };
    PolylineTrailLinkMaterialPropertyRoad1.prototype.equals = function ( other ) {
        return ( this === other || (other instanceof PolylineTrailLinkMaterialPropertyRoad1 && Property.equals(this._color, other._color)) ); 
    };
    Cesium.PolylineTrailLinkMaterialPropertyRoad1 = PolylineTrailLinkMaterialPropertyRoad1;
    Cesium.Material.PolylineTrailLinkType = "PolylineTrailLink";
    Cesium.Material.PolylineTrailLinkImage = require("./blue6.png");//道路样式的png
    Cesium.Material.PolylineTrailLinkSource = "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 = (colorImage.rgb+color.rgb)/2.0;\n\
                                                    return material;\n\
                                                }";
    Cesium.Material._materialCache.addMaterial(
        Cesium.Material.PolylineTrailLinkType,
        {
            fabric: {
                type: Cesium.Material.PolylineTrailLinkType,
                uniforms: {
                    color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
                    image: Cesium.Material.PolylineTrailLinkImage,
                    time: 0,
                    constantSpeed: 300,
                    depthFailMaterial: true
                },
                source: Cesium.Material.PolylineTrailLinkSource
            },
            translucent: function (material) {
                return true;
            }
        }
    );
}

// new来生成材质实体
if (!window.roadMaterialRoad1) {
    let roadColor = new Cesium.Color.fromCssColorString("#0cfd11");
    window.roadMaterialRoad1 = new Cesium.PolylineTrailLinkMaterialPropertyRoad1( roadColor, 20000 );
}

// 创建流动线对象
viewer.entities.add({
    polyline: new Cesium.PolylineGraphics({
        material: roadMaterial,
        width: new Cesium.ConstantProperty(25),// 线宽
        arcType: Cesium.ArcType.GEODESIC,
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions)//positions道路经过的坐标点集合
    })
});