Cesium绘制面，编辑面

 //面
    Area() {
      let vertices = []; // 存储所有顶点实体
      let currentPositions = []; // 当前绘制中的位置数据数组
      let drawing = false;
      let line = [];
      let editing = true;
      let verticesArr = [];
      let tempPosition = []; // 用于存储临时位置
      let indexTem;
      let allPloysData = []; // 存储所有面的数据

      // 创建折线实体
      const createPolylineEntity = (list, vertices) => {
        const currentPoly = this.viewer.entities.add({
          polyline: {
            positions: new Cesium.CallbackProperty(
              () => list ?? currentPositions,
              false
            ),
            width: 10, // 线宽度
            material: new Cesium.PolylineGlowMaterialProperty({
              color: Cesium.Color.RED,
            }), // 颜色
            depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
              color: new Cesium.Color.fromCssColorString("#ccc"),
            }), // 被地形覆盖的虚线颜色
            clampToGround: true, // 是否贴和地型
            classificationType: Cesium.ClassificationType.BOTH,
          },
          polygon: {
            hierarchy: new Cesium.CallbackProperty(() => {
              const closedPositions = closePolygon(list ?? currentPositions);
              return new Cesium.PolygonHierarchy(closedPositions);
            }, false),
            material: Cesium.Color.RED.withAlpha(0.1),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            classificationType: Cesium.ClassificationType.BOTH,
          },
        });
        currentPoly.type = "polygon";
        this.allPolygons.push(currentPoly);
        let id = vertices ? vertices[0].id : "";
        line.push({ id, currentPoly }); // 将折线实体添加到 line 数组
        // 存储线的数据
        let lineData = {
          id: vertices ? vertices[0].id : "",
          lineEntity: currentPoly,
          vertices: vertices,
        };
        allPloysData.push(lineData); // 将线的数据添加到 allLinesData 数组
        return currentPoly;
      };

      // 添加顶点实体
      const addVertex = (position) => {
        const vertexEntity = this.viewer.entities.add({
          position: new Cesium.CallbackProperty(() => position, false),
          point: {
            pixelSize: 10, // 添加点的大小
            color: new Cesium.Color("#FFFFFF"), // 点的颜色
            outlineColor: Cesium.Color.YELLOW, // 外圈颜色
            outlineWidth: 4, // 外圈大小
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
            clampToGround: true,
          },
        });
        this.allPolygonsPoints.push(vertexEntity);
        vertexEntity.type = "allPolygonsPoints";
        vertices.push(vertexEntity);
        console.log("vertices", vertices);
        return vertexEntity;
      };

      // 更新顶点位置并刷新折线实体的位置
      const updatePositions = () => {
        currentPositions = vertices.map((vertex) => vertex.position.getValue());
      };

      // 确保多边形闭合
      const closePolygon = (positions) => {
        if (positions.length < 3) return positions; // 至少需要3个点才能构成多边形
        // 检查第一个顶点 (positions[0]) 和最后一个顶点 (positions[positions.length - 1]) 是否相同。
        if (
          !Cesium.Cartesian3.equalsEpsilon(
            positions[0],
            positions[positions.length - 1]
          )
        ) {
          // 如果第一个顶点和最后一个顶点不相同，则使用 Cesium.Cartesian3.clone 方法复制第一个顶点，并将其添加到数组的末尾，使得多边形闭合。
          positions.push(Cesium.Cartesian3.clone(positions[0]));
        }
        return positions;
      };

      // 点击开始绘制
      this.handler.setInputAction((movement) => {
        let pickedObject = this.viewer.scene.pick(movement.position);
        if (pickedObject && pickedObject.id instanceof Cesium.Entity) {
          let pickedEntity = pickedObject.id;
          if (pickedEntity.point) {
            // 用户点击了一个点实体
            pickedEntity.point.color = Cesium.Color.RED; // 高亮显示选中的顶点

            // // 记录当前是否处于拖动状态
            // let isDragging = false;
            // // 保存当前的屏幕空间相机控制器状态
            // const originalCameraControllerEnabled =
            //   this.viewer.scene.screenSpaceCameraController.enableInputs;
            // // 保存拖拽事件的引用
            // let dragInputAction = null;

            let currentId = null;
            let currentPoint = verticesArr.find((arr) => {
              let op = arr.find((item, index) => {
                if (index == 0) {
                  currentId = item.id;
                }
                return pickedEntity.id == item.id;
              });
              return op;
            });

            if (currentPoint) {
              if (drawing) {
                endAndStartNewDrawing();
              }
              drawing = true;
              editing = false;
              vertices = currentPoint;
              line.find((item, index) => {
                if (item.id == currentId) {
                  this.viewer.entities.remove(line[index].currentPoly);
                  line.splice(index, 1);
                  return true;
                }
              });
            }
            // 设置拖拽事件
            this.handler.setInputAction((movement) => {
              // if (isDragging) {
              let ray = this.viewer.camera.getPickRay(movement.endPosition);
              let cartesian = this.viewer.scene.globe.pick(
                ray,
                this.viewer.scene
              );
              if (cartesian) {
                let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                let lng = Cesium.Math.toDegrees(cartographic.longitude);
                let lat = Cesium.Math.toDegrees(cartographic.latitude);
                let alt = cartographic.height;
                // 更新顶点位置
                pickedEntity.position = new Cesium.CallbackProperty(
                  () => Cesium.Cartesian3.fromDegrees(lng, lat, alt),
                  false
                );
                updatePositions(); // 更新顶点位置并刷新折线实体
              }
              // }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            // 设置按下事件
            // this.handler.setInputAction(() => {
            //   console.log("按下");
            //   isDragging = true;
            //   // 禁用屏幕空间相机控制器 禁制拖动时地球跟随移动
            //   this.viewer.scene.screenSpaceCameraController.enableInputs = false;
            //   //保存当前的处理函数，以便在释放鼠标时恢复。
            //   dragInputAction = this.handler.getInputAction(
            //     Cesium.ScreenSpaceEventType.MOUSE_MOVE
            //   );
            // }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
            // 取消拖拽事件
            this.handler.setInputAction(() => {
              // isDragging = false;
              // 恢复颜色
              if (pickedEntity && pickedEntity.point) {
                pickedEntity.point.color = new Cesium.Color("#FFFFFF"); // 恢复原始颜色
              }
              // // 恢复屏幕空间相机控制器
              // this.viewer.scene.screenSpaceCameraController.enableInputs =
              //   originalCameraControllerEnabled;
              // 移除拖拽事件
              this.handler.removeInputAction(
                Cesium.ScreenSpaceEventType.MOUSE_MOVE
              );
              // // 恢复原来的鼠标移动事件
              // this.handler.setInputAction(
              //   dragInputAction,
              //   Cesium.ScreenSpaceEventType.MOUSE_MOVE
              // );
            }, Cesium.ScreenSpaceEventType.LEFT_UP);
            updatePositions(); // 更新顶点位置并刷新折线实体
          }
        } else {
          if (indexTem) {
            tempPosition.pop();
            indexTem = 0;
          }
          if (!drawing) {
            drawing = true;
            createPolylineEntity(); // 创建新的折线实体
          }
          let ray = this.viewer.camera.getPickRay(movement.position);
          let cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
          if (cartesian) {
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            let lng = Cesium.Math.toDegrees(cartographic.longitude);
            let lat = Cesium.Math.toDegrees(cartographic.latitude);
            let alt = cartographic.height;
            let pointdian = Cesium.Cartesian3.fromDegrees(lng, lat, alt);
            tempPosition.push(pointdian);
            addVertex(pointdian); // 添加顶点实体
            updatePositions(); // 更新顶点位置并刷新折线实体
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      //移动过程
      // this.handler.setInputAction((movement) => {
      //   console.log("移动中");
      //   if (drawing && indexTem) {
      //     tempPosition.pop();
      //     indexTem = 0;
      //   }
      //   if (drawing) {
      //     let ray = this.viewer.camera.getPickRay(movement.endPosition);
      //     let cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
      //     if (cartesian) {
      //       let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      //       let lng = Cesium.Math.toDegrees(cartographic.longitude);
      //       let lat = Cesium.Math.toDegrees(cartographic.latitude);
      //       let alt = cartographic.height;
      //       let cartesian3 = Cesium.Cartesian3.fromDegrees(lng, lat, alt);
      //     }
      //   }
      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 结束当前绘制并开始新的绘制

      // 删除指定实体
      const deleteEntity = (entity) => {
        this.viewer.entities.remove(entity);
        // 从相关数组中移除被删除的实体
        if (entity.type === "allLinePoints") {
          let index = this.allLinePoints.indexOf(entity);
          if (index > -1) {
            this.allLinePoints.splice(index, 1);
          }
        } else if (entity.type === "polyline") {
          let index = allPloysData.findIndex(
            (lineData) => console.log("lineData", lineData)
            //  lineData.lineEntity === entity
          );
          if (index > -1) {
            allPloysData.splice(index, 1);
          }
        }
      };

      const handleDeleteEntity = (entityToDelete) => {
        deleteEntity(entityToDelete);
      };

      const endAndStartNewDrawing = () => {
        if (currentPositions.length > 0) {
          createPolylineEntity(currentPositions, vertices);
          drawing = false;
          // 清空当前顶点数组
          if (editing) {
            verticesArr.push(vertices);
          }
          editing = true;
          vertices = [];
          // 清空当前位置数组
          currentPositions = [];
          console.log("verticesArr", verticesArr);
          console.log("绘制完成");
        }
      };

      this.handler.setInputAction((movement) => {
        if (drawing) {
          endAndStartNewDrawing();
        } else {
          let pickedObject = this.viewer.scene.pick(movement.position);
          if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
            let entityToDelete = pickedObject.id;
            handleDeleteEntity(entityToDelete);
          }
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },