什么是实体API
1、面向图形开发人员的低级API---->primitive API
2、用于数据驱动可视化的高级API---->Entity API
相关语法说明
1. 总体介绍
#前面加载token
#创建一个地球
const viewer = new Cesium.Viewer("cesiumContainer");
#添加实体
const name = viewer.entities.add({
#具体的一些操作,定义实体具体形状
})
viewer.zoomTo(name); #将相机固定在实体位置处
2.sandcastle沙堡(cesium官网中具体案例)
(1)盒子box new Cesium.BoxGraphics(options)
https://sandcastle.cesium.com/?src=Box.htm
const viewer = new Cesium.Viewer("cesiumContainer");
#其中蓝色盒子
const blueBox = viewer.entities.add({
name: "Blue box",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box: {
#盒子大小 长宽高
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
#颜色
material: Cesium.Color.BLUE,
},
});
menbers介绍:
- dimensions(尺度)要求获取的数据为Cartesian3性质数据,后跟3个数据分别代表盒子的长、宽、高。
- distanceDisplayCondition 要跟DistanceDisplayCondition属性数据,该属性指定将在距离摄像机的距离处显示此框。
- fill 布尔值,默认为true,颜色是否填充
- heightReference高度 HeightReference类型数据,默认值:HeightReference.NONE
- material 颜色 默认值 Color.WHITE
- outline 轮廓 布尔值,默认值:false
- outlineColor 轮廓颜色 默认值 Color.BLACK
- outlineWidth 轮廓宽度 默认值1.0
- shadows 是否有阴影 默认值ShadowMode.DISABLED(没有阴影)
- show 是否展示这个实体 布尔值 默认值:true
总结
(2) 圆形和椭圆 Circles and ellipses
描述由中心点和半长轴和半短轴定义的椭圆。椭圆符合地球的曲率,可以放置在表面或高空,可以选择挤压成一个体积。中心点由包含实体确定。
https://sandcastle.cesium.com/?src=Circles%20and%20Ellipses.html
const viewer = new Cesium.Viewer("cesiumContainer");
#举例蓝色圆柱
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,
},
});
viewer.zoomTo(viewer.entities);
member介绍
- classificationType 获取或设置ClassificationType属性,该属性指定此椭圆在地面上时是对地形、3D tile还是两者进行分类。默认值ClassificationType.BOTH
- definitionChanged 注意这是只读
- distanceDisplayCondition 获取或设置DistanceDisplayCondition属性,该属性指定将在距离摄像机的距离处显示此椭圆(https://cesium.com/learn/cesiumjs/ref-doc/DistanceDisplayCondition.html)
- extrudedHeight 获取或设置指定椭圆挤压高度的数字属性。设置此属性将创建从高度开始并在此高度结束的体积。圆柱体高度
- extrudedHeightReference 获取或设置指定挤压高度引用的属性。默认属性HeightReference.NONE 返回的类型
- fill 布尔值,是否填充颜色,默认值true
- granularity 获取或设置指定椭圆上点之间角距离的数值属性。
- height 获取或设置指定椭圆高度的数字属性 默认值:0.0
- heightReference 获取或设置指定高度引用的属性。默认值HeightReference.NONE
- material 颜色 Color.WHITE
- numberOfVerticalLines 获取或设置数值属性,该属性指定要沿轮廓线的周长绘制的垂直线的数目。默认值16
- outline 外轮廓 默认值 false
- outlineColor 外轮廓颜色 Color.BLACK
- outlineWidth 外轮廓线条宽度 1.0
- rotation 获取或设置指定从北向逆时针旋转椭圆的数值属性 默认值0
- semiMajorAxis 获取或设置指定半长轴的数值属性。
- semiMinorAxis 短轴
- shadows
- show
- stRotation 获取或设置指定从北向逆时针旋转椭圆纹理的数值属性。 默认值0
- zIndex 获取或设置指定椭圆顺序的zIndex属性。只有当椭圆是常量并且高度和extrtrudedheight都没有指定时才有效。 默认值0
关于stRotation和rotation的区别:
height和heightReference的区别
总结
(3) 走廊 Corridor
https://sandcastle.cesium.com/?src=Corridor.html&label=Geometries
#蓝色走廊例子
const blueCorridor = viewer.entities.add({
name: "Blue extruded corridor with beveled corners and outline",
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-80.0,
40.0,
-85.0,
40.0,
-85.0,
35.0,
]),
height: 200000.0,
extrudedHeight: 100000.0,
width: 200000.0,
cornerType: Cesium.CornerType.BEVELED,
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true, // height or extrudedHeight must be set for outlines to display
outlineColor: Cesium.Color.WHITE,
},
});
members介绍
- classificationType 获取或设置ClassificationType属性,该属性指定此走廊在地面上时是对地形、3D tile还是两者进行分类。默认值ClassificationType.BOTH
- cornerType 获取或设置指定角的样式的CornerType属性。默认值是CornerType.ROUNDED
-definitionChanged - distanceDisplayCondition 获取或设置DistanceDisplayCondition属性,该属性指定将在距离摄像机的距离处显示此走廊。
- extrudedHeight 获取或设置指定走廊挤出高度的数字属性。设置此属性将创建一个从高度开始并在此高度结束的走廊形状的体量。
- extrudedHeightReference 默认值HeightReference.NONE
- fill
- granularity 获取或设置指定每个经纬度点之间采样距离的数值属性。默认值{CesiumMath.RADIANS_PER_DEGREE}
- height 获取或设置指定椭圆高度的数字属性 默认值:0.0
- heightReference 获取或设置指定高度引用的属性。默认值HeightReference.NONE
- material 颜色 Color.WHITE
- numberOfVerticalLines 获取或设置数值属性,该属性指定要沿轮廓线的周长绘制的垂直线的数目。默认值16
- outline 外轮廓 默认值 false
- outlineColor 外轮廓颜色 Color.BLACK
- outlineWidth 外轮廓线条宽度 1.0
- positions 获取或设置一个属性,该属性指定定义走廊中心线的Cartesian3位置的数组。
- shadows
- show
- width 获取或设置指定轮廓线宽度的数字属性。
- zIndex 获取或设置指定椭圆顺序的zIndex属性。只有当椭圆是常量并且高度和extrtrudedheight都没有指定时才有效。 默认值0
总结
(4)圆柱和锥体 Cylinder and cones
https://sandcastle.cesium.com/?src=Cylinders%20and%20Cones.html
const viewer = new Cesium.Viewer("cesiumContainer");
#绿色柱体
const greenCylinder = viewer.entities.add({
name: "Green cylinder with black outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
cylinder: {
length: 400000.0,
topRadius: 200000.0,
bottomRadius: 200000.0,
material: Cesium.Color.GREEN.withAlpha(0.5), #颜色加透明度
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
#红色圆锥
const redCone = viewer.entities.add({
name: "Red cone",
position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
cylinder: {
length: 400000.0,
topRadius: 0.0,
bottomRadius: 200000.0,
material: Cesium.Color.RED,
},
});
#将相机固定在实体位置
viewer.zoomTo(viewer.entities);
members介绍
- bottomRadius 获取或设置指定圆柱体底部半径的数值属性。
- definitionChanged
- distanceDisplayCondition
- fill
- heightReference
- length 获取或设置指定圆柱体长度的数字属性
- material
- numberOfVerticalLines
- outline
- outlineColor
- outlineWidth
- shadows
- show
- slices 获取或设置属性,该属性指定圆柱体周长周围的边数。默认值128
- topRadius 获取或设置指定圆柱体顶部半径的数值属性。圆锥就是0,可以通俗的理解成上面的表面积,与bottomRadius向对应,相等就是柱体
总结
(5)多边形 Polygons
https://sandcastle.cesium.com/?src=Polygon.html
const viewer = new Cesium.Viewer("cesiumContainer");
#红色的那块实体
const redPolygon = viewer.entities.add({
name: "Red polygon on surface",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-115.0,
37.0,
-115.0,
32.0,
-107.0,
33.0,
-102.0,
31.0,
-102.0,
35.0,
]),
material: Cesium.Color.RED,
},
});
#绿色的那块实体-左边
const greenPolygon = viewer.entities.add({
name: "Green extruded polygon",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-108.0,
42.0,
-100.0,
42.0,
-104.0,
40.0,
]),
extrudedHeight: 500000.0,
material: Cesium.Color.GREEN,
closeTop: false,
closeBottom: false,
},
});
#带图片的那个实体-右边
const texturedPolygon = viewer.entities.add({
name:
"Extruded textured polygon with per-position heights and custom texture coordinates",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
-118.4,
40.4,
50000,
-118.4,
37,
30000,
-114.2,
38.0,
35000,
-108.0,
37,
30000,
-108.0,
40.4,
50000,
]),
textureCoordinates: {
positions: [
new Cesium.Cartesian2(0, 1),
new Cesium.Cartesian2(0, 0),
new Cesium.Cartesian2(0.5, 0),
new Cesium.Cartesian2(1, 0),
new Cesium.Cartesian2(1, 1),
],
},
perPositionHeight: true,
extrudedHeight: 0,
material: "../images/Cesium_Logo_Color.jpg",
},
});
#带图片的那个实体
const texturedPolygonWithHoles = viewer.entities.add({
name:
"Textured polygon with per-position heights, holes and custom texture coordinates",
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-130,
40.0,
50000,
-130,
36.0,
30000,
-125,
37,
35000,
-120,
36.0,
30000,
-120,
40.0,
50000,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-128,
39.2,
46000,
-128,
38.6,
42000,
-127,
38.6,
42000,
-127,
39.2,
46000,
]),
},
],
},
textureCoordinates: {
positions: [
new Cesium.Cartesian2(0, 1),
new Cesium.Cartesian2(0, 0),
new Cesium.Cartesian2(0.5, 0),
new Cesium.Cartesian2(1, 0),
new Cesium.Cartesian2(1, 1),
],
holes: [
{
positions: [
new Cesium.Cartesian2(0.2, 0.8),
new Cesium.Cartesian2(0.2, 0.6),
new Cesium.Cartesian2(0.4, 0.6),
new Cesium.Cartesian2(0.4, 0.8),
],
},
],
},
perPositionHeight: true,
material: "../images/Cesium_Logo_Color.jpg",
},
});
#橙色的那个实体
const orangePolygon = viewer.entities.add({
name: "Orange polygon with per-position heights and outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
-108.0,
25.0,
100000,
-100.0,
25.0,
100000,
-100.0,
30.0,
100000,
-108.0,
30.0,
300000,
]),
extrudedHeight: 0,
perPositionHeight: true,
material: Cesium.Color.ORANGE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
#蓝色的那个实体
const bluePolygon = viewer.entities.add({
name: "Blue polygon with holes",
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([
-99.0,
30.0,
-85.0,
30.0,
-85.0,
40.0,
-99.0,
40.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-97.0,
31.0,
-97.0,
39.0,
-87.0,
39.0,
-87.0,
31.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-95.0,
33.0,
-89.0,
33.0,
-89.0,
37.0,
-95.0,
37.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-93.0,
34.0,
-91.0,
34.0,
-91.0,
36.0,
-93.0,
36.0,
]),
},
],
},
],
},
],
},
material: Cesium.Color.BLUE.withAlpha(0.5),
height: 0,
outline: true, // height is required for outline to display
},
});
#蓝绿色的那个小三角形实体
const cyanPolygon = viewer.entities.add({
name: "Cyan vertical polygon with per-position heights and outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
-90.0,
41.0,
0.0,
-85.0,
41.0,
500000.0,
-80.0,
41.0,
0.0,
]),
perPositionHeight: true,
material: Cesium.Color.CYAN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
#最上方紫色的大实体
const purplePolygonUsingRhumbLines = viewer.entities.add({
name: "Purple polygon using rhumb lines with outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-120.0,
45.0,
-80.0,
45.0,
-80.0,
55.0,
-120.0,
55.0,
]),
extrudedHeight: 50000,
material: Cesium.Color.PURPLE,
outline: true,
outlineColor: Cesium.Color.MAGENTA,
arcType: Cesium.ArcType.RHUMB,
},
});
#相机位置定位到实体位置处
viewer.zoomTo(viewer.entities);
members介绍
-
arcType 获取或设置ArcType属性,该属性指定多边形边缘使用的线的类型。ArcType.GEODESIC
-
classificationType
-
closeBottom 获取或设置一个布尔值,指定是否包括挤出多边形的底部。
-
closeTop 获取或设置一个布尔值,指定是否包括挤出多边形的顶部。
-
definitionChanged
-
distanceDisplayCondition
-
extrudedHeight 获取或设置指定多边形挤压高度的数值属性。
->如果PolygonGraphics#perPositionHeight为false,则体积从PolygonGraphics#height开始,并在此高度结束。
->如果PolygonGraphics#perPositionHeight为true,则体积从每个PolygonGraphics#层级位置的高度开始,并在此高度结束。 -
extrudedHeightReference
-
fill
-
granularity
-
height
-
heightReference
-
hierarchy 获取或设置指定多边形层次结构的属性。后面一般跟:
-
material
-
outline
-
outlineColor
-
outlineWidth
-
perPositionHeight 获取或设置布尔值,指定是否使用每个位置的高度。
->如果为true,形状将具有由每个PolygonGraphics#层次结构位置的高度定义的非均匀高度。
->如果为false,形状将有一个固定的高度,由PolygonGraphics#height指定。 -
shadows
-
show
-
stRotation 获取或设置指定从北向逆时针旋转多边形纹理的数值属性。仅在textureCoordinates未定义时生效。默认值0
-
textureCoordinates 将纹理坐标指定为笛卡尔点的多边形层次结构的属性。对地面原语没有影响。后面一般跟:
-
zIndex
总结
(6)Polylines
https://sandcastle.cesium.com/?src=Polyline%20Dash.html&label=Geometries
const viewer = new Cesium.Viewer("cesiumContainer");
#红色那条线
const redLine = viewer.entities.add({
name: "Red dashed line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
38,
250000,
-125,
38,
250000,
]),
width: 5,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.RED,
}),
},
});
#蓝色那条线-蓝黄相间
const blueLine = viewer.entities.add({
name: "Wide blue dashed line with a gap color",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
40,
250000,
-125,
40,
250000,
]),
width: 30,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.BLUE,
gapColor: Cesium.Color.YELLOW,
}),
},
});
#橙色那条线
const orangeLine = viewer.entities.add({
name: "Orange dashed line with a short dash length",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
42,
250000,
-125,
42,
250000,
]),
width: 5,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.ORANGE,
dashLength: 8.0,
}),
},
});
#蓝绿色那条线
const cyanLine = viewer.entities.add({
name: "Cyan dashed line with a dash pattern.",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
44,
250000,
-125,
44,
250000,
]),
width: 10,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN,
dashPattern: parseInt("110000001111", 2),
}),
},
});
#黄色那条线
const yellowLine = viewer.entities.add({
name: "Yellow dashed line with a dash pattern.",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
46,
250000,
-125,
46,
250000,
]),
width: 10,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.YELLOW,
dashPattern: parseInt("1010101010101010", 2),
}),
},
});
viewer.zoomTo(viewer.entities);
Members
- arcType
- clampToGround 获取或设置布尔属性,该属性指定折线是否应夹紧到地面 false
- classificationType
- definitionChanged
- depthFailMaterial 获取或设置属性,该属性指定在折线未通过深度测试时用于绘制折线的材料。undefined
- distanceDisplayCondition
- granularity
- material
- positions 要求 array of Cartesian3
- shadows
- show
- width
- zIndex
(7)Polyline volumes 多段线卷
https://sandcastle.cesium.com/?src=Polyline%20Volume.html&label=Geometries
const viewer = new Cesium.Viewer("cesiumContainer");
function computeCircle(radius) {
const positions = [];
for (let i = 0; i < 360; i++) {
const radians = Cesium.Math.toRadians(i);
positions.push(
new Cesium.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
);
}
return positions;
}
function computeStar(arms, rOuter, rInner) {
const angle = Math.PI / arms;
const length = 2 * arms;
const positions = new Array(length);
for (let i = 0; i < length; i++) {
const r = i % 2 === 0 ? rOuter : rInner;
positions[i] = new Cesium.Cartesian2(
Math.cos(i * angle) * r,
Math.sin(i * angle) * r
);
}
return positions;
}
#红色
const redTube = viewer.entities.add({
name: "Red tube with rounded corners",
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray([
-85.0,
32.0,
-85.0,
36.0,
-89.0,
36.0,
]),
shape: computeCircle(60000.0),
material: Cesium.Color.RED,
},
});
#绿色盒子管道
const greenBox = viewer.entities.add({
name: "Green box with beveled corners and outline",
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-90.0,
32.0,
0.0,
-90.0,
36.0,
100000.0,
-94.0,
36.0,
0.0,
]),
shape: [
new Cesium.Cartesian2(-50000, -50000),
new Cesium.Cartesian2(50000, -50000),
new Cesium.Cartesian2(50000, 50000),
new Cesium.Cartesian2(-50000, 50000),
],
cornerType: Cesium.CornerType.BEVELED,
material: Cesium.Color.GREEN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
#蓝色
const blueStar = viewer.entities.add({
name: "Blue star with mitered corners and outline",
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-95.0,
32.0,
0.0,
-95.0,
36.0,
100000.0,
-99.0,
36.0,
200000.0,
]),
shape: computeStar(7, 70000, 50000),
cornerType: Cesium.CornerType.MITERED,
material: Cesium.Color.BLUE,
},
});
viewer.zoomTo(viewer.entities);
-
cornerType
-
definitionChanged
-
distanceDisplayCondition
-
fill
-
granularity
-
material
-
outline
-
outlineColor
-
outlineWidth
-
positions
-
shadows
-
shape 获取或设置属性,该属性指定定义要挤压的形状的笛卡尔位置数组。Cartesian2
-
show
(8)Rectangles
https://sandcastle.cesium.com/?src=Rectangle.html
const viewer = new Cesium.Viewer("cesiumContainer");
#红色实体
const redRectangle = viewer.entities.add({
name: "Red translucent rectangle",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,
20.0,
-80.0,
25.0
),
material: Cesium.Color.RED.withAlpha(0.5),
},
});
#绿色实体
const greenRectangle = viewer.entities.add({
name:
"Green translucent, rotated, and extruded rectangle at height with outline",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(
-110.0,
30.0,
-100.0,
40.0
),
material: Cesium.Color.GREEN.withAlpha(0.5),
rotation: Cesium.Math.toRadians(45),
extrudedHeight: 300000.0,
height: 100000.0,
outline: true, // height must be set for outline to display
outlineColor: Cesium.Color.BLACK,
},
});
#旋转的实体
let rotation = Cesium.Math.toRadians(30);
function getRotationValue() {
rotation += 0.005;
return rotation;
}
viewer.entities.add({
name: "Rotating rectangle with rotating texture coordinate",
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0),
material: "../images/Cesium_Logo_Color.jpg",
rotation: new Cesium.CallbackProperty(getRotationValue, false),
stRotation: new Cesium.CallbackProperty(getRotationValue, false),
classificationType: Cesium.ClassificationType.TERRAIN,
},
});
viewer.zoomTo(viewer.entities);
- Cesium.Rectangle.MAX_VALUE 最大矩形
- Cesium.Rectangle.packedLength
- height 只读
- north
- south
- west
- width
这个实体方法很多
(9)Spheres and ellipsoids
https://sandcastle.cesium.com/?src=Spheres%20and%20Ellipsoids.html&label=Geometries
const viewer = new Cesium.Viewer("cesiumContainer");
const blueEllipsoid = viewer.entities.add({
name: "Blue ellipsoid",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
material: Cesium.Color.BLUE,
},
});
const redSphere = viewer.entities.add({
name: "Red sphere with black outline",
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
const outlineOnly = viewer.entities.add({
name: "Yellow ellipsoid outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
slicePartitions: 24,
stackPartitions: 36,
},
});
viewer.zoomTo(viewer.entities);
(10)Walls
https://sandcastle.cesium.com/?src=Wall.html
const viewer = new Cesium.Viewer("cesiumContainer");
const redWall = viewer.entities.add({
name: "Red wall at height",
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-115.0,
44.0,
200000.0,
-90.0,
44.0,
200000.0,
]),
minimumHeights: [100000.0, 100000.0],
material: Cesium.Color.RED,
},
});
const greenWall = viewer.entities.add({
name: "Green wall from surface with outline",
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-107.0,
43.0,
100000.0,
-97.0,
43.0,
100000.0,
-97.0,
40.0,
100000.0,
-107.0,
40.0,
100000.0,
-107.0,
43.0,
100000.0,
]),
material: Cesium.Color.GREEN,
outline: true,
},
});
const blueWall = viewer.entities.add({
name: "Blue wall with sawtooth heights and outline",
wall: {
positions: Cesium.Cartesian3.fromDegreesArray([
-115.0,
50.0,
-112.5,
50.0,
-110.0,
50.0,
-107.5,
50.0,
-105.0,
50.0,
-102.5,
50.0,
-100.0,
50.0,
-97.5,
50.0,
-95.0,
50.0,
-92.5,
50.0,
-90.0,
50.0,
]),
maximumHeights: [
100000,
200000,
100000,
200000,
100000,
200000,
100000,
200000,
100000,
200000,
100000,
],
minimumHeights: [
0,
100000,
0,
100000,
0,
100000,
0,
100000,
0,
100000,
0,
],
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
viewer.zoomTo(viewer.entities);
- maximumHeights 获取或设置属性,该属性指定要用于墙顶的高度数组,而不是每个位置的高度。如果定义了,数组的长度必须与Wall#positions相同。
- minimumHeights 获取或设置属性,该属性指定要用于墙壁底部而不是球体表面的高度数组。如果定义了,数组的长度必须与Wall#positions相同。
补充说明 definitionChanged
在Cesium中,definitionChanged是实体(Entity)对象的事件,用于监听实体的属性是否发生变化。当实体的属性发生变化时,definitionChanged事件将被触发,允许开发者在这时执行相应的操作。
例如,假设你有一个Cesium的实体对象 entity,你可以监听 definitionChanged 事件来检测实体的属性是否发生变化,然后在发生变化时执行相应的操作。下面是一个简单的例子:
// 创建一个Cesium实体
var entity = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
label: {
text: 'Hello, Cesium!'
}
});
// 监听definitionChanged事件
entity.definitionChanged.addEventListener(function() {
// 在属性发生变化时执行的操作
console.log('Entity properties have changed!');
});
// 修改实体的属性,触发definitionChanged事件
entity.position = Cesium.Cartesian3.fromDegrees(-80.0, 35.0);
在上面的例子中,当修改实体的 position 属性时,definitionChanged 事件将被触发,打印出 ‘Entity properties have changed!’。这样,你就可以在属性发生变化时执行自定义的逻辑。注意,具体的属性变化可以根据需要监听,例如 position、label 等。
补充说明 granularity
在Cesium的实体(Entity)中,granularity属性通常用于指定球体、圆柱体等几何形状的细节级别,以控制其外观的精细程度。这个属性在创建球体或圆柱体等实体时很有用。
具体来说,granularity属性定义了球体或圆柱体的表面上的细分级别,用于影响其外观的平滑程度。较低的granularity值将导致较少的细分,而较高的值将导致更多的细分,使得表面看起来更加平滑。
// 创建一个球体实体
var entity = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
ellipsoid: {
radii: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0),
material: Cesium.Color.RED,
granularity: Math.PI / 180.0 // 设置granularity值
}
});
// 将实体添加到场景中
viewer.entities.add(entity);
在上面的例子中,ellipsoid表示一个椭球体(球体),并设置了radii为半径,material为红色,以及granularity属性为 Math.PI / 180.0。这里的granularity值以弧度为单位,表示每个角度上的细分级别。通过调整granularity的值,你可以观察到椭球体表面的平滑程度发生变化。
scandcastle如何在vscode中运行
以盒子为例:
在配置好的环境中,创建一个html文件;
可能出现的问题:1.检查代码中有关路径的问题
2.如果浏览器报401则很有可能是token有问题,连接加载地球有问题
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 示例使用 CDN 引入 CesiumJS,确保版本是最新的 -->
<script src="https://unpkg.com/cesium@1.83.0/Build/Cesium/Cesium.js"></script>
<!-- 使用正确版本的 CesiumJS 样式表 -->
<link href="https://unpkg.com/cesium@1.83.0/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<!-- 加载你的自定义样式表 -->
<link href="style.css" type="text/html" rel="stylesheet">
</head>
<body>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar"></div>
<!-- <div id="cesiumContainer"></div> -->
<script>
Cesium.Ion.defaultAccessToken =
"你的token";
const viewer = new Cesium.Viewer("cesiumContainer");
const blueBox = viewer.entities.add({
name: "Blue box",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE,
},
});
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),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
const outlineOnly = viewer.entities.add({
name: "Yellow box outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
},
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>