2.Cesium几何图形的添加（未设置监听事件）

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

<script>
export default {
  data() {
    return {
      heading: 0,
      pitch: 0,
      roll: 0,
      entity: "",
    };
  },
  mounted() {
    this.initModel();
  },

  methods: {
    initModel() {
      // 加载清晰度比较好的地球
      var esri = new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/service/World_Imagery/MapServer",
      });
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZGZjYzI3ZC03ZDE4LTRiNzctOGIzMy0yY2Y4NmViMTU1NzkiLCJpZCI6MTAzNzYzLCJpYXQiOjE2NTk2ODM0NDV9.Ti2juWJHJpkuD6CHD5_tal_JtWTlaFyw9dW_temELig";
      const viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: false,
        // 设置图层
        // ImageryProvider: esri,
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: Cesium.IonResource.fromAssetId(1),
          requestVertexNormals: true,
          requestWaterMask: true,
        }),
      });
      window.viewer = viewer;

      this.draw();
    },

    draw() {
      // 绘制盒子
      var redBox = viewer.entities.add({
        name: "Red box with black outline",
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0), // 定义经纬度及中心高度
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), // 长：400km 宽：300km 高：500km
          material: Cesium.Color.RED.withAlpha(0.5), // 透明度0.5
          outline: true, // 绘制边线
          outlineColor: Cesium.Color.BLACK, // 边线颜色黑色
        },
      });

      // 绘制点
      var point = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(120, 30, 200),
        // 点
        point: {
          color: Cesium.Color.RED, // 点位颜色
          pixelSize: 10, // 像素点大小
        },
        // 文字
        label: {
          // 文本。支持显式换行符“ \ n”
          // text: "测试点",
          // 字体样式，以CSS语法指定字体
          font: "14pt Source Han Sans CN",
          // 字体颜色
          fillColor: Cesium.Color.BLACK,
          // 背景颜色
          backgroundColor: Cesium.Color.AQUA,
          // 是否显示背景颜色
          showBackground: true,
          // 字体边框
          outline: true,
          // 字体边框颜色
          outlineColor: Cesium.Color.WHITE,
          // 字体边框尺寸
          outlineWidth: 10,
          // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
          scale: 1.0,
          // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          // 相对于坐标的水平位置
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          // 相对于坐标的水平位置
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
          pixelOffset: new Cesium.Cartesian2(10, 0),
          // 是否显示
          show: true,
        },
      });

      // 绘制墙面
      let wall = viewer.entities.add({
        wall: {
          // 指定墙顶上一系列的点
          positions: Cesium.Cartesian3.fromDegreesArray([
            106.941991, 25.917029, 107.941991, 26.917029, 108.941991, 27.917029,
          ]),
          maximumHeights: [500000, 600000, 500000], // 指定墙顶上一系列点的高度，也就是墙对应点上的高度。
          minimumHeights: [0, 300000, 0], // 指定墙下一系列点的高度，也就是墙下对应点离地的高度。不指定则帖地。
          outline: true,
          outlineColor: Cesium.Color.LIGHTGRAY,
          outlineWidth: 4,
          material: Cesium.Color.fromRandom({ alpha: 0.7 }),
        },
      });

      // 绘制线管
      let polylineVolum = viewer.entities.add({
        id: "ploylineVolum",
        name: "ploylineVolum",
        polylineVolume: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            120.0, 40.0, 120.0, 45.0, 125.0, 45.0,
          ]),
          shape: [
            new Cesium.Cartesian2(-10000, 0),
            new Cesium.Cartesian2(10000, 0),
            new Cesium.Cartesian2(20000, 17340),
            new Cesium.Cartesian2(0, 37340),
            new Cesium.Cartesian2(-20000, 17340),
          ],
          material: Cesium.Color.YELLOWGREEN,
          fill: true,
          outline: true,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 10,
        },
      });

      // 绘制平面
      let plane = viewer.entities.add({
        name: "entityPlane",
        position: Cesium.Cartesian3.fromDegrees(123.6, 45.8),
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0),
          material: Cesium.Color.BLUE,
        },
      });

      // 绘制椭圆
      let ellipse = viewer.entities.add({
        id: "ellipse",
        name: "entityEllipse",
        position: Cesium.Cartesian3.fromDegrees(128.0, 45.0),
        ellipse: {
          semiMajorAxis: 100000,
          semiMinorAxis: 60000,
          material: Cesium.Color.fromRandom().withAlpha(1),
          //拉伸
          extrudedHeight: 100000,
          heightReference: Cesium.HeightReference.CLAMP_TO_EDGE,
          rotation: 0.9,
          shadows: Cesium.ShadowMode.ENABLED,
        },
      });

      // 绘制圆柱(锥)
      let cylinder = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(113.39, 40.0, 100000.0),
        cylinder: {
          length: 200000.0, // 圆柱的高
          topRadius: 55000.0, //圆柱底部大小
          topRadius: 0.0, //圆柱顶部大小
          bottomRadius: 55000.0, //圆柱低部大小
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 4,
          material: Cesium.Color.YELLOW.withAlpha(0.9),
        },
      });

      // 绘制圆形
      let circle = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(115, 40.0),
        ellipse: {
          semiMinorAxis: 25000.0, // 圆形的x，y
          semiMajorAxis: 25000.0,
          rotation: Cesium.Math.toRadians(-40.0),
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 4,
          // extrudedHeight: 100000,// 拉伸（增大面积）
          height: 100000,
          stRotation: Cesium.Math.toRadians(90),
          // material: stripeMaterial,
        },
      });

      // 绘制多边形
      let polygon = viewer.entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(
            // 绘制多边形，经度和纬度值列表。值交替显示[经度，纬度，经度，纬度...]
            Cesium.Cartesian3.fromDegreesArray([
              -107.0, 27.0, -107.0, 22.0, -102.0, 23.0, -97.0, 21.0, -97.0,
              25.0,
            ])
          ),
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 4,
          // material: stripeMaterial,
        },
      });

      // 绘制多边柱体
      let polygonHierarchy = viewer.entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray([
              -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0,
            ])
          ),
          height: 3000.0,
          extrudedHeight: 700000.0,
          outline: true,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 4,
          material: Cesium.Color.fromRandom({ alpha: 1.0 }),
        },
      });

      viewer.zoomTo(polygonHierarchy);
    },
  },
};
</script>

<style></style>