新建基础矩形
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(1, 20, 30, 40),
ellipsoid: Cesium.Ellipsoid.WGS84,
height: 10000,
}),
modelMatrix: modelMatrix,
id: 'bottom'
}),
appearance: new Cesium.MaterialAppearance({
material:Cesium.Material.fromType('Color', {
color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)})
}),
show: true,
})
)
其中,geometryInstances定义了要渲染的几何实例。其中,geometry定义实例的形状,cesium提供了多种基本形状,如box、ellipsoid、circle、cylinder等,可以在官网API中查看;
appearance用来定义primitive的样式,其中,有material、closed、translucent等。
一次添加多个实例
let instance1 = new Cesium.GeometryInstance({
geometry: new Cesium.EllipsoidGeometry({
vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,
radii: new Cesium.Cartesian3(1000000.0, 500000.0, 500000.0)
}),
modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-25.59777, 30.03883)),
new Cesium.Cartesian3(0.0, 0.0, 100000.0), new Cesium.Matrix4()),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BISQUE)
},
id: '1'
});
let instance2 = new Cesium.GeometryInstance({
geometry: Cesium.BoxGeometry.fromDimensions({
vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,
dimensions: new Cesium.Cartesian3(1000000.0, 1000000.0, 500000.0)
}),
modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-5.59777, 30.03883)),
new Cesium.Cartesian3(0.0, 0.0, 100000.0), new Cesium.Matrix4()),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
},
id: '2'
});
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: [instance1, instance2],
appearance: new Cesium.PerInstanceColorAppearance(),
show: true,
})
)
效果如下:
instance1和instance2是两个不同的几何实例,当添加的每个实例都有不同的属性时,可以写在attributes中,modelMatrix用来确定几何实例的位置,同时vertexFormat的选择也要配套才不会报错。
attributes用来确定几何实例的属性,具体见https://cesium.com/learn/cesiumjs/ref-doc/GeometryAttributes.html,要起作用还需要将appearance设置成PerInstanceColorAppearance。
appearace有以下可选项(摘自Cesium开发高级篇 | 01空间数据可视化之Primitive - 知乎):
添加点集
let points = viewer.scene.primitives.add(
new Cesium.PointPrimitiveCollection({
modelMatrix: Cesium.Matrix4.IDENTITY,
debugShowBoundingVolume: false,
blendOption: Cesium.BlendOption.OPAQUE_AND_TRANSLUCENT,
})
);
// 添加点
points.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.53883, 1000.0),
color: Cesium.Color.YELLOW,
pixelSize : 100.0,
outlineColor : Cesium.Color.BLACK,
outlineWidth : 20.0,
id : undefined
});
points.add({
position: Cesium.Cartesian3.fromDegrees(-75.29777, 40.53883, 1000.0),
color: Cesium.Color.CYAN,
});
效果: