原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Geometry%20Height%20Reference.html

效果如下视频所示：

Cesium.HeightReference属性：

示例代码如下：

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
const ellipsoidTerrainProvider = new Cesium.EllipsoidTerrainProvider();
const worldTerrain = Cesium.Terrain.fromWorldTerrain();

const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayerPicker: false,
  terrain: worldTerrain,
});

/**
 * 需要对地形进行深度测试，以使多边形贴合地面，而不是从地下穿透显示在地形上
 */
viewer.scene.globe.depthTestAgainstTerrain = true;

Sandcastle.addToolbarMenu([
  {
    text: "多边形",
    onselect: function () {
      viewer.entities.removeAll();
      addPolygons();
    },
  },
  {
    text: "立方体, 圆柱及拖球体",
    onselect: function () {
      viewer.entities.removeAll();
      addGeometries();
    },
  },
]);

Sandcastle.addToolbarMenu([
  {
    text: "开启地形",
    onselect: function () {
      viewer.scene.setTerrain(worldTerrain);
    },
  },
  {
    text: "禁用地形",
    onselect: function () {
      viewer.scene.terrainProvider = ellipsoidTerrainProvider;
    },
  },
]);

const longitude = 6.950615989890521;
const latitude = 45.79546589994886;
const delta = 0.001;

function addGeometry(i, j) {
  const west = longitude + delta * i;
  const north = latitude + delta * j + delta;

  const type = Math.floor(Math.random() * 3);
  if (type === 0) {
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(west, north, 0.0),
      box: {
        dimensions: new Cesium.Cartesian3(40.0, 30.0, 50.0),
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
    });
  } else if (type === 1) {
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(west, north, 0.0),
      cylinder: {
        length: 50.0,
        topRadius: 20.0,
        bottomRadius: 20.0,
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
    });
  } else {
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(west, north, 0.0),
      ellipsoid: {
        radii: new Cesium.Cartesian3(20.0, 15.0, 25.0),
        material: Cesium.Color.fromRandom({ alpha: 1.0 }),
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
    });
  }
}

function addGeometries() {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      addGeometry(i, j);
    }
  }
  viewer.zoomTo(viewer.entities);
}

function addPolygon(i, j) {
  const west = longitude + delta * i;
  const east = longitude + delta * i + delta;

  const south = latitude + delta * j;
  const north = latitude + delta * j + delta;
  const a = Cesium.Cartesian3.fromDegrees(west, south);
  const b = Cesium.Cartesian3.fromDegrees(west, north);
  const c = Cesium.Cartesian3.fromDegrees(east, north);
  const d = Cesium.Cartesian3.fromDegrees(east, south);

  const positions = [a, b, c, d];
  viewer.entities.add({
    polygon: {
      hierarchy: positions,
      material: Cesium.Color.fromRandom({ alpha: 1 }),
      height: 40.0,
      heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      extrudedHeight: 0.0,
      extrudedHeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    },
  });
}

function addPolygons() {
  // 创建 16 个并排的多边形
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      addPolygon(i, j);
    }
  }
  viewer.camera.lookAt(
    Cesium.Cartesian3.fromDegrees(longitude, latitude, 1500),
    new Cesium.HeadingPitchRange(
      -Cesium.Math.PI / 2,
      -Cesium.Math.PI_OVER_FOUR,
      2000
    )
  );
  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
}