cesium中手动绘制立体图形范围（包括绘制过程）

绘制立体范围

如视频所示，手动绘制立体图形，点击开始绘制，鼠标右键结束绘制。

一个笨方法，获取你点击点的经纬度，然后通过获取的经纬度创建一个立体图形

//创建点
createPoint(position) {
      var point = this.viewer.entities.add({
        position: position,
        point: {
          color: Cesium.Color.WHITE,
          outlineColor: Cesium.Color.RED,
          outlineWidth: 0.5,
          pixelSize: 8,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
      });
      return point;
    },

drawGraphic(positionData) {
      // 绘制图形
      var shape = null;
      shape = this.viewer.entities.add({
        polygon: {
          hierarchy: positionData,
          material: new Cesium.ColorMaterialProperty(
            Cesium.Color.WHITE.withAlpha(0.7)
          ),
        },
      });
      return shape;
    },
    startDraw() {
      var that = this;
      // this.viewer.scene.globe.depthTestAgainstTerrain = true //深度检测
      //鼠标左键
      this.handler.setInputAction(function (event) {
        //点击获取经纬度坐标
        var earthPosition = that.viewer.scene.pickPosition(event.position);
        if (Cesium.defined(earthPosition)) {
          if (that.activeShapePointsLatlng.length === 0) {
            that.floatingPoint = that.createPoint(earthPosition);
            that.activeShapePointsLatlng.push(earthPosition);
            var dynamicPositions = new Cesium.CallbackProperty(function () {
              return new Cesium.PolygonHierarchy(that.activeShapePointsLatlng);
            }, false);
            that.activeShape = that.drawGraphic(dynamicPositions); //绘制动态图
          }
          that.activeShapePointsLatlng.push(earthPosition);
          that.activeShapePoints.push(that.createPoint(earthPosition));
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      //鼠标移动
      that.handler.setInputAction(function (event) {
        if (Cesium.defined(that.floatingPoint)) {
          var newPosition = that.viewer.scene.pickPosition(event.endPosition);
          if (Cesium.defined(newPosition)) {
            that.floatingPoint.position.setValue(newPosition);
            that.activeShapePointsLatlng.pop();
            that.activeShapePointsLatlng.push(newPosition);
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


      //鼠标右键移除动态图层
      that.handler.setInputAction(function (event) {

        that.terminateShape(that.activeShapePointsLatlng);
        that.$emit("getClick", that.coordinateList); // 抛出的事件
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },


terminateShape(dataItem) {
       console.log(dataItem,'鼠标绘制完以后的坐标');
      let that = this
        let data = dataItem.map((item) => {
          const cartographic = Cesium.Cartographic.fromCartesian(item);
          const x = Cesium.Math.toDegrees(cartographic.longitude);
          const y = Cesium.Math.toDegrees(cartographic.latitude);
          return {
            x,
            y,
          };
        });
        data.push({ x: data[0].x, y: data[0].y }); // 保持第一个点的坐标和最后一个坐标是一致的
        const list = data.map((item) => {
          return Cesium.Cartesian3.fromDegrees(item.x, item.y);
        });
        console.log(list, '转换');

        // 创建一个多边形
        let polygon = new Cesium.PolygonGeometry({
          polygonHierarchy: new Cesium.PolygonHierarchy(list),
          extrudedHeight: 15, // 高度为15
        });
        // 创建一个 GeometryInstance
        let geometryInstance = new Cesium.GeometryInstance({
          geometry: polygon,
          id: "custom_polygon",
        });
        // 设置材质translucent
        // let material = new Cesium.Material.fromType("Color");
        // material.uniforms.color = Cesium.Color.BLUE;

        // 创建 Primitive
        that.primitive = new Cesium.Primitive({
          geometryInstances: geometryInstance,
          appearance: new Cesium.MaterialAppearance({
            // material: material,
            translucent: true,
            closed: true,
          }),
        });
        // 将 Primitive 添加到场景中
        that.viewer.scene.primitives.add(that.primitive);
        that.coordinateList = data; // 存放绘制的图形坐标
        //移除节点
        if (that.activeShapePoints.length) {
          that.activeShapePoints.filter((point) => {
            that.viewer.entities.remove(point);
          });
        }
        that.viewer.entities.remove(that.floatingPoint); //去除动态点图形（当前鼠标点）
        that.viewer.entities.remove(that.activeShape); //去除动态图形
        that.floatingPoint = undefined;
        that.activeShape = undefined;
        that.activeShapePointsLatlng = [];
        that.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); // 图形绘制完成以后销毁 鼠标点击事件
      }