Question

这个线条的做的是箭头流动的效果， 但是随着地图的缩放， 这个贴图会拉伸变形，  怎么避免这种变形，一直显示图1的效果

Answer 1

你好，方便粘一下您这边设置线条的代码吗？我这边测试一下

Comments

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();
}

Object.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 &&
            Cesium.Property.equals(this._color, other._color))
}

Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;

Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';

Cesium.Material.PolylineTrailLinkImage = "../../lib/supermap/img/12.png";

Cesium.Material.PolylineTrailLinkSource =
    "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
    { czm_material material = czm_getDefaultMaterial(materialInput); 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;}";

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
        },
        source: Cesium.Material.PolylineTrailLinkSource
    },
    translucent: function(material) {
        return true;
    }
});

export default PolylineTrailLinkMaterialProperty
 

viewer.entities.add({
                    name: '路线',
                    polyline: {
                        positions: positions,
                        width: 10,
                        material: new PolylineTrailLinkMaterialProperty(Cesium.Color.GREEN, 2000)
                    }
                })

---

你好，我看了一下原始Cesium里面也是这样的，polyline的width是以像素为单位的

---

那有没有别的途径去实现这个效果，这个变形后有点丑

---

这个问题我有办法解决，可以解决polyline的宽度会随着地图缩放自动变化的问题。 有偿，可以加我qq: 1207303259