Cesium 案例（十一） Terrain Exaggeration-526互联



  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       });