Cesium添加面

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

var Cesium = require("cesium/Cesium")
export default {
  mounted() {
    console.log('Cesium', Cesium);
    //  创建地图
    let viewer = new Cesium.Viewer("cesiumContainer", {
      infoBox: false, // 点击要素之后显示的信息 信息框小部件
      geocoder: false, // 地名查找控件
      homeButton: false, // Home按钮
      animation: false, // 动画控件
      fullscreenButton: false, // 全屏按钮
      sceneModePicker: false, // 切换展示模式控件 2D/3D
      navigationHelpButton: false, // 帮助信息控件导航提示
      baseLayerPicker: false,//地图选择器
    })

    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    let positions = [] // 用于存储点的位置数据数组
    let drawing = false;
    handler.setInputAction(function (movement) {
      if (!drawing) {
        positions = [];
        drawing = true;
      }
      let ray = viewer.camera.getPickRay(movement.position);//这里定义了一个事件处理函数，当事件被触发时执行。
      let cartesian = viewer.scene.globe.pick(ray, viewer.scene);//这行代码根据鼠标点击位置创建了一个射线
      let cartographic = Cesium.Cartographic.fromCartesian(cartesian);//这行代码使用射线与地球表面的交点，得到一个笛卡尔坐标。
      let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度 这里将笛卡尔坐标转换为经纬度高度坐标系。
      let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度 这行代码将经度从弧度转换为度数。
      let alt = cartographic.height; // 高度

      positions.push(Cesium.Cartesian3.fromDegrees(lng, lat, alt))

      if (positions.length < 1) return;
      viewer.entities.add({
        name: "面",
        polygon: {
          hierarchy: positions,	// 点位置数组
          // material: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),
          material: new Cesium.Color.AQUA,
          // 面颜色
        },
      });
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    handler.setInputAction(function () {
      if (drawing) {
        drawing = false;
      }
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);


    // setView  flyTo
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(109, 34, 1000000),//相机眼睛位置，不是地图位置  经度，维度，高度
      //相机姿态
      orientation: {
        heading: Cesium.Math.toRadians(0.0), // 朝向
        pitch: Cesium.Math.toRadians(-90),    //俯仰   垂直向下
        roll: 0.0                             // 滚转
      },
      duration: 2,
    });

  }
}
</script>

可以翻翻其他文章噢宝宝🤭