Cesium中的实体Entity

包括Boxes、

1
2
3
4
5
6
//这两行函数针对每一个代码块的代码都需要加上才能运行成功；分别放置在首尾位置

var viewer = new Cesium.Viewer('cesiumContainer');
//viewer.entities可以替换为每个entity的名字，例如blueBox、redBox
viewer.zoomTo(viewer.entities);

Boxes

蓝色的立方体

1
2
3
4
5
6
7
8
9
10
//添加一个蓝色的立方体
var blueBox = viewer.entities.add({
  name: "Blue box",
  position: Cesium.Cartesian3.fromDegrees(-114.0, 35.0, 300000.0),
  box: {
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    material: Cesium.Color.BLUE,
  },
});
viewer.zoomTo(blueBox);

具有黑色边框的立方体

1
2
3
4
5
6
7
8
9
10
11
12
13
//具有黑色边界的红色立方体   
var redBox = viewer.entities.add({
  name: "Red box with black outline",
  position: Cesium.Cartesian3.fromDegrees(-107.0, 35.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,
	outlineWidth: 3.0
  },
});
viewer.zoomTo(redBox);

黄色立体边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//黄色立方体边界
var outlineOnly = viewer.entities.add({
  name: "Yellow box outline",
  position: Cesium.Cartesian3.fromDegrees(-100.0, 35.0, 300000.0),
  box: {
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    fill: false,
    outline: true,
    outlineColor: Cesium.Color.YELLOW,
  },
});
//把所有的entity显示出来
viewer.zoomTo(OutlineOnly);

Circles and Ellipses

带有边界的绿色圆

1
2
3
4
5
6
7
8
9
10
11
12
13
//Green circle at height with outline
//带有边界的绿色圆
var greenCircle = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-114.0, 30.0, 150000.0),
  name: "Green circle at height with outline",
  ellipse: {
    semiMinorAxis: 300000.0,	//半短轴
    semiMajorAxis: 300000.0,	//半长轴
    height: 200000.0,	//距离地面高度
    material: Cesium.Color.GREEN,	//填充材料
    outline: true, // height must be set for outline to display
  },
});

位于地球表面的红色椭圆

1
2
3
4
5
6
7
8
9
10
11
//Red ellipse on surface
//位于地球表面的红色椭圆
var redEllipse = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-107.0, 30.0),
  name: "Red ellipse on surface",
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 400000.0,
    material: Cesium.Color.RED.withAlpha(0.5),
  },
});

蓝色柱体，旋转45°

1
2
3
4
5
6
7
8
9
10
11
12
var blueEllipse = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-100.0, 30.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,
  },
});

corridor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var redCorridor = viewer.entities.add({
  name: "Red corridor on surface with rounded corners",
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -90.0,
      46.0,
      -95.0,
      46.0,
      -95.0,
      41.0,
    ]),
    width: 200000.0,
    material: Cesium.Color.RED.withAlpha(0.5),
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var greenCorridor = viewer.entities.add({
  name: "Green corridor at height with mitered corners and outline",
  corridor: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      -90.0,
      40.0,
      -95.0,
      40.0,
      -95.0,
      35.0,
    ]),
    height: 100000.0,
    width: 200000.0,
    cornerType: Cesium.CornerType.MITERED,
    material: Cesium.Color.GREEN,
    outline: true, // height required for outlines to display
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var 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,
  },
});

Cylinder and Cones

1
2
3
4
5
6
7
8
9
10
11
12
var 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.DARK_GREEN,
  },
});
1
2
3
4
5
6
7
8
9
10
var redCone = viewer.entities.add({
  name: "Red cone",
  position: Cesium.Cartesian3.fromDegrees(-100.0, 46.0, 200000.0),
  cylinder: {
    length: 400000.0,
    topRadius: 0.0,
    bottomRadius: 200000.0,
    material: Cesium.Color.RED,
  },
});

Polygon

红色多边形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var 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,
  },
});

绿色延伸多边形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var 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: true,	//布尔值，指定是否包含多边形的顶部
    closeBottom: true,	//布尔值，指定是否包含多边形的底部
  },
});

带有每个位置高度和轮廓的橙色多边形

每个点的高度不一样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var 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,
  },
});

中空的蓝色多边形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var 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
  },
});

带有每个位置高度和轮廓的青色垂直多边形

每个点的参数有三个（分别是经度、纬度、高度）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var 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,
  },
});

有轮廓的菱形线的紫色多边形

outline边框线的类型是虚线，而非实线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var 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,
  },
});

PolyLines

  • arcType：获取或设置ArcType属性，该属性指定线段应该是大圆弧、直角线还是线性连接的，ArcType定义连接顶点应采用的路径。

    • 有三个路径NONE、GEODESIC、RHUMB。
    • RHUMB：恒向线是始终与经线保持相同的角度；

  • clampToGround：获取或设置布尔属性，该布尔属性指定是否应将折线固定在地面上。默认为false。

  • position：位置

  • width：宽度

  • material：这个参数可以通过调用函数来丰富内容，函数的种类包括多种，可以是虚线、发光的线等等

    • 函数名的例子：PolylineGlowMaterialProperty，Glow替换掉其他的即可；

在地形上的红色线

1
2
3
4
5
6
7
8
9
var redLine = viewer.entities.add({
  name: "Red line on terrain",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    material: Cesium.Color.RED,
    clampToGround: true,
  },
});

绿色恒向线

1
2
3
4
5
6
7
8
9
var greenRhumbLine = viewer.entities.add({
  name: "Green rhumb line",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    arcType: Cesium.ArcType.RHUMB,
    material: Cesium.Color.GREEN,
  },
});

在表面发光的蓝线

  • PolylineGlowMaterialProperty该函数有三个参数，分别是
  • color：颜色
  • glowPower：用于指定发光强度
  • taperPower：指定渐缩效果的强度，以占总线长的百分比表示。如果为1.0或更高，则不使用锥度效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var glowingLine = viewer.entities.add({
  name: "Glowing blue line on the surface",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
    width: 10,
    material: new Cesium.PolylineGlowMaterialProperty({
	  //PolylineGlowMaterialProperty该函数有三个参数，分别是
	  //color：颜色
	  //glowPower：用于指定发光强度
	  //taperPower：指定渐缩效果的强度，以占总线长的百分比表示。如果为1.0或更高，则不使用锥度效果。
      glowPower: 0.2,
      taperPower: 0.5,
      color: Cesium.Color.CORNFLOWERBLUE,
    }),
  },
});

带有黑色轮廓的橙色线，具有一定的高度并且沿着表面

  • PolylineOutlineMaterialProperty函数有三个参数：color颜色、outlineColor轮廓颜色、outlineWidth轮廓宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var orangeOutlined = viewer.entities.add({
  name:
    "Orange line with black outline at height and following the surface",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      39,
      250000,
      -125,
      39,
      250000,
    ]),
    width: 5,
    material: new Cesium.PolylineOutlineMaterialProperty({
	  //PolylineOutlineMaterialProperty函数有三个参数：color、outlineColor、outlineWidth
      color: Cesium.Color.ORANGE,
      outlineWidth: 2,
      outlineColor: Cesium.Color.BLACK,
    }),
  },
});

具有一定高度的紫色的直箭头

  • PolylineArrowMaterialProperty只有一个color函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var purpleArrow = viewer.entities.add({
  name: "Purple straight arrow at height",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      43,
      500000,
      -125,
      43,
      500000,
    ]),
    width: 10,
    arcType: Cesium.ArcType.NONE,
    material: new Cesium.PolylineArrowMaterialProperty(
	  //PolylineArrowMaterialProperty只有一个color函数
      Cesium.Color.PURPLE
    ),
  },
});

蓝色虚线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var dashedLine = viewer.entities.add({
  name: "Blue dashed line",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75,
      45,
      500000,
      -125,
      45,
      500000,
    ]),
    width: 4,
    material: new Cesium.PolylineDashMaterialProperty({
	  //PolylineDashMaterialProperty函数有四个参数，分别是：
	  //color
	  //gapColor：间隙的颜色
	  //dashLength：虚线图案的长度（像素）
	  //dashPattern：指定破折号的16位模式
      color: Cesium.Color.CYAN,
    }),
  },
});

Polyline Volumes

待定

Rectangle

红色矩形

1
2
3
4
5
6
7
8
9
10
11
12
13
var 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),
  },
});

绿色半透明，旋转，和挤压矩形具有高度和轮廓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var 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,
  },
});
1
2
3
4
5
6
7
var rotation = Cesium.Math.toRadians(30);

function getRotationValue() {
  //旋转角度每次增加0.05
  rotation += 0.005;
  return rotation;
}

旋转矩形

1
2
3
4
5
6
7
8
9
10
viewer.entities.add({
  name: "Rotating rectangle with rotating texture coordinate",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0),
    material: Cesium.Color.RED,
    rotation: new Cesium.CallbackProperty(getRotationValue, false),
    stRotation: new Cesium.CallbackProperty(getRotationValue, false),
    classificationType: Cesium.ClassificationType.TERRAIN,
  },
});

Spheres and Ellipsoids

  • 确定一个位置，然后增加一个半径
1
2
3
4
5
6
7
8
9
var 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,
  },
});
1
2
3
4
5
6
7
8
9
10
var 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,
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
var 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,
  },
});

Walls

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var 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,
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var 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,
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var 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,
  },
});