五、Vue引用Cesium调用Sandcastle-header.js文件中的方法

Bertha 。 2023-06-07 10:58 35阅读 0赞

<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'

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20230601/91949eaf94134f24a8d8e37225ca41c4.png