😊Entity
在 CesiumJS 的 entity API 中,一共有10类 entity ,分别是:
- box
- ellipse (including circles)
- corridor (including swerving corridor)
- cylinder (including cone)
- polygon
- polyline
- polylineVolume
- rectangle
- ellipsoid (including sphere)
- wall
在 entity 中有一些大多数实体都有的基本属性:position(非全都有,想 corridor 等非规则实体没有)、name、实体对象
(1)position,表示空间实体在空间直角坐标系中的位置,因此通常需要进行经纬度到直角坐标系的转化(Cesium.Cartesian3.fromDegrees(lat,lon,height)) 只有规则实体有该属性, position 对于非规则实体的参考价值不大(2)name,表示空间实体的名字 (3)实体对象
😀Viewer
在实现 Entity 的可视化之前,我们需要一个地图或者说是一个地球,因此必须需要一个容器。 Viewer 是一种 widget (used to refer to any small device that you don’t know the name of) 其实就是一个内含大量属性和方法的类,通过 new Viewer 对象来加载地图,从而再在地图上展示 Entity,实体是通过往 viewer 对象中的 entities 属性 add 来实现的。
new Cesium.Viewer(container, options)
box
box 可以用来表示正方体、长方体
const viewer = new Cesium.Viewer("cesiumContainer"); //position表示的空间位置,直角坐标的点表示 const redBox = viewer.entities.add({ name: "Red box with black outline", position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
box: { dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), //在box对象中通过dimensions来调整 box的大小,通过new Cesium.Cartesian3(x,y,z)点的方式表达box的长宽高 material: Cesium.Color.RED.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.BLACK, }, });
ellipse
ellipse 可以表示椭圆形、圆形、椭圆柱、圆柱(柱可以通过 ellipse 实体对象中的 extrudedHeight 实现)
const blueEllipse = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0), name: "Blue translucent, rotated, and extruded ellipse with outline", ellipse: { semiMinorAxis: 150000.0, //表示短半轴 semiMajorAxis: 300000.0, //表示长半轴 extrudedHeight: 200000.0, //表示从平面所在位置开始向上延伸多少,从而形成柱体,柱体形状取决于平面形状 rotation: Cesium.Math.toRadians(45), //旋转角度 material: Cesium.Color.BLUE.withAlpha(0.5), outline: true, //material、outline、outlineColor }, });
备注
在创建实体对象后,并非一个实体对象就必须只能有一个实体,可以在实体对象中创建多个实体,如点、线、面等,但是一个实体对象中只能有一个 id 和 name 等特殊属性
以下为两个实体对象:
//构建myellipse的entity实体(既可以表示椭圆面也可以表示椭圆柱【extrudedHeight】)
const myellipse = viewer.entities.add({
name:"red ellipse",
//位置信息
position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
ellipse: {
//短半轴a
semiMinorAxis: 250000.0,
//长半轴b
semiMajorAxis: 300000.0,
//height是椭圆平面的高度
height: 300000.0,
//extrudedHeight是ellipse体的高度
// extrudedHeight: 600000.0,
rotation: Cesium.Math.toRadians(45),
material: Cesium.Color.GREY,
outline: true,
},
})
//blueEllipsoid椭球体
const blueEllipsoid = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(150000.0, 150000.0, 150000.0),
material: Cesium.Color.GREY,
//maximumClock选择椭球部分可见,切西瓜瓤的方式,2*pi即整个椭球
// maximumClock: 3
//maximumClock选择椭球部分可见,切冬瓜片的方式,pi即整个椭球
maximumCone: 3.1415/2,
heightReference: Cesium.HeightReference.NONE
},
});
const myellipse = viewer.entities.add({
name:"red ellipse",
//位置信息
position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
ellipse: {
//短半轴a
semiMinorAxis: 250000.0,
//长半轴b
semiMajorAxis: 300000.0,
//height是椭圆平面的高度
height: 300000.0,
//extrudedHeight是ellipse体的高度
// extrudedHeight: 600000.0,
rotation: Cesium.Math.toRadians(45),
material: Cesium.Color.GREY,
outline: true,
},
ellipsoid: {
radii: new Cesium.Cartesian3(150000.0, 150000.0, 150000.0),
material: Cesium.Color.GREY,
//maximumClock选择椭球部分可见,切西瓜瓤的方式,2*pi即整个椭球
// maximumClock: 3
//maximumClock选择椭球部分可见,切冬瓜片的方式,pi即整个椭球
maximumCone: 3.1415/2,
heightReference: Cesium.HeightReference.NONE
},
})