Question

我有这个代码，它将polyline原语添加到场景中。

function createPolyline(startPosition, endPosition) {
        Cesium.SimplePolylineGeometry({
            positions : [startPosition, endPosition]
        });

        var geometry = Cesium.SimplePolylineGeometry.createGeometry(polyline);
        return scene.primitives.add(new Cesium.Primitive({
            geometryInstances : new Cesium.GeometryInstance({
                geometry   : geometry,
                attributes : {
                    color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.SPRINGGREEN)
                }
            }),
            appearance        : new Cesium.PerInstanceColorAppearance()
        }));
    }

如何设置此折线的宽度？

Answer 1

添加折线的推荐方法是使用实体API like this

var greenLine = viewer.entities.add({
    polyline : {
        positions : [startPosition, endPosition],
        width : 5,
        material : Cesium.Color.SPRINGGREEN
    }
});

但是，如果你想跳过实体层并直接使用Primitive Graphics层，你也可以这样做。您上面的示例代码存在一些问题。首先，您在没有Cesium.SimplePolylineGeometry关键字的情况下调用new构造函数，并且不保存结果，这不是这种代码的正确使用模式。其次，SimplePolylineGeometry类本身不支持大于WebGL实现支持的行宽，在运行ANGLE的Windows机器上，行宽仅为1像素宽。要解决此限制，请使用普通（非简单）折线，如下所示：

var polylines = scene.primitives.add(new Cesium.PolylineCollection());
var polyline = polylines.add({
    positions : Cesium.PolylinePipeline.generateCartesianArc({
        positions : [startPosition, endPosition]
    }),
    material : Cesium.Material.fromType('Color', {
        color : Cesium.Color.SPRINGGREEN
    }),
    width: 5
});

Answer 2

SimplePolylineGeometry不支持线宽。您需要使用PolylineGeometry代替并将“width”选项传递给构造函数。此外，您应该使用PolylineColorAppearance作为appearance，而不是PerInstanceColorAppearance。

如何在CesiumJS中将宽度设置为SimplePolylineGeometry原语

2 个答案: