<template>
    <div>
      <div id="cesiumContainer">
        <div id="toolbar"></div>
      </div>
    </div>
</template>

<script>
  // 必须引用且只能引方法，不能直接引js文件
  import {addToolbarMenu} from '@/assets/cesium/Apps/Sandcastle/Sandcastle-header'
    export default {
      name: "GeometryHeightReference",
      components: {
        // Sandcastle
      },
      data() {
        return {
        }
      },
      mounted() {
        this.setContent()
      },
      methods: {
        setContent() {
          let t = this
          var cesiumTerrainProvider = this.Cesium.createWorldTerrain();
          var ellipsoidTerrainProvider = new this.Cesium.EllipsoidTerrainProvider();
          var viewer = new this.Cesium.Viewer('cesiumContainer', {
            baseLayerPicker : false,
            terrainProvider : cesiumTerrainProvider
          });

          // depth test against terrain is required to make the polygons clamp to terrain
          // instead of showing through it from underground
          viewer.scene.globe.depthTestAgainstTerrain = true;
          Sandcastle.addToolbarMenu([{
            text : 'Polygons',
            onselect : function() {
              viewer.entities.removeAll();
              t.addPolygons(viewer);
            }
          }, {
            text : 'Boxes, Cylinders and Ellipsoids',
            onselect : function() {
              viewer.entities.removeAll();
              t.addGeometries(viewer);
            }
          }]);

          Sandcastle.addToolbarMenu([{
            text : 'Terrain Enabled',
            onselect : function() {
              viewer.scene.terrainProvider = cesiumTerrainProvider;
            }
          }, {
            text : 'Terrain Disabled',
            onselect : function() {
              viewer.scene.terrainProvider = ellipsoidTerrainProvider;
            }
          }]);
        },
        addGeometry(i, j, viewer) {
          var longitude = 6.950615989890521;
          var latitude = 45.79546589994886;
          var delta = 0.001;

          var west = longitude + delta * i;
          var north = latitude + delta * j + delta;

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

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

        addPolygon(i, j, viewer) {
          var longitude = 6.950615989890521;
          var latitude = 45.79546589994886;
          var delta = 0.001;

          var west = longitude + delta * i;
          var east = longitude + delta * i + delta;

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

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

        addPolygons(viewer) {
          // create 16 polygons that are side-by-side
          for (var i = 0; i < 4; i++) {
            for (var j = 0; j < 4; j++) {
              this.addPolygon(i, j, viewer);
            }
          }
          viewer.camera.lookAt(this.Cesium.Cartesian3.fromDegrees(longitude, latitude, 1500), new this.Cesium.HeadingPitchRange(-this.Cesium.Math.PI/2, -this.Cesium.Math.PI_OVER_FOUR, 2000));
          viewer.camera.lookAtTransform(this.Cesium.Matrix4.IDENTITY);
        }
      }
    }
</script>

<style scoped>
  #cesiumContainer{
    position: relative;
  }
 #toolbar {
   position: absolute;
   z-index: 1000;
 }
</style>

说明：toolbar是需要添加的下拉框的位置，若不是'toolbar', 则在Sandcastle.addToolbarMenu后面加上id

需要调用Sandcastle.addToolbarMenu时，Sandcastle在文章一中已经默认引入，只需引入方法

// 必须引用且只能引方法，不能直接引js文件
import {addToolbarMenu} from '@/assets/cesium/Apps/Sandcastle/Sandcastle-header'

调用如上代码中调用，效果如下