cesium-添加点线面可以动可编辑

使用

const drawEntities = new CesiumEntityDraw(viewer!, {});
 drawEntities.startDraw('需要绘制的类型');

CesiumEntityDraw.ts文件

import Cesium from 'cesium';
import CesiumEntityEdit from './entityMove';
class CesiumEntityDraw {
  private viewer: any;
  private config: any;
  private infoDetail: any;
  private handler: any;
  private entityEdit: any;
  constructor(
    viewer: Cesium.Viewer,
    config: { borderColor?: Cesium.Color; borderWidth?: number; material?: Cesium.Color }
  ) {
    /**cesium实例对象 */
    this.viewer = viewer;
    this.entityEdit = new CesiumEntityEdit(viewer, {});
    /**绘制要素的相关配置
       * 默认配置
       * {
          borderColor: Cesium.Color.BLUE,  边框颜色
          borderWidth: 2, 边框宽度
          material: Cesium.Color.GREEN.withAlpha(0.5),填充材质
      }
      */
    this.config = config || {
      borderColor: Cesium.Color.BLUE,
      borderWidth: 2
      // material: Cesium.Color.GREEN.withAlpha(0.5),
    };
    /**存贮绘制的数据 坐标 */
    this.infoDetail = {
      point: [],
      line: [],
      rectangle: [],
      circle: [],
      planeSelf: []
    };
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
  }
  startDraw(type: string) {
    switch (type) {
      case 'point':
        this.drawPoint();
        break;
      case 'rectangle':
        this.drawRectangle();
        break;
      case 'circle':
        this.drawCircle();
        break;
      case 'polygon':
        this.drawPolygon();
        break;
      case 'line':
        this.drawLine();
        break;
      default:
        this.drawPoint();
        break;
    }
    this.entityEdit.start();
  }
  /*******
   * @function: function
   * @return {*}
   * @description: 绘制点数据
   */
  drawPoint() {
    this.stopDraw();
    // 设置鼠标样式为crosshair
    document.body.style.cursor = 'crosshair';
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    this.handler.setInputAction((click: { position: any }) => {
      /**点击位置笛卡尔坐标 */
      const cartesian = this.viewer.camera.pickEllipsoid(
        click.position,
        this.viewer.scene.globe.ellipsoid
      );
      /**笛卡尔转弧度坐标 */
      const cartographic = Cesium.Cartographic.fromCartesian(
        cartesian,
        this.viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      );
      /**点击位置经度 */
      const lng = Cesium.Math.toDegrees(cartographic.longitude);
      /**点击位置维度 */
      const lat = Cesium.Math.toDegrees(cartographic.latitude);
      /**实体的唯一标注 */
      const id = new Date().getTime();
      this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(lng, lat, 0),
        name: 'point',
        id: id,
        point: {
          color: Cesium.Color.BLUE,
          pixelSize: 13,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 1
        }
      });
      this.infoDetail.point.push({ id: id, position: [lng, lat] });
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    this.handler.setInputAction((click: any) => {
      this.stopDraw();
      // 添加操作完成后恢复鼠标样式为默认箭头
      document.body.style.cursor = 'default';
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }
  /*******
   * @function: function
   * @description: 绘制矩形区域
   */
  drawRectangle() {
    this.stopDraw();
    // 设置鼠标样式为crosshair
    document.body.style.cursor = 'crosshair';
    const positions: any = [];
    let rectangle = null;
    const canvas = this.viewer.scene.canvas;
    this.handler = new Cesium.ScreenSpaceEventHandler(canvas);
    this.handler.setInputAction((click: { position: any }) => {
      if (positions.length) return;
      const cartesian = this.getCatesian3FromPX(click.position);
      positions.push(cartesian, cartesian);
      rectangle = this.viewer.entities.add({
        name: 'rectangle',
        rectangle: {
          coordinates: new Cesium.CallbackProperty(() => {
            const obj = Cesium.Rectangle.fromCartesianArray(positions);
            return obj;
          }, false),
          height: 0.1,
          material: this.config.material,
          zIndex: 100
        }
      });
      this.handler.setInputAction((move: { endPosition: any }) => {
        const cartesian = this.getCatesian3FromPX(move.endPosition);
        if (rectangle) {
          positions[positions.length - 1] = cartesian;
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    this.handler.setInputAction((click: any) => {
      this.stopDraw();
      // 添加操作完成后恢复鼠标样式为默认箭头
      document.body.style.cursor = 'default';
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }
  /*******
   * @function: function
   * @description: 绘制矩形区域
   */
  drawRectangleByPolygon() {
    this.stopDraw();
    // 设置鼠标样式为crosshair
    document.body.style.cursor = 'crosshair';
    /**
     * 矩形四点坐标
     */
    let westSouthEastNorth: number[] = [];
    /**实体的唯一标注 */
    let id: any = null;
    /**地图点击对象 */
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    this.handler.setInputAction((click: { position: any }) => {
      this.viewer.scene.screenSpaceCameraController.enableRotate = false; //锁定相机
      /**点击位置笛卡尔坐标 */
      const cartesian = this.viewer.camera.pickEllipsoid(
        click.position,
        this.viewer.scene.globe.ellipsoid
      );
      /**笛卡尔转弧度坐标 */
      const cartographic = Cesium.Cartographic.fromCartesian(
        cartesian,
        this.viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      );
      /**点击位置经度 */
      const lng1 = Cesium.Math.toDegrees(cartographic.longitude);
      /**点击位置维度 */
      const lat1 = Cesium.Math.toDegrees(cartographic.latitude);
      /**边框坐标 */
      westSouthEastNorth = [lng1, lat1];
      id = new Date().getTime();
      if (westSouthEastNorth) {
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      }
      /**面实例对象 */
      this.viewer.entities.add({
        name: 'rectangle',
        id: id,
        polygon: {
          hierarchy: new Cesium.CallbackProperty(function () {
            return {
              positions: Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth)
            };
          }, false),
          height: 0,
          // 填充的颜色，withAlpha透明度
          material: this.config.material,
          // 是否被提供的材质填充
          fill: true,
          // 是否显示
          show: true
        }
        // polyline: {
        //   positions: new Cesium.CallbackProperty(function() {
        //     return Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth);
        //   }),
        //   material: this.config.borderColor,
        //   width: this.config.borderWidth,
        //   zIndex: 1
        // }
      });
      this.handler.setInputAction((move: { endPosition: any }) => {
        const cartesian = this.viewer.camera.pickEllipsoid(
          move.endPosition,
          this.viewer.scene.globe.ellipsoid
        );
        const cartographic = Cesium.Cartographic.fromCartesian(
          cartesian,
          this.viewer.scene.globe.ellipsoid,
          new Cesium.Cartographic()
        );
        const lng = Cesium.Math.toDegrees(cartographic.longitude);
        const lat = Cesium.Math.toDegrees(cartographic.latitude);

        westSouthEastNorth = [lng1, lat1, lng1, lat, lng, lat, lng, lat1, lng1, lat1];
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    this.handler.setInputAction(() => {
      this.stopDraw();
      // 添加操作完成后恢复鼠标样式为默认箭头
      document.body.style.cursor = 'default';
      this.infoDetail.rectangle.push({ id: id, position: westSouthEastNorth });
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }
  /*******
   * @function: function
   * @description: 绘制圆形区域
   * @return {*}
   */
  drawCircle() {
    this.stopDraw();
    // 设置鼠标样式为crosshair
    document.body.style.cursor = 'crosshair';
    /**实体的唯一标注 */
    let id: any = null;

    /**圆半径 */
    let radius: number = 0;
    /**圆心 */
    let lngLat: any = [];
    /**鼠标事件 */
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    this.handler.setInputAction((click: { position: any }) => {
      id = new Date().getTime();
      const cartesian = this.viewer.camera.pickEllipsoid(
        click.position,
        this.viewer.scene.globe.ellipsoid
      );
      const cartographic = Cesium.Cartographic.fromCartesian(
        cartesian,
        this.viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      );
      const lng = Cesium.Math.toDegrees(cartographic.longitude);
      const lat = Cesium.Math.toDegrees(cartographic.latitude);
      lngLat = [lng, lat];
      const entity = this.viewer.entities.add({
        position: new Cesium.CallbackProperty(function () {
          return Cesium.Cartesian3.fromDegrees(lng, lat);
        }, false),
        name: 'circle',
        id: id,
        ellipse: {
          height: 0,
          outline: true,
          material: this.config.material,
          outlineColor: this.config.borderColor,
          outlineWidth: this.config.borderWidth
        }
      });
      entity.ellipse.semiMajorAxis = new Cesium.CallbackProperty(function () {
        return radius;
      }, false);
      entity.ellipse.semiMinorAxis = new Cesium.CallbackProperty(function () {
        return radius;
      }, false);

      if (lngLat) {
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      }
      this.handler.setInputAction((move: { endPosition: any }) => {
        const cartesian2 = this.viewer.camera.pickEllipsoid(
          move.endPosition,
          this.viewer.scene.globe.ellipsoid
        );
        radius = Cesium.Cartesian3.distance(cartesian, cartesian2);
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    this.handler.setInputAction(() => {
      this.infoDetail.circle.push({ id: id, center: lngLat, radius: radius });
      this.stopDraw();
      // 添加操作完成后恢复鼠标样式为默认箭头
      document.body.style.cursor = 'default';
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }
  /*******
   * @function: function
   * @description: 自定义区域绘制
   */
  drawPolygon() {
    this.stopDraw();
    // 设置鼠标样式为crosshair
    document.body.style.cursor = 'crosshair';
    /**实体的唯一标注 */
    const id = new Date().getTime();
    /**记录拐点坐标 */
    const positions: any = [];
    /**记录返回结果 */
    const codeInfo: any = [];
    /**面的hierarchy属性 */
    const polygon = new Cesium.PolygonHierarchy();
    const _polygonEntity: any = new Cesium.Entity();
    /**面对象配置 */
    let polyObj = null;
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    // left
    this.handler.setInputAction((movement: { position: any }) => {
      const cartesian = this.viewer.camera.pickEllipsoid(
        movement.position,
        this.viewer.scene.globe.ellipsoid
      );
      const cartographic = Cesium.Cartographic.fromCartesian(
        cartesian,
        this.viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      );
      const lng = Cesium.Math.toDegrees(cartographic.longitude);
      const lat = Cesium.Math.toDegrees(cartographic.latitude);

      if (cartesian && cartesian.x) {
        if (positions.length == 0) {
          positions.push(cartesian.clone());
        }
        codeInfo.push([lng, lat]);
        positions.push(cartesian.clone());
        polygon.positions.push(cartesian.clone());
        if (!polyObj) {
          // _polygonEntity.polyline = {
          //   width: this.config.borderWidth,
          //   material: this.config.borderColor,
          //   clampToGround: false
          // };
          // _polygonEntity.polyline.positions = new Cesium.CallbackProperty(
          //   function() {
          //     return positions;
          //   },
          //   false
          // );

          _polygonEntity.polygon = {
            hierarchy: new Cesium.CallbackProperty(function () {
              return polygon;
            }, false),
            zIndex: 100,
            height: 0.1,
            material: Cesium.Color.BLUE.withAlpha(0.8),
            clampToGround: false
          };
          _polygonEntity.name = 'polygon';

          _polygonEntity._id = id;
          polyObj = this.viewer.entities.add(_polygonEntity);
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // mouse
    this.handler.setInputAction((movement: { endPosition: any }) => {
      const cartesian = this.viewer.camera.pickEllipsoid(
        movement.endPosition,
        this.viewer.scene.globe.ellipsoid
      );
      const cartographic = Cesium.Cartographic.fromCartesian(
        cartesian,
        this.viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      );
      const lng = Cesium.Math.toDegrees(cartographic.longitude);
      const lat = Cesium.Math.toDegrees(cartographic.latitude);

      if (positions.length >= 0) {
        if (cartesian && cartesian.x) {
          positions.pop();
          positions.push(cartesian);
          polygon.positions.pop();
          polygon.positions.push(cartesian);
          codeInfo.pop();
          codeInfo.push([lng, lat]);
        }
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    // right
    this.handler.setInputAction((movement: any) => {
      this.stopDraw();
      // 添加操作完成后恢复鼠标样式为默认箭头
      document.body.style.cursor = 'default';
      this.infoDetail.planeSelf.push({ id: id, positions: codeInfo });
      positions.push(positions[0]);
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }

  /*******
   * @function: function
   * @return {*}
   * @description: 绘制线段
   */
  drawLine() {
    this.stopDraw();
    // 设置鼠标样式为crosshair
    document.body.style.cursor = 'crosshair';
    /**实体的唯一标注 */
    const id = new Date().getTime();
    /**记录拐点坐标 */
    const positions: any = [],
      /**记录返回结果 */
      codeInfo: any = [],
      /**面的hierarchy属性 */
      polygon = new Cesium.PolygonHierarchy(),
      _polygonEntity: any = new Cesium.Entity();
    /**面对象配置 */
    let polyObj = null;
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    // left
    this.handler.setInputAction((movement: { position: any }) => {
      const cartesian = this.viewer.camera.pickEllipsoid(
        movement.position,
        this.viewer.scene.globe.ellipsoid
      );
      const cartographic = Cesium.Cartographic.fromCartesian(
        cartesian,
        this.viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      );
      const lng = Cesium.Math.toDegrees(cartographic.longitude);
      const lat = Cesium.Math.toDegrees(cartographic.latitude);

      if (cartesian && cartesian.x) {
        if (positions.length == 0) {
          positions.push(cartesian.clone());
        }
        codeInfo.push([lng, lat]);
        positions.push(cartesian.clone());
        polygon.positions.push(cartesian.clone());
        if (!polyObj) {
          _polygonEntity.polyline = {
            width: 4,
            material: Cesium.Color.BLUE.withAlpha(0.8),
            clampToGround: true
          };
          _polygonEntity.polyline.positions = new Cesium.CallbackProperty(function () {
            return positions;
          }, false);
          _polygonEntity.name = 'line';
          _polygonEntity._id = id;

          polyObj = this.viewer.entities.add(_polygonEntity);
          // this.entityEdit = new CesiumEntityEdit(this.viewer, polyObj);
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // mouse
    this.handler.setInputAction((movement: { endPosition: any }) => {
      const cartesian = this.viewer.camera.pickEllipsoid(
        movement.endPosition,
        this.viewer.scene.globe.ellipsoid
      );
      const cartographic = Cesium.Cartographic.fromCartesian(
        cartesian,
        this.viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      );
      const lng = Cesium.Math.toDegrees(cartographic.longitude);
      const lat = Cesium.Math.toDegrees(cartographic.latitude);

      if (positions.length >= 0) {
        if (cartesian && cartesian.x) {
          positions.pop();
          positions.push(cartesian);
          codeInfo.pop();
          codeInfo.push([lng, lat]);
        }
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    // right
    this.handler.setInputAction((movement: any) => {
      this.infoDetail.line.push({ id: id, positions: codeInfo });
      this.stopDraw();
      // 添加操作完成后恢复鼠标样式为默认箭头
      document.body.style.cursor = 'default';
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }
  /*******
   * @function: function
   * @description: 移除实体对象
   * @return {*}
   */
  removeEntity() {
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    this.handler.setInputAction((move: { endPosition: any }) => {
      /**实体对象信息  {id：entities，primitive：。。} */
      const pick = this.viewer.scene.pick(move.endPosition);
      this.entityEdit.removeStretchPoint();

      if (pick && pick.id && pick.id.id) {
        document.body.style.cursor = 'pointer';
        this.handler.setInputAction((click: any) => {
          let newPoint: any;
          switch (pick.id.name) {
            case 'point':
              /**删除某一条数据 */
              newPoint = this.infoDetail.point.filter(
                (item: { id: any }) => item.id != pick.id._id
              );
              this.infoDetail.point = newPoint;
              break;
            case 'line':
              /**删除某一条数据 */
              newPoint = this.infoDetail.line.filter((item: { id: any }) => item.id != pick.id._id);
              this.infoDetail.line = newPoint;
              break;
            case 'rectangle':
              /**删除某一条数据 */
              newPoint = this.infoDetail.rectangle.filter(
                (item: { id: any }) => item.id != pick.id._id
              );
              this.infoDetail.rectangle = newPoint;
              break;

            case 'planeSelf':
              /**删除某一条数据 */
              newPoint = this.infoDetail.planeSelf.filter(
                (item: { id: any }) => item.id != pick.id._id
              );
              this.infoDetail.planeSelf = newPoint;
              break;
            case 'circle':
              /**删除某一条数据 */
              newPoint = this.infoDetail.circle.filter(
                (item: { id: any }) => item.id != pick.id._id
              );
              this.infoDetail.circle = newPoint;
              break;
            default:
              break;
          }
          this.viewer.entities.remove(pick.id);
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      } else {
        document.body.style.cursor = 'default';
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  }
  /**
   *
   */
  removeAllEntity() {
    this.entityEdit.removeStretchPoint();
    Object.keys(this.infoDetail).map((name) => {
      this.infoDetail[name].map((item: { id: any }) => {
        this.viewer.entities.removeById(item.id);
      });
    });
  }
  /*******
   * @function: function
   * @return {*}
   * @description: 返回绘制数据
   */
  backInfoDetail() {
    return this.infoDetail;
  }
  stopDraw() {
    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);
    // this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);
    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    // this.handler && this.handler.destroy();
    // this.entityEdit.stop();
  }
  stopEdit() {
    this.entityEdit.stop();
  }
  getMousePostion(position: any) {
    if (!position) return;
    /**点击位置笛卡尔坐标 */
    const cartesian = this.viewer.camera.pickEllipsoid(position, this.viewer.scene.globe.ellipsoid);
    /**笛卡尔转弧度坐标 */
    const cartographic = Cesium.Cartographic.fromCartesian(
      cartesian,
      this.viewer.scene.globe.ellipsoid,
      new Cesium.Cartographic()
    );
    /**点击位置经度 */
    const lng1 = Cesium.Math.toDegrees(cartographic.longitude);
    /**点击位置维度 */
    const lat1 = Cesium.Math.toDegrees(cartographic.latitude);
    return [lng1, lat1];
  }
  getCatesian3FromPX(px: any) {
    const ray = this.viewer.camera.getPickRay(px);
    if (!ray) return null;
    const cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
    return cartesian;
  }
}
export default CesiumEntityDraw;

CesiumEntityEdit .ts文件

/**
 * cesium 实体编辑：拖拽、旋转、修改
 */
import * as turf from '@turf/turf';
import Cesium from 'cesium';
class CesiumEntityEdit {
  private viewer: any;
  private options: any;
  private selectedEntity: any; // 被选择的实体对象
  private handler: any; // 事件捕获
  private mouseStatus: any; // 当前鼠标状态 LEFT_DOWN：左键按下;LEFT_UP: 左键抬起；MOVE: 鼠标移动
  private coordinates: any; // 当前被选中的实体组成的点集合
  private entityType: any; // 当前被选中实体的类型
  private entityCenter: any; // 多边形中心点
  private strecthPointIds: any; // 拉伸点Id集合
  private strecthObj: any; // 被选中的拉伸点
  private isStrecth: any; // 当前是否点击拉伸点
  private strecthObjId_index: any;
  constructor(viewer: any, options: {} | null) {
    this.viewer = viewer;
    this.options = options || {};
    this.selectedEntity = null; // 被选择的实体对象
    this.handler = null; // 事件捕获
    this.mouseStatus = null; // 当前鼠标状态 LEFT_DOWN：左键按下;LEFT_UP: 左键抬起；MOVE: 鼠标移动
    this.coordinates = []; // 当前被选中的实体组成的点集合
    this.entityType = 'polygon'; // 当前被选中实体的类型
    this.entityCenter = []; // 多边形中心点
    this.strecthPointIds = []; // 拉伸点Id集合
    this.strecthObj = null; // 被选中的拉伸点
    this.isStrecth = false; // 当前是否点击拉伸点
  }
  start() {
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    // 监听鼠标左键按下事件
    this.handler.setInputAction(
      (e: any) => this.handleLeftDown(e),
      Cesium.ScreenSpaceEventType.LEFT_DOWN
    );
    // 监听鼠标左键抬起事件
    this.handler.setInputAction(
      (e: any) => this.handleLeftUp(e),
      Cesium.ScreenSpaceEventType.LEFT_UP
    );
    // 监听鼠标移动事件
    this.handler.setInputAction(
      (e: any) => this.handleMouseMove(e),
      Cesium.ScreenSpaceEventType.MOUSE_MOVE
    );
  }
  handleLeftDown(e: { position: any }) {
    // 更新鼠标状态
    this.mouseStatus = 'LEFT_DOWN';
    // 获取当前点击位置的实体对象
    const obj = this.viewer.scene.pick(e.position);
    if (!obj) {
      this.strecthObj = null;
      this.selectedEntity = null;
      this.viewer.scene.screenSpaceCameraController.enableRotate = true;
      this.removeStretchPoint();
      return;
    }
    if (obj && obj.id.name === 'stretch_point') {
      const index = this.strecthPointIds.findIndex((p: any) => p === obj.id.id);
      this.strecthObjId_index = index;
      this.strecthObj = obj;
      this.isStrecth = true;
    } else {
      this.removeStretchPoint();
      this.strecthObj = null;
      this.selectedEntity = obj;
    }

    //锁定相机
    this.viewer.scene.screenSpaceCameraController.enableRotate = false;
    if (obj.id.polygon) {
      this.entityType = 'polygon';
      this.coordinates = this.selectedEntity.id.polygon.hierarchy.getValue().positions;
      this.entityCenter = this.getEntityCenter();
      this.addStrecthPoint(this.selectedEntity.id.polygon);
    }
    if (obj.id.rectangle) {
      this.entityType = 'rectangle';
      this.coordinates = this.selectedEntity.id.rectangle.coordinates.getValue();
      this.addStrecthPoint(this.selectedEntity.id.rectangle);
    }
    if (obj.id.point) {
      this.entityType = 'point';
    }
    if (obj.id.polyline) {
      this.entityType = 'polyline';

      this.coordinates = this.selectedEntity.id.polyline.positions.getValue();
      // this.entityCenter = this.getEntityCenter()
      this.addStrecthPoint(this.selectedEntity.id.polyline);
    }
  }
  handleLeftUp(e: any) {
    // 更新鼠标状态
    this.mouseStatus = 'LEFT_UP';
  }
  handleMouseMove(e: any) {
    if (this.mouseStatus === 'LEFT_DOWN' && this.selectedEntity) {
      // 拖拽实体
      if (this.strecthObj) {
        this.handleDrag(e, this.strecthObj);
        this.handleStretch(this.selectedEntity);
        return;
      }
      this.removeStretchPoint();
      this.handleDrag(e, this.selectedEntity);
    }
  }
  /**
   * 拖拽移动实体
   * @param {*} e
   */
  handleDrag(
    e: { startPosition: any; endPosition: any },
    selectedEntity: {
      id: {
        position: Cesium.CallbackProperty;
        polygon: { hierarchy: Cesium.CallbackProperty };
        rectangle: { coordinates: Cesium.CallbackProperty };
        polyline: { positions: Cesium.CallbackProperty };
      };
    }
  ) {
    if (!selectedEntity) return;
    const coordinates = this.coordinates;
    // 获取开始位置坐标
    const startPosition = this.viewer.scene.camera.pickEllipsoid(
      e.startPosition,
      this.viewer.scene.globe.ellipsoid
    );
    // 获取结束位置坐标
    const endPosition = this.viewer.scene.camera.pickEllipsoid(
      e.endPosition,
      this.viewer.scene.globe.ellipsoid
    );
    selectedEntity.id.position = new Cesium.CallbackProperty(function () {
      return endPosition;
    }, false);
    const changed_x = endPosition.x - startPosition.x;
    const changed_y = endPosition.y - startPosition.y;
    const changed_z = endPosition.z - startPosition.z;
    if (this.entityType === 'point') {
      const ray = this.viewer.camera.getPickRay(e.endPosition);
      const cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
      selectedEntity.id.position = new Cesium.CallbackProperty(() => {
        return cartesian;
      }, false);
    }
    if (this.entityType === 'polygon' || this.entityType === 'polyline') {
      const currentsPoint: any = [];
      for (let i = 0; i < coordinates.length; i++) {
        coordinates[i].x = coordinates[i].x + changed_x;
        coordinates[i].y = coordinates[i].y + changed_y;
        coordinates[i].z = coordinates[i].z + changed_z;
        currentsPoint.push(coordinates[i]);
      }
      if (this.entityType === 'polygon') {
        selectedEntity.id.polygon.hierarchy = new Cesium.CallbackProperty(() => {
          return { positions: currentsPoint };
        }, false); // 防止闪烁
      } else {
        selectedEntity.id.polyline.positions = new Cesium.CallbackProperty(() => {
          return currentsPoint;
        }, false); // 防止闪烁
      }
    }
    if (this.entityType === 'rectangle') {
      const position_start = startPosition;
      const cartographic_start = Cesium.Cartographic.fromCartesian(position_start);
      const longitude_start = Cesium.Math.toDegrees(cartographic_start.longitude);
      const latitude_start = Cesium.Math.toDegrees(cartographic_start.latitude);

      const position_end = endPosition;
      const cartographic_end = Cesium.Cartographic.fromCartesian(position_end);
      const longitude_end = Cesium.Math.toDegrees(cartographic_end.longitude);
      const latitude_end = Cesium.Math.toDegrees(cartographic_end.latitude);

      const changer_lng = longitude_end - longitude_start;
      const changer_lat = latitude_end - latitude_start;
      coordinates.west = Cesium.Math.toRadians(
        Cesium.Math.toDegrees(coordinates.west) + changer_lng
      );
      coordinates.east = Cesium.Math.toRadians(
        Cesium.Math.toDegrees(coordinates.east) + changer_lng
      );
      coordinates.south = Cesium.Math.toRadians(
        Cesium.Math.toDegrees(coordinates.south) + changer_lat
      );
      coordinates.north = Cesium.Math.toRadians(
        Cesium.Math.toDegrees(coordinates.north) + changer_lat
      );
      selectedEntity.id.rectangle.coordinates = new Cesium.CallbackProperty(() => {
        return coordinates;
      }, false);
    }
  }
  /**
   * 旋转实体
   * @param {*} angle
   */
  handleRotation(angle: number) {
    if (!this.selectedEntity) return;
    // 旋转时清除辅助拉伸的点
    if (this.strecthPointIds.length) {
      this.removeStretchPoint();
    }
    if (this.entityType === 'rectangle') {
      // 旋转图形
      this.selectedEntity.id.rectangle.rotation = new Cesium.CallbackProperty(function () {
        return angle;
      }, false);
      // 旋转图形材质
      this.selectedEntity.id.rectangle.stRotation = new Cesium.CallbackProperty(function () {
        return angle;
      }, false);
    }
    if (this.entityType === 'polygon') {
      // let previousCoordinates = this.selectedEntity.id.polygon.hierarchy.getValue().positions
      // let coors = this.getWGS84FromDKR(previousCoordinates)
      // console.log(coors)
      // let poly = turf.polygon([coors])
      // let centroid = turf.centroid(poly)
      // let rotatedPoly = turf.transformRotate(poly, angle, { pivot: centroid.geometry.coordinates})
      // let newCoors = rotatedPoly.geometry.coordinates[0]
      // let positions = []
      // newCoors.forEach(item => {
      //  positions.push(item[0], item[1])
      // })
      this.selectedEntity.id.polygon.stRotation = new Cesium.CallbackProperty(function () {
        return Cesium.Math.toRadians(angle);
      }, false);
      // this.selectedEntity.id.polygon.hierarchy = new Cesium.CallbackProperty(function () {
      //  return { positions: Cesium.Cartesian3.fromDegreesArray(positions) }
      // }, false)
    }
  }
  /**
   * 拉伸实体
   */
  handleStretch(selectedEntity: {
    id: {
      polygon: { hierarchy: Cesium.CallbackProperty };
      rectangle: { coordinates: Cesium.CallbackProperty };
      polyline: { positions: Cesium.CallbackProperty };
    };
  }) {
    const positions: any = [];
    // 更新polygon的位置数组
    if (selectedEntity.id.polygon) {
      for (let i = 0; i < this.strecthPointIds.length; i++) {
        const id = this.strecthPointIds[i];
        positions.push(this.viewer.entities.getById(id).position.getValue());
      }
      selectedEntity.id.polygon.hierarchy = new Cesium.CallbackProperty(() => {
        return { positions: positions };
      }, false);
    }
    // 更新polyline的位置数组
    if (selectedEntity.id.polyline) {
      for (let i = 0; i < this.strecthPointIds.length; i++) {
        const id = this.strecthPointIds[i];
        positions.push(this.viewer.entities.getById(id).position.getValue());
      }
      selectedEntity.id.polyline.positions = new Cesium.CallbackProperty(() => {
        return positions;
      }, false);
    }
    // 更新rectangle的位置数组
    if (selectedEntity.id.rectangle) {
      const index = this.strecthPointIds.findIndex((item: any) => item === this.strecthObj.id.id);
      for (let i = 0; i < this.strecthPointIds.length; i++) {
        const id = this.strecthPointIds[i];
        // 矩形由两个对角的点组成的区域，因此先判断用户点击的是哪一个点，即奇偶判断
        if (index % 2 === 0) {
          if (i % 2 === 0) {
            positions.push(this.viewer.entities.getById(id).position.getValue());
          } else {
            // 将另外一半点隐藏
            this.viewer.entities.getById(id).show = false;
          }
        } else {
          if (i % 2 != 0) {
            positions.push(this.viewer.entities.getById(id).position.getValue());
          } else {
            this.viewer.entities.getById(id).show = false;
          }
        }
      }
      selectedEntity.id.rectangle.coordinates = new Cesium.CallbackProperty(() => {
        const obj = Cesium.Rectangle.fromCartesianArray(positions);
        return obj;
      }, false);
    }
  }
  /**
   * 添加拉伸点
   * @param {*} entity
   */
  addStrecthPoint(entity: {
    hierarchy: { getValue: () => { (): any; new (): any; positions: never[] } };
    coordinates: { getValue: () => any };
    positions: { getValue: () => any };
  }) {
    let points = [];
    if (this.entityType === 'polygon') {
      points = entity.hierarchy.getValue().positions;
    } else if (this.entityType === 'rectangle') {
      const rectangle = entity.coordinates.getValue();
      Cesium.Rectangle.subsample(rectangle, Cesium.Ellipsoid.WGS84, rectangle.height, points);
    } else if (this.entityType === 'polyline') {
      points = entity.positions.getValue();
    }
    // const id = new Date().getTime();
    for (const position of points) {
      const point = this.viewer.entities.add({
        name: 'stretch_point',
        position: position,
        // id:new Date().getTime()
        point: {
          color: Cesium.Color.WHITE,
          pixelSize: 10,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 1
        }
      });
      this.strecthPointIds.push(point.id);
    }
  }
  /**
   * 清除拉伸点
   */
  removeStretchPoint() {
    for (const id of this.strecthPointIds) {
      this.viewer.entities.removeById(id);
    }
    this.strecthPointIds = [];
    this.strecthObj = null;
    this.isStrecth = false;
  }
  /**
   * 获取多边形图形中心点
   */
  getEntityCenter() {
    const previousCoordinates = this.selectedEntity.id.polygon.hierarchy.getValue().positions;
    const coors = this.getWGS84FromDKR(previousCoordinates);
    coors.push(coors[0]);
    const poly = turf.polygon([coors]);
    const centroid = turf.centroid(poly);

    return centroid.geometry.coordinates;
  }
  /**
   * 将笛卡尔坐标转换成国际坐标
   * @param {*} coors
   * @returns
   */
  getWGS84FromDKR(coors: string | any[]) {
    const newCoors: any = [];
    for (let i = 0; i < coors.length; i++) {
      const coor = coors[i];
      const cartographic = Cesium.Cartographic.fromCartesian(coor);
      const x = Cesium.Math.toDegrees(cartographic.longitude);
      const y = Cesium.Math.toDegrees(cartographic.latitude);
      newCoors.push([x, y]);
    }

    return newCoors;
  }
  stop() {
    this.handler && this.handler.destroy();
    this.removeStretchPoint();
    this.viewer.scene.screenSpaceCameraController.enableRotate = true;
  }
}

export default CesiumEntityEdit;