1 Cesium.Ion.defaultAccessToken =
2 "token";
3
4 const viewer = new Cesium.Viewer("cesiumContainer", {
5 terrainProvider: Cesium.createWorldTerrain(),
6 });
7 const scene = viewer.scene;
8 const globe = scene.globe;
9
10 globe.terrainExaggeration = 2.0;
11 //用于夸大地形的标量。默认为 1.0 (不夸张)。值 2.0 将地形缩放 2 倍。
12 //值 0.0 使地形完全平坦。请注意,地形夸大不会修改任何其他图元,因为它们是相对于椭圆体定位的。
13 globe.terrainExaggerationRelativeHeight = 2400.0;
14 //夸大地形的高度。默认为 0.0 (相对于椭球表面缩放)。
15 //高于此高度的地形将向上缩放,低于此高度的地形将向下缩放。
16 //请注意,地形夸大不会修改任何其他图元,因为它们是相对于椭圆体定位的。
17 //如果 Globe#terrainExaggeration 为 1.0 ,则此值无效。
18 scene.camera.setView({
19 destination: new Cesium.Cartesian3(
20 336567.0354790703,
21 5664688.047602498,
22 2923204.3566963132
23 ),
24 orientation: new Cesium.HeadingPitchRoll(
25 1.2273281382639265,
26 -0.32239612370237514,
27 0.0027207329018610338
28 ),
29 });
30 viewer.entities.add({
31 position: new Cesium.Cartesian3(
32 314557.3531714575,
33 5659723.771882165,
34 2923538.5417330978
35 ),
36 ellipsoid: {
37 radii: new Cesium.Cartesian3(400.0, 400.0, 400.0),
38 material: Cesium.Color.RED,
39 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
40 //一个属性,指定相对于实体位置的高度。
41 // 表示相对于地形的位置。
42 //Properties:
43 //Name Type Description
44 //NONE Number 立场是绝对的。
45 //CLAMP_TO_GROUND Number 该位置被夹在地形上。
46 //RELATIVE_TO_GROUND Number 位置高度是地形上方的高度。
47 },
48 });
49 let visualizeRelativeHeight = true;
50 function updateMaterial() {
51 if (visualizeRelativeHeight) {
52 const height = globe.terrainExaggerationRelativeHeight;
53 const exaggeration = globe.terrainExaggeration;
54 const alpha = Math.min(1.0, exaggeration * 0.25);
55 const layer = {
56 extendUpwards: true,
57 //// 如果为 true ,则波段的最大高度颜色将无限向上延伸。
58 extendDownwards: true,
59 // // 如果为 true ,则波段的最小高度颜色将无限向下延伸。
60
61 entries: [
62 //海拔条目列表。它们将自动从最低到最高排序。
63 //如果只有一个条目并且 extendsDownards 和 extendUpwards 都是 false ,那么它们都将被设置为 true 。
64 {
65 height: height + 100.0,
66 color: new Cesium.Color(0.0, 1.0, 0.0, alpha * 0.25),
67 },
68 {
69 height: height + 50.0,
70 color: new Cesium.Color(1.0, 1.0, 1.0, alpha * 0.5),
71 },
72 {
73 height: height,
74 color: new Cesium.Color(1.0, 1.0, 1.0, alpha),
75 },
76 {
77 height: height - 50.0,
78 color: new Cesium.Color(1.0, 1.0, 1.0, alpha * 0.5),
79 },
80 {
81 height: height - 100.0,
82 color: new Cesium.Color(1.0, 0.0, 0.0, alpha * 0.25),
83 },
84 ],
85 };
86 scene.globe.material = Cesium.createElevationBandMaterial({
87 //创建组合多层颜色/渐变带并将它们映射到地形高度的 Material 。
88 //着色器对所有高度进行二分搜索以找出哪些颜色高于和低于给定高度,
89 //并在它们之间进行插值以获得最终颜色。这种材料相对便宜地支持数百个条目。
90 scene: scene,
91 layers: [layer],
92 });
93 } else {
94 scene.globe.material = undefined;
95 }
96 }
97 updateMaterial();
98 const viewModel = {
99 exaggeration: globe.terrainExaggeration,
100 relativeHeight: globe.terrainExaggerationRelativeHeight,
101 };
102 function updateExaggeration() {
103 globe.terrainExaggeration = Number(viewModel.exaggeration);
104 globe.terrainExaggerationRelativeHeight = Number(
105 viewModel.relativeHeight
106 );
107 updateMaterial();
108 }
109 Cesium.knockout.track(viewModel);
110 const toolbar = document.getElementById("toolbar");
111 Cesium.knockout.applyBindings(viewModel, toolbar);
112 for (const name in viewModel) {
113 if (viewModel.hasOwnProperty(name)) {
114 Cesium.knockout
115 .getObservable(viewModel, name)
116 .subscribe(updateExaggeration);
117 }
118 }
119 Sandcastle.addToggleButton(
120 "Visualize Relative Height",
121 visualizeRelativeHeight,
122 function (checked) {
123 visualizeRelativeHeight = checked;
124 updateMaterial();
125 }
126 );
127 Sandcastle.addToolbarButton("Remove Exaggeration", function () {
128 viewModel.exaggeration = 1.0;
129 viewModel.relativeHeight = 0.0;
130 });