三. vue-cesium开发三维地图 （天地图）流光墙

样式

配置图片

wall1a =

 //流动线
       /*
流动纹理线
color 颜色
duration 持续时间 毫秒
trailImage 贴图地址
*/
function PolylineTrailLinkMaterialProperty1(color, trailImage , duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration;
    this.trailImage  = require('../../../assets/images1/qiang.png');
    this._time = (new Date()).getTime();
    }
    
    /**
     * 自定义材质
     */
    //左右 流线型
    function _getPolylineShader() {
    var materail =
        "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\
        }";

        return materail
    }

    Object.defineProperties(PolylineTrailLinkMaterialProperty1.prototype, {
    isConstant: {
        //该属性是否会随时间变化,为true时只会获取一次数值
        get: function () {
        return false;
        }
    },
    definitionChanged: {
        get: function () {
        return this._definitionChanged;
        }
    },
    color: Cesium.createPropertyDescriptor('color')
    });
    
    var MaterialType = 'polylineType' + parseInt(Math.random() * 1000);
    PolylineTrailLinkMaterialProperty1.prototype.getType = function (time) {
    return MaterialType;
    }
    
    PolylineTrailLinkMaterialProperty1.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 = this.trailImage;
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    return result;
    }
    
    PolylineTrailLinkMaterialProperty1.prototype.equals = function (other) {
    return this === other ||
        (other instanceof PolylineTrailLinkMaterialProperty1 &&
        Cesium.Property.equals(this._color, other._color) &&
        Cesium.Property.equals(this._image, other._image))
    }
    
    Cesium.Material._materialCache.addMaterial(MaterialType, {
    fabric: {
        type: MaterialType,
        uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        image: Cesium.Material.DefaultImageId,
        time: -20
        },
        source: _getPolylineShader()
    },
    translucent: function (material) {
        return true;
    }
    });
    Cesium.PolylineTrailLinkMaterialProperty1 = PolylineTrailLinkMaterialProperty1;



//立体墙
function PolylineWallProperty(color, duration, d) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration || 3000;
    this._time = (new Date()).getTime();
    this._d = d;
    this.isTranslucent = function () {
        return true;
    }
}

Object.defineProperties(PolylineWallProperty.prototype, {
    isConstant: {
        get: function () {
            return false;
        }
    },
    definitionChanged: {
        get: function () {
            return this._definitionChanged;
        }
    },
    color: Cesium.createPropertyDescriptor('color')
});
PolylineWallProperty.prototype.getType = function (time) {
    return 'PolylineWall';
}
PolylineWallProperty.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.Material.PolylineTrailLinkImage;
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration * this._d;
    return result;
}
PolylineWallProperty.prototype.equals = function (other) {
    return this === other ||
        (other instanceof PolylineWallProperty &&
            Cesium.Property.equals(this._color, other._color))
}

Cesium.PolylineWallProperty = PolylineWallProperty;
Cesium.Material.PolylineWallType = 'PolylineWall';
Cesium.Material.PolylineWallImage = require('../../../assets/images1/qiang.png');
Cesium.Material.PolylineWallSource = " 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.t - time), st.t));\n\
                                                        material.alpha = color.a * (1.0 - fract(st.t)) * 0.8;\n\
                                                        material.diffuse = (colorImage.rgb+color.rgb);\n\
                                                        return material;\n\
                                                    }";

Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineWallType, {
    fabric: {
        type: Cesium.Material.PolylineWallType,
        uniforms: {
            // color: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
            color: Cesium.Color.WHITE,
            image: Cesium.Material.PolylineWallImage,
            time: 20
        },
        source: Cesium.Material.PolylineWallSource
    },
    translucent: function (material) {
        return true;
    }
})
 window.viewer3d.entities.add({
            name: '立体墙',
            wall: {
                width:10,
                positions: Cesium.Cartesian3.fromDegreesArrayHeights(wall1a),
                material: new Cesium.PolylineTrailLinkMaterialProperty1(Cesium.Color.CYAN, '', 30000),
            }
        })