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

Question

我有这段代码，它向场景添加了折线图元。

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

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

Answer 2

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

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

但是，如果你想跳过 Entity 层，直接使用 Primitive Graphics 层，你也可以这样做。您上面的示例代码有一些问题。首先，您在不使用 new 关键字的情况下调用 Cesium.SimplePolylineGeometry 构造函数，并且不保存结果，这不是此类代码的正确使用模式。其次，SimplePolylineGeometry class 本身不支持大于 WebGL 实现支持的线宽，在 Windows 机器运行 ANGLE 上，线宽仅为 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
});

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

How to set width to SimplePolylineGeometry primitive in CesiumJS

cesium