如何使用cesium.js创建一个像图片一样流动纹理的线条

Question

像这张照片，我试图用图像材料和GLSL结合Cesium来实现，但最终没有成功。

以下代码是我的尝试，目前只能这样绘制，问题是我无法改变颜色，只能通过修改图片的颜色来改变线条的颜色：

function PolylineTrailLinkMaterialProperty(color, duration) {
            this._definitionChanged = new Cesium.Event();
            this._color = undefined;
            this._colorSubscription = undefined;
            this.color = color;
            this.duration = duration;
            this._time = (new Date()).getTime();
        }
        Cesium.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
            isConstant: {
                get: function () {
                    return false;
                }
            },
            definitionChanged: {
                get: function () {
                    return this._definitionChanged;
                }
            },
            color: Cesium.createPropertyDescriptor('color')
        });
        PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
            return 'PolylineTrailLink';
        }
        PolylineTrailLinkMaterialProperty.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;
            return result;
        }
        PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
            return this === other ||
                (other instanceof PolylineTrailLinkMaterialProperty &&
                  Property.equals(this._color, other._color))
        }
        Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
        Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
        Cesium.Material.PolylineTrailLinkImage = "./sampledata/images/colors1.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, 1.0, 0.0, 0.5),
                    image: Cesium.Material.PolylineTrailLinkImage,
                    time: 0
                },
                source: Cesium.Material.PolylineTrailLinkSource
            },
            translucent: function (material) {
                return true;
            }
        });

        function parabolaEquation(options, resultOut) {
            //y=-(4h/L^2)*x^2+h 
            var h = options.height && options.height > 5000 ? options.height : 5000;
            var L = Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2.lat) ? Math.abs(options.pt1.lon - options.pt2.lon) : Math.abs(options.pt1.lat - options.pt2.lat);
            var num = options.num && options.num > 50 ? options.num : 50;
            var result = [];
            var dlt = L / num;
            if (Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2.lat)) {
                var delLat = (options.pt2.lat - options.pt1.lat) / num;
                if (options.pt1.lon - options.pt2.lon > 0) {
                    dlt = -dlt;
                }
                for (var i = 0; i < num; i++) {
                    var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);
                    var lon = options.pt1.lon + dlt * i;
                    var lat = options.pt1.lat + delLat * i;
                    result.push([lon, lat, tempH]);
                }
            } else {
                var delLon = (options.pt2.lon - options.pt1.lon) / num;
                if (options.pt1.lat - options.pt2.lat > 0) {
                    dlt = -dlt;
                }
                for (var i = 0; i < num; i++) {
                    var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);
                    var lon = options.pt1.lon + delLon * i;
                    var lat = options.pt1.lat + dlt * i;
                    result.push([lon, lat, tempH]);
                }
            }
            if (resultOut != undefined) {
                resultOut = result;
            }
            return result;
        }

        var isAdd = false;
        var material = null;
        var center = { lon: 114.302312702, lat: 30.598026044 }viewer.entities.add({
                            name: 'PolylineTrailLink' + j,
                            polyline: {
                                positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
                                width: 2,
                                material: material
                            }
                        });

Answer 1

有时，可以通过在线上放置“条纹”材料来模拟褪色路径，旋转使整条线只是从一种条纹颜色到另一种条纹颜色的过渡。

Sandcastle Demo - 这是Interpolation Demo的修改版本，带有褪色的黄线。

path : {
    resolution : 1,
    // ************************************************************
    // This material uses a single stripe, turned sideways, to fade
    // the color across a length of the line.
    // ************************************************************
    material : new Cesium.StripeMaterialProperty({
        // The newest part of the line is bright yellow.
        evenColor: Cesium.Color.YELLOW,
        // The oldest part of the line is yellow with a low alpha value.
        oddColor: Cesium.Color.YELLOW.withAlpha(0.1),
        repeat: 1,
        offset: 0.25,
        orientation: Cesium.StripeOrientation.VERTICAL
    }),
    leadTime: 0,
    trailTime: 60 * 2,
    width : 10
}