Question

我想用Cesium绘制三角形，其中每个顶点是一个带有（lon，lat，alt）的地理点，每个顶点都有不同的颜色。但我收到了错误。我是Cesium的新手，我认为我要做的是定义几何实例并将其附加到场景中。我的代码是：

var viewer = new Cesium.Viewer('cesiumContainer');
var mypositions = Cesium.Cartesian3.fromDegreesArrayHeights([104.317776,   31.59491, 10,
105.317776, 32.59491, 20,
106.317776, 33.59491, 30]);

var pos = new Float64Array(mypositions);

    var geometry = new Cesium.Geometry({
        attributes: {
            position: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 3,
                values: pos
            }),
            normal: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 3,
                values: new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0])
            })
        },
        indices: new Uint32Array([0, 1, 2]),
        primitiveType: Cesium.PrimitiveType.TRIANGLES,
        boundingSphere: Cesium.BoundingSphere.fromVertices(pos)
    });


    var myInstance = new Cesium.GeometryInstance({
        geometry: geometry,
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        },

        show : new Cesium.ShowGeometryInstanceAttribute(true)
    });

    viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances: [myInstance],
        appearance: new Cesium.PerInstanceColorAppearance({
            closed: true,
            translucent: false
        })
    }));

但是我在网页上收到了这个错误：

DeveloperError：所有属性列表必须具有相同数量的属性。

我想知道我做错了什么，我该如何解决这个问题？

Answer 1

我不知道Cesium中的每顶点颜色选项，但我至少可以修复示例代码中的错误，以便正确运行。具体做法是：

将asynchronous: false添加到Primitive选项，因为我们没有使用网络工作者。
Cesium.ComponentDatatype.DOUBLE使用.FLOAT代替position，因为它是Float64Array，与法线Float32Array不同。
最大的问题是mypositions是一个Cartesian3的数组，而不是一个平面数组，因此不能用于原生地初始化Float64Array。您必须将其展开为x，y，z值的平面数组。

以下是应用这些更改的示例。点击底部的“运行代码段”，查看红色三角形。

// default camera view, added for clarity
var extent = Cesium.Rectangle.fromDegrees(100,30,108,36);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.5;

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationHelpButton: false, animation: false, timeline: false
});

// original sample begins here
var mypositions = Cesium.Cartesian3.fromDegreesArrayHeights([
    104.317776, 31.59491, 10,
    105.317776, 32.59491, 20,
    102.317776, 33.59491, 30]);

// unroll 'mypositions' into a flat array here
var numPositions = mypositions.length;
var pos = new Float64Array(numPositions * 3);
for (var i = 0; i < numPositions; ++i) {
    pos[i * 3] = mypositions[i].x;
    pos[i * 3 + 1] = mypositions[i].y;
    pos[i * 3 + 2] = mypositions[i].z;
}

var geometry = new Cesium.Geometry({
    attributes: {
        position: new Cesium.GeometryAttribute({
            componentDatatype: Cesium.ComponentDatatype.DOUBLE, // not FLOAT
            componentsPerAttribute: 3,
            values: pos
        }),
        normal: new Cesium.GeometryAttribute({
            componentDatatype: Cesium.ComponentDatatype.FLOAT,
            componentsPerAttribute: 3,
            values: new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0])
        })
    },
    indices: new Uint32Array([0, 1, 2]),
    primitiveType: Cesium.PrimitiveType.TRIANGLES,
    boundingSphere: Cesium.BoundingSphere.fromVertices(pos)
});


var myInstance = new Cesium.GeometryInstance({
    geometry: geometry,
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
    },

    show : new Cesium.ShowGeometryInstanceAttribute(true)
});

viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: [myInstance],
    asynchronous: false,
    appearance: new Cesium.PerInstanceColorAppearance({
        closed: true,
        translucent: false
    })
}));

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif;
}

<link href="http://cesiumjs.org/releases/1.16/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.16/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>

使用Cesium绘制三角形时出错

1 个答案: