Cesium动态立体墙

lineColor.png

// 尾迹线
function CesiumWakeLine(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration;
    this._time = new Date().getTime();
}

CesiumWakeLine.prototype.getType = function(time) {
    return "PolylineTrailLink";
};
CesiumWakeLine.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;
};
CesiumWakeLine.prototype.equals = function(other) {
    return (
        this === other ||
        (other instanceof CesiumWakeLine &&
            Property.equals(this._color, other._color))
    );
};
Object.defineProperties(CesiumWakeLine.prototype, {
    isConstant: {
        get: function() {
            return false;
        },
    },
    definitionChanged: {
        get: function() {
            return this._definitionChanged;
        },
    },
    color: Cesium.createPropertyDescriptor("color"),
});
Cesium.CesiumWakeLine = CesiumWakeLine;
Cesium.Material.PolylineTrailLinkType = "PolylineTrailLink";
Cesium.Material.PolylineTrailLinkImage = "./lineColor.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;
        },
    }
);

var viewer = new Cesium.Viewer("cesiumContainer");

      var material = new Cesium.CesiumWakeLine(
          Cesium.Color.fromCssColorString("#ffff00"),
          1500
        );

      var path = [
        108.95846, 34.22104, 100, 108.96039, 34.22104, 100, 108.96046, 34.21804,
        100, 108.95843, 34.21804, 100, 108.95846, 34.22104, 100,
      ];

      var wall = viewer.entities.add({
        wall: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(path),
          material: material,
        },
      });
      viewer.zoomTo(viewer.entities);