1. 使用entity创建矩形
var rectangle = viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
90,
20,
110,
30
),
material: Cesium.Color.GREEN.withAlpha(0.8),
},
2. 使用primivite创建矩形
let rectGeometry = new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(
115,
20,
135,
30
),
height: 0,
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
});
let instance = new Cesium.GeometryInstance({
geometry: rectGeometry,
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
Cesium.Color.RED.withAlpha(0.5)
),
},
});
let appearance = new Cesium.PerInstanceColorAppearance({
flat: true,
});
let primitive = new Cesium.Primitive({
geometryInstances: instance,
appearance: appearance,
});
viewer.scene.primitives.add(primitive);
viewer.camera.setView(viewer.entities);
3. 创建多个实体在同一个primitive
let primitive = new Cesium.Primitive({
geometryInstances: [instance, instance2],
appearance: appearance,
});
4. 修改primitive颜色
setInterval(() => {
let attributes = primitive.getGeometryInstanceAttributes("blueRect");
attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
Cesium.Color.fromRandom({
alpha: 0.5,
})
);
}, 2000);
});
5. primitive和entity物体交互
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
var pickedObject = viewer.scene.pick(movement.position);
console.log(pickedObject);
if (Cesium.defined(pickedObject) && typeof pickedObject.id == "string") {
let attributes = primitive.getGeometryInstanceAttributes(pickedObject.id);
attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
Cesium.Color.YELLOW.withAlpha(0.5)
);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);