Javascript 使用铯绘制三角形时出错

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

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：所有属性列表必须具有相同数量的属性

---

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

我不知道Cesium中是否有用于逐顶点颜色的选项，但我至少可以修复示例代码中的错误，使其正确运行。具体而言：

• 将

  asynchronous:false

  添加到

  原语

  选项中，因为我们没有为此使用web工作程序

• 对于

  位置

  使用

  Cesium.ComponentDatatype.DOUBLE

  而不是

  FLOAT

  ，因为它是

  float64数组

  ，不同于

  float32数组

  的法线

• 最大的问题是

  mypositions

  是一个

  Cartesian3

  数组，而不是一个平面数组，因此不能用于本机初始化

  Float64Array

  。必须将其展开为x、y、z值的平面数组

下面是应用这些更改的示例。单击底部的“RunCodeSnippet”以查看出现的红色三角形

//为清晰起见添加了默认摄影机视图
变量范围=铯。矩形。从度（100,30108,36）；
Cesium.Camera.DEFAULT_VIEW_矩形=范围；
铯.Camera.DEFAULT_VIEW_因子=0.5；
var viewer=新铯.viewer（'cesiumContainer'{
navigationHelpButton:false，动画：false，时间线：false
});
//原始样本从这里开始
var mypositions=Ce.Cartesian3.FromDegrees ArrayHeights([
104.317776, 31.59491, 10,
105.317776, 32.59491, 20,
102.317776, 33.59491, 30]);
//将“我的位置”展开成一个平面阵列
var numPositions=mypositions.length；
var pos=新的Float64Array（numPositions*3）；
对于（变量i=0；i
html，body，#cesiumContainer{
宽度：100%；高度：100%；边距：0；填充：0；溢出：隐藏；
字体系列：无衬线；
}
我不知道Cesium中是否有逐顶点颜色的选项，但我至少可以修复示例代码中的错误，使其正确运行。具体而言：


将
asynchronous:false
添加到
原语
选项中，因为我们没有为此使用web工作程序

对于
位置
使用
Cesium.ComponentDatatype.DOUBLE
而不是
FLOAT
，因为它是
float64数组
，不同于
float32数组
的法线

最大的问题是
mypositions
是一个
Cartesian3
数组，而不是一个平面数组，因此不能用于本机初始化
Float64Array
。必须将其展开为x、y、z值的平面数组


下面是应用这些更改的示例。单击底部的“RunCodeSnippet”以查看出现的红色三角形


//为清晰起见添加了默认摄影机视图
变量范围=铯。矩形。从度（100,30108,36）；
Cesium.Camera.DEFAULT_VIEW_矩形=范围；
铯.Camera.DEFAULT_VIEW_因子=0.5；
var viewer=新铯.viewer（'cesiumContainer'{
navigationHelpButton:false，动画：false，时间线：false
});
//原始样本从这里开始
var mypositions=Ce.Cartesian3.FromDegrees ArrayHeights([
104.317776, 31.59491, 10,
105.317776, 32.59491, 20,
102.317776, 33.59491, 30]);
//将“我的位置”展开成一个平面阵列
var numPositions=mypositions.length；
var pos=新的Float64Array（numPositions*3）；
对于（变量i=0；i