Primitive
Primitive的使用
//创建长方形几何体
const Rectangle=new Cesium.RectangleGeometry({
//矩形所在的椭球体
ellipsoid:Cesium.Ellipsoid.default,
rectangle:Cesium.Rectangle.fromDegrees(-80.0, 39.0, -74.0, 42.0),
//距离地球表面高度
height:100000,
//挤出高度
// extrudedHeight:100000,
// 顶点属性（？？？？？？？）
vertexFormat:Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
})
//创建几何体实例 （实例化 几何体实例类 上面创建的长方形几何体作为配置参数传入这个几何实例类）
let instance=new Cesium.GeometryInstance({
geometry:Rectangle,
attributes:{
color:Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5))
}
});
let appearance=new Cesium.PerInstanceColorAppearance({
//设置是否使用3d模式绘制
flat:true,
})
//将几何体实例添加进一个Primitive中
let primitive=new Cesium.Primitive({
geometryInstances:instance,
//几何体的外观
appearance:appearance,
})
//将这个承载着长方形几何体的Primitive添加进Cesium场景中
//经过上面一系列步骤就能在Cesium中看见这个长方形了
viewer.scene.primitives.add(primitive);
//使用entity创建矩形 就非常简单了
let rectangle=viewer.entities.add({
rectangle:{
coordinates:Cesium.Rectangle.fromDegrees(
-90.0,
39.0,
-85,
42.0
),
height:10000,
material:Cesium.Color.BLACK.withAlpha(0.5),
},
})
使用primitive创建矩形和使用entity有很大的不同，primitive更复杂，也更灵活。
动态修改Primitive的颜色
//先创建两个长方形几何体
const Rectangle=new Cesium.RectangleGeometry({
ellipsoid:Cesium.Ellipsoid.default,
rectangle:Cesium.Rectangle.fromDegrees(-80.0, 39.0, -74.0, 42.0),
//距离地球表面高度
height:100000,
vertexFormat:Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
})
const Rectangle2=new Cesium.RectangleGeometry({
ellipsoid:Cesium.Ellipsoid.default,
rectangle:Cesium.Rectangle.fromDegrees(-70.0, 39.0, -65.0, 42.0),
//距离地球表面高度
height:100000,
vertexFormat:Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
})
//创建几何体实例 （实例化 类）
let instance=new Cesium.GeometryInstance({
//给几何体实例一个id 唯一标识符
id:"instance1",
geometry:Rectangle,
attributes:{
color:Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5))
}
});
let instance2=new Cesium.GeometryInstance({
id:"instance2",
geometry:Rectangle2,
attributes:{
color:Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE.withAlpha(0.5))
}
});
let appearance=new Cesium.PerInstanceColorAppearance({
//设置是否使用3d模式绘制
flat:true,
})
//将几何体实例放入Primitive中
let primitive=new Cesium.Primitive({
geometryInstances:[instance,instance2],
appearance:appearance,
})
viewer.scene.primitives.add(primitive);
viewer.zoomTo(viewer.entities);
//设置一个setTimeout函数 动态改变第一个几何体的颜色
setTimeout(()=>{
//获取primitive的对应几何实例属性类
let att=primitive.getGeometryInstanceAttributes("instance1");
//修改颜色
att.color=Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.YELLOW.withAlpha(0.8));
},2000)
//设置一个setInterval函数 随机改变第二个几何体的颜色
setInterval(()=>{
let att=primitive.getGeometryInstanceAttributes("instance2");
//随机颜色
att.color=Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({alpha:0.5}));
},2000)
点击修改Entity和Primitive颜色
//屏幕事件处理器
let hander = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//给处理器设置一个 左键监听事件
hander.setInputAction((e) => {
// 回调参数e是一个对象 立面包含着点击位置对应的笛卡尔二维坐标 也就是屏幕坐标
//通过屏幕坐标获取到对应的对象
let pickedObject = viewer.scene.pick(e.position);
let pickedObjectatt = pickedObject.primitive.getGeometryInstanceAttributes(pickedObject.id);
//修改颜色（给一个随机颜色）
pickedObjectatt.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({ alpha: 0.5 }));
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
点击第一个矩形（由Entity创建） 颜色改变（第三个颜色改变是因为前面的时间间隔函数）
点击第二个矩形 颜色改变
点击第三个颜色 颜色改变
打印pickedObject
点击由Entity创建的矩形
点击由Primitive创建的矩形
可以看到，primitive属性名对应的类是Primitive。其实，Entity是高度封装的Primitive，所以可以使用getGeometryInstanceAttributes方法来修改第一个矩形的颜色
发现
当Entity创建的矩形不设置height属性时，打印的pickedObject中的primitive属性是GroundPrimitive类
