leiting-bim 2.1.36 → 2.1.39

package/plugins/cesium-core/src/components/gltf/GLTFManage.ts

@@ -0,0 +1,799 @@
+import { isArray } from 'lodash-es';
+
+export enum EditMode {
+  Rotate = 'rotate',
+  Move = 'move',
+  Scale = 'scale',
+  MoveHeight = 'moveHeight',
+  Empty = '',
+}
+
+export enum GLTFManageEventKey {
+  Scale = 'addScale',
+  Rotate = 'rotate',
+  Translation = 'translation',
+  Remove = 'removeById',
+  Add = 'add',
+}
+export class GLTFManage {
+  primitives = new Map<string, any>();
+  eventListener = new Map<string, Array<Object>>();
+  Cesium: any;
+  viewer: any;
+  handler: any;
+  rotationRing: any;
+  translationSquare: any;
+  heightArrow: any;
+  editMode: EditMode = EditMode.Empty; // 默认是移动模式
+  dragEndCallbackMap = new Map<string, any>();
+
+  constructor(options: { Cesium: any; viewer: any }) {
+    this.Cesium = options.Cesium;
+    this.viewer = options.viewer;
+    this.handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+  }
+
+  /**
+   * @description: 初始化模型
+   * @param {Array<any>} models 模型数据列表
+   * @return {*}
+   */
+  init(models: Array<any>, show = false) {
+    const viewer = this.viewer;
+    // 移除现有的所有模型
+    this.primitives.forEach((gltf) => {
+      viewer.scene.primitives.remove(gltf);
+    });
+
+    // 遍历传入的模型数据并添加到场景中
+    models.forEach((model: any) => {
+      if (!this.primitives.has(model.id)) {
+        this.add(model, show); // 调用 add 方法添加模型
+      }
+    });
+  }
+  get(id: string) {
+    return this.primitives.get(id);
+  }
+
+  /**
+   * @description: 添加模型
+   * @param {*} info 模型信息
+   * @return {*}
+   */
+  add(info: any, show = true) {
+    const viewer = this.viewer;
+    const Cesium = this.Cesium;
+    // 转换 Heading, Pitch, Roll 为弧度
+    const newHeading = Cesium.Math.toRadians(info.headingPitchRoll?.heading || 0);
+    const newPitch = Cesium.Math.toRadians(info.headingPitchRoll?.pitch || 0);
+    const newRoll = Cesium.Math.toRadians(info.headingPitchRoll?.roll || 0);
+    const headingPitchRoll = new Cesium.HeadingPitchRoll(newHeading, newPitch, newRoll);
+
+    // 计算模型的模型矩阵
+    const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
+      info.position,
+      headingPitchRoll,
+      viewer.scene.globe.ellipsoid,
+      Cesium.Transforms.eastNorthUpToFixedFrame,
+      new Cesium.Matrix4(),
+    );
+
+    // 创建模型并添加到场景
+    let gltf = viewer.scene.primitives.add(
+      Cesium.Model.fromGltf({
+        id: info.id,
+        ...info.model, // 模型的地址
+        modelMatrix,
+      }),
+    );
+    gltf.scale = info.scale || 1; // 设置缩放
+    this.primitives.set(info.id, gltf); // 存储在 primitives 中
+    gltf.show = show;
+    // 触发 add 事件监听
+    this.runEventListener(GLTFManageEventKey.Add, { info: info, gltf: gltf });
+  }
+
+  flyTo(id: string) {
+    const viewer = this.viewer;
+    const Cesium = this.Cesium;
+    let model = this.primitives.get(id);
+    const boundingSphere = model.boundingSphere;
+
+    // 如果模型有模型矩阵，转换到世界坐标
+    const center = Cesium.Matrix4.multiplyByPoint(
+      model.modelMatrix,
+      boundingSphere.center,
+      new Cesium.Cartesian3(),
+    );
+
+    // 创建世界坐标下的包围球
+    const worldBoundingSphere = new Cesium.BoundingSphere(center, boundingSphere.radius);
+
+    // 摄像机飞到模型位置
+    viewer.camera.flyToBoundingSphere(worldBoundingSphere, {
+      duration: 1.5, // 飞行时间
+      offset: new Cesium.HeadingPitchRange(0, -0.5, boundingSphere.radius * 2.0), // 调整视角
+    });
+  }
+
+  /**
+   * @description: 根据模型的 ID 移除模型
+   * @param {string} id 模型的 ID
+   * @return {*}
+   */
+  removeById(id: string) {
+    const viewer = this.viewer;
+    let g = this.primitives.get(id); // 获取对应 ID 的模型
+
+    if (!g) {
+      console.error(`No model found with id: ${id}`);
+      return;
+    }
+
+    // 从场景中移除模型
+    viewer.scene.primitives.remove(g);
+    this.primitives.delete(id); // 从 primitives 中删除模型
+    if (!this.rotationRing?._instanceIds.includes(`rotationRing_${id}`) || !this.rotationRing) {
+      this.removeTool();
+    }
+    // 触发 removeById 事件监听
+    this.runEventListener(GLTFManageEventKey.Remove, { id: id, gltf: g });
+  }
+
+  // 显示模型
+  show(id: string) {
+    let g = this.primitives.get(id); // 获取对应 ID 的模型
+    if (g) g.show = true;
+  }
+  // 隐藏模型
+  hide(id: string) {
+    let g = this.primitives.get(id); // 获取对应 ID 的模型
+    if (g) g.show = false;
+  }
+
+  /**
+   * @description: 修改模型的缩放因子
+   * @param {*} info 模型信息
+   * @param {number} num 缩放因子
+   * @return {*}
+   */
+  addScale(info: any, num = 0.1) {
+    let curModel = this.primitives.get(info.id); // 获取对应 ID 的模型
+
+    if (curModel) {
+      curModel.scale = curModel.scale + num; // 增加或减少模型的缩放因子
+      this.updatedTool(curModel.modelMatrix);
+      this.runEventListener(GLTFManageEventKey.Scale, { id: info.id, scale: curModel.scale }); // 触发 addScale 事件监听
+    }
+  }
+  /**
+   * @description: 修改模型的缩放因子
+   * @param {*} info 模型信息
+   * @param {number} num 缩放因子
+   * @return {*}
+   */
+  setScale(id: any, scale = 0.1) {
+    let curModel = this.primitives.get(id); // 获取对应 ID 的模型
+    if (curModel) {
+      curModel.scale = scale; // 增加或减少模型的缩放因子
+      this.updatedTool(curModel.modelMatrix);
+      this.runEventListener(GLTFManageEventKey.Scale, { id: id, scale: curModel.scale }); // 触发 addScale 事件监听
+    }
+  }
+
+  setEditMode(mode: EditMode) {
+    this.editMode = mode;
+  }
+  // 公共锁定/解锁视角函数
+  lockCamera() {
+    const cameraController = this.viewer.scene.screenSpaceCameraController;
+    cameraController.enableRotate = false;
+    cameraController.enableTranslate = false;
+    cameraController.enableZoom = false;
+  }
+
+  unlockCamera() {
+    const cameraController = this.viewer.scene.screenSpaceCameraController;
+    cameraController.enableRotate = true;
+    cameraController.enableTranslate = true;
+    cameraController.enableZoom = true;
+  }
+
+  // 公共函数：将世界坐标转换为经纬度（忽略高度）
+  toCartographic(cartesian: any) {
+    const cartographic = this.Cesium.Cartographic.fromCartesian(cartesian);
+    return { longitude: cartographic.longitude, latitude: cartographic.latitude };
+  }
+
+  // 公共函数：计算两点之间的方向角
+  calculateHeading(from: any, to: any): number {
+    const deltaLongitude = to.longitude - from.longitude;
+    const deltaLatitude = to.latitude - from.latitude;
+    return Math.atan2(deltaLatitude, deltaLongitude);
+  }
+
+  /**
+   * @description: 获取模型的 Heading, Pitch, Roll
+   * @param {any} modelMatrix 模型的变换矩阵
+   * @return {*}
+   */
+  getModelHeadingPitchRoll(modelMatrix: any) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+
+    const m1 = Cesium.Transforms.eastNorthUpToFixedFrame(
+      Cesium.Matrix4.getTranslation(modelMatrix, new Cesium.Cartesian3()),
+      viewer.scene.globe.ellipsoid,
+      new Cesium.Matrix4(),
+    );
+
+    const m2 = Cesium.Matrix4.multiply(
+      Cesium.Matrix4.inverse(m1, new Cesium.Matrix4()),
+      modelMatrix,
+      new Cesium.Matrix4(),
+    );
+
+    const mat3 = Cesium.Matrix4.getRotation(m2, new Cesium.Matrix3());
+    const q = Cesium.Quaternion.fromRotationMatrix(mat3);
+    return Cesium.HeadingPitchRoll.fromQuaternion(q); // 返回 HeadingPitchRoll
+  }
+
+  /**
+   * @description: 添加事件监听
+   * @param {string} key
+   * @param {Function} f
+   * @param {any} options
+   * @return {*}
+   */
+  addEventListener(key: string, f: Function, options?: any): { f: Function; options: any } {
+    let instantiation = { f: f, options: options };
+    if (this.eventListener.get(key)) {
+      (this.eventListener.get(key) || []).push(instantiation);
+    } else {
+      this.eventListener.set(key, [instantiation]);
+    }
+    return instantiation;
+  }
+
+  /**
+   * @description: 移除事件监听
+   * @param {string} key
+   * @param {any} instantiation
+   * @return {*}
+   */
+  removeEventListener(key: string, instantiation: any) {
+    let list = this.eventListener.get(key);
+    if (!list) return console.error('key不存在');
+    let index = list.findIndex((n) => n == instantiation);
+    if (index >= 0) {
+      list.splice(index, 1);
+    } else {
+      console.error('instantiation不存在');
+    }
+  }
+
+  /**
+   * @description: 执行监听
+   * @param {*} key
+   * @param {any} parameter
+   * @return {*}
+   */
+  runEventListener(key: string, parameter: any): boolean {
+    let list = this.eventListener.get(key);
+    if (!list) return false;
+    list.forEach((item: any) => {
+      if (typeof item.f === 'function') {
+        item.f(parameter);
+      }
+    });
+    return true; // 返回事件是否成功执行
+  }
+
+  // ... (Add, remove, scale functions here remain the same)
+
+  /**
+   * @description: 初始化拖拽模型编辑功能（平移）
+   * @return {*}
+   */
+  initEditBox(getEditState: Function) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+    const scene = viewer.scene;
+
+    let draggedModel: any = null;
+    let startModelMatrix: any = null;
+    let startModelCartographic: any = null;
+    let startMouseCartographic: any = null;
+    let startMousePosition: any = null;
+
+    // 清除拖拽状态
+    const clearStatus = () => {
+      draggedModel = null;
+      startModelMatrix = null;
+      startModelCartographic = null;
+      startMousePosition = null;
+      startMouseCartographic = null;
+      this.setEditMode(EditMode.Empty);
+      this.unlockCamera();
+    };
+
+    //初始化拖拽状态
+    const initDragged = (modelId: any, movement: any) => {
+      draggedModel = this.primitives.get(modelId);
+      if (draggedModel) {
+        startModelMatrix = Cesium.Matrix4.clone(draggedModel.modelMatrix);
+        const modelPosition = Cesium.Matrix4.getTranslation(
+          startModelMatrix,
+          new Cesium.Cartesian3(),
+        );
+        startModelCartographic = this.toCartographic(modelPosition);
+        startMousePosition = movement.position;
+        const rayHit: any = scene.globe.pick(viewer.camera.getPickRay(movement.position), scene);
+        startMouseCartographic = this.toCartographic(rayHit);
+
+        this.lockCamera();
+      }
+    };
+
+    // 点击事件处理，获取被点击的模型对象
+    this.handler.setInputAction((movement: any) => {
+      let isEdit = getEditState();
+      if (!isEdit) return;
+      const hit: any = scene.pick(movement.position);
+      if (hit && hit.id && hit.id?.includes('rotationRing')) {
+        let modelId = hit.id.split('rotationRing_')[1];
+        this.setEditMode(EditMode.Rotate);
+        initDragged(modelId, movement);
+      } else if (hit && hit.id && hit.id?.includes('translationSquare_')) {
+        let modelId = hit.id.split('translationSquare_')[1];
+        this.setEditMode(EditMode.Move);
+        initDragged(modelId, movement);
+      } else if (hit && hit.id && hit.id?.includes('heightArrow-line_')) {
+        let modelId = hit.id.split('heightArrow-line_')[1];
+        this.setEditMode(EditMode.MoveHeight);
+        initDragged(modelId, movement);
+      } else if (hit && hit.id && hit.id?.includes('heightArrow-arrow_')) {
+        let modelId = hit.id.split('heightArrow-arrow_')[1];
+        this.setEditMode(EditMode.MoveHeight);
+        initDragged(modelId, movement);
+      } else if (hit && hit.id) {
+        draggedModel = this.primitives.get(hit.id);
+        if (!draggedModel) return;
+        // 创建旋转环
+        if (
+          !this.rotationRing ||
+          !this.rotationRing?._instanceIds?.includes(`rotationRing_${draggedModel.id}`)
+        ) {
+          this.createRotationRing(draggedModel);
+        }
+        //创建平移方块
+        if (
+          !this.translationSquare ||
+          !this.translationSquare?._instanceIds?.includes(`translationSquare_${draggedModel.id}`)
+        ) {
+          this.createTranslationSquare(draggedModel);
+        }
+        //创建平移方块
+        if (
+          !this.heightArrow ||
+          !this.heightArrow?._instanceIds?.includes(`heightArrow_${draggedModel.id}`)
+        ) {
+          this.createHeightArrow(draggedModel);
+        }
+      } else {
+        clearStatus();
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+
+    // 拖拽过程中更新模型位置或旋转
+    this.handler.setInputAction((movement: any) => {
+      let isEdit = getEditState();
+      if (!isEdit) return;
+      if (this.editMode != EditMode.Empty && draggedModel) {
+        const rayHit: any = scene.globe.pick(viewer.camera.getPickRay(movement.endPosition), scene);
+        const currentMouseCartographic = this.toCartographic(rayHit);
+        let angleDelta = 0;
+
+        // 更新模型的位置或者旋转
+        if (this.editMode === EditMode.Rotate) {
+          let currAngle = this.calculateHeading(startModelCartographic, currentMouseCartographic);
+          let startAngle = this.calculateHeading(startModelCartographic, startMouseCartographic);
+          angleDelta = startAngle - currAngle;
+          this.rotateModel(draggedModel, startModelMatrix, angleDelta);
+        } else if (this.editMode === EditMode.Move) {
+          this.moveModel(draggedModel, startModelMatrix, movement);
+        } else if (this.editMode === EditMode.MoveHeight) {
+          this.moveModelHeight(draggedModel, startModelMatrix, movement, startMousePosition);
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+    // 拖拽结束
+    this.handler.setInputAction(() => {
+      let isEdit = getEditState();
+      if (!isEdit) return;
+      let map = this.dragEndCallbackMap.get(draggedModel?.id);
+      if (map && (this.editMode === EditMode.Move || this.editMode === EditMode.MoveHeight)) {
+        let callbackInfo = map.get(GLTFManageEventKey.Translation);
+        if (callbackInfo) {
+          this.runEventListener(GLTFManageEventKey.Translation, callbackInfo);
+          map.delete(GLTFManageEventKey.Translation);
+        }
+      } else if (map && this.editMode === EditMode.Rotate) {
+        let callbackInfo = map.get(GLTFManageEventKey.Rotate);
+        if (callbackInfo) {
+          this.runEventListener(GLTFManageEventKey.Rotate, callbackInfo);
+          map.delete(GLTFManageEventKey.Rotate);
+        }
+      }
+      clearStatus();
+    }, Cesium.ScreenSpaceEventType.LEFT_UP);
+    this.handler.setInputAction(() => {
+      this.removeTool();
+    }, Cesium.ScreenSpaceEventType.RIGHT_UP);
+  }
+
+  // 创建圆环表示旋转区域
+  createRotationRing(model: any) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+    if (this.rotationRing) {
+      viewer.scene.primitives.remove(this.rotationRing); // 如果已存在，先移除
+    }
+    //创建圆
+    const position = [] as any;
+    for (let i = 0; i <= 360; i += 3) {
+      const sin = Math.sin(Cesium.Math.toRadians(i));
+      const cos = Math.cos(Cesium.Math.toRadians(i));
+      const x = model.boundingSphere.radius * cos;
+      const y = model.boundingSphere.radius * sin;
+      position.push(new Cesium.Cartesian3(x, y, 0));
+    }
+    const geometry = new Cesium.PolylineGeometry({
+      positions: position,
+      width: Math.max(model.boundingSphere.radius * 0.05, 1),
+    });
+    const instnce = new Cesium.GeometryInstance({
+      id: `rotationRing_${model.id}`,
+      geometry: geometry,
+      attributes: {
+        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED),
+      },
+    });
+    this.rotationRing = new Cesium.Primitive({
+      geometryInstances: instnce,
+      appearance: new Cesium.PolylineColorAppearance({
+        translucent: true,
+      }),
+      depthFailAppearance: new Cesium.PolylineMaterialAppearance({
+        material: Cesium.Material.fromType('Color', {
+          color: Cesium.Color.RED.withAlpha(0.3),
+        }),
+        translucent: true,
+      }),
+      modelMatrix: model.modelMatrix,
+      cull: false,
+    });
+    viewer.scene.primitives.add(this.rotationRing);
+  }
+
+  // 创建平移方块
+  createTranslationSquare(model: any) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+    if (this.translationSquare) {
+      viewer.scene.primitives.remove(this.translationSquare); // 如果已存在，先移除
+    }
+
+    // 创建正方形
+    const sideLength = Math.max(model.boundingSphere.radius * 0.2, 1); // 正方形的边长，根据模型的半径确定
+    const halfSide = sideLength / 2;
+    // 创建正方体的几何体
+    const boxGeometry = new Cesium.BoxGeometry({
+      maximum: new Cesium.Cartesian3(halfSide, halfSide, halfSide),
+      minimum: new Cesium.Cartesian3(-halfSide, -halfSide, -halfSide),
+    });
+
+    const instnce = new Cesium.GeometryInstance({
+      id: `translationSquare_${model.id}`,
+      geometry: boxGeometry,
+      attributes: {
+        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE),
+      },
+    });
+
+    this.translationSquare = new Cesium.Primitive({
+      geometryInstances: instnce,
+      appearance: new Cesium.PolylineColorAppearance({
+        translucent: true,
+      }),
+      depthFailAppearance: new Cesium.PolylineMaterialAppearance({
+        material: Cesium.Material.fromType('Color', {
+          color: Cesium.Color.BLUE.withAlpha(0.3),
+        }),
+        translucent: true,
+      }),
+      cull: false,
+      modelMatrix: model.modelMatrix,
+    });
+
+    viewer.scene.primitives.add(this.translationSquare);
+  }
+
+  // 创建高度调整箭头
+  createHeightArrow(model: any) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+
+    if (this.heightArrow) {
+      viewer.scene.primitives.remove(this.heightArrow); // 如果已存在，先移除
+    }
+    let color = Cesium.Color.GREEN;
+    let width = Math.max(model.boundingSphere.radius * 0.025, 1);
+    let headWidth = 2 * width;
+    let length = model.boundingSphere.radius + 50;
+    let headLength = length * 0.1;
+    const sideLength = Math.max(model.boundingSphere.radius * 0.2, 1);
+    let inverse = false;
+
+    //这里用的是圆锥几何对象，当topRadius和bottomRadius相同时，它就是一个圆柱
+    const line = Cesium.CylinderGeometry.createGeometry(
+      new Cesium.CylinderGeometry({
+        length: length,
+        topRadius: width,
+        bottomRadius: width,
+      }),
+    );
+    const arrow = Cesium.CylinderGeometry.createGeometry(
+      new Cesium.CylinderGeometry({
+        length: headLength,
+        topRadius: 0,
+        bottomRadius: headWidth,
+      }),
+    );
+    let arrowOffset = length + sideLength;
+    let lineOffset = (length + sideLength) / 2;
+    if (inverse) {
+      lineOffset = -lineOffset;
+      arrowOffset = -arrowOffset;
+    }
+
+    this.translate(line, [0, 0, lineOffset]);
+    this.translate(arrow, [0, 0, arrowOffset]);
+
+    // 创建箭头的组合（圆柱 + 圆锥）
+    this.heightArrow = new Cesium.Primitive({
+      modelMatrix: model.modelMatrix,
+      geometryInstances: [
+        new Cesium.GeometryInstance({
+          id: `heightArrow-line_${model.id}`,
+          geometry: line,
+        }),
+        new Cesium.GeometryInstance({
+          id: `heightArrow-arrow_${model.id}`,
+          geometry: arrow,
+        }),
+      ],
+      appearance: new Cesium.PolylineMaterialAppearance({
+        material: Cesium.Material.fromType('Color', { color: color }),
+        translucent: true,
+      }),
+      depthFailAppearance: new Cesium.PolylineMaterialAppearance({
+        material: Cesium.Material.fromType('Color', {
+          color: color.withAlpha(0.3),
+        }),
+        translucent: true,
+      }),
+      cull: false,
+    });
+
+    viewer.scene.primitives.add(this.heightArrow);
+  }
+
+  translate(geometry: any, offset: any) {
+    let Cesium = this.Cesium;
+    const scratchOffset = new Cesium.Cartesian3();
+    if (isArray(offset)) {
+      scratchOffset.x = offset[0];
+      scratchOffset.y = offset[1];
+      scratchOffset.z = offset[2];
+    } else {
+      Cesium.Cartesian3.clone(offset, scratchOffset);
+    }
+
+    for (let i = 0; i < geometry.attributes.position.values.length; i += 3) {
+      geometry.attributes.position.values[i] += scratchOffset.x;
+      geometry.attributes.position.values[i + 1] += scratchOffset.y;
+      geometry.attributes.position.values[i + 2] += scratchOffset.z;
+    }
+  }
+
+  //移除工具
+  removeTool() {
+    if (this.rotationRing) {
+      this.viewer.scene.primitives.remove(this.rotationRing);
+    }
+    if (this.translationSquare) {
+      this.viewer.scene.primitives.remove(this.translationSquare);
+    }
+    if (this.heightArrow) {
+      this.viewer.scene.primitives.remove(this.heightArrow);
+    }
+  }
+
+  //更新工具矩阵
+  updatedTool(newModelMatrix: any) {
+    if (this.rotationRing) {
+      this.rotationRing.modelMatrix = newModelMatrix;
+    }
+    if (this.translationSquare) {
+      this.translationSquare.modelMatrix = newModelMatrix;
+    }
+    if (this.heightArrow) {
+      this.heightArrow.modelMatrix = newModelMatrix;
+    }
+  }
+  /**
+   * @description: 平移模型
+   * @param {*} draggedModel
+   * @param {*} startModelMatrix
+   * @param {*} movement
+   * @return {*}
+   */
+  moveModel(draggedModel: any, startModelMatrix: any, movement: any) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+    const scene = viewer.scene;
+    const rayHit: any = scene.globe.pick(viewer.camera.getPickRay(movement.endPosition), scene);
+
+    if (rayHit) {
+      const startPosition: any = Cesium.Matrix4.getTranslation(
+        startModelMatrix,
+        new Cesium.Cartesian3(),
+      );
+      const startCartographic = Cesium.Cartographic.fromCartesian(startPosition);
+      const cartographic = Cesium.Cartographic.fromCartesian(rayHit);
+
+      const newCartographic = new Cesium.Cartographic(
+        cartographic.longitude,
+        cartographic.latitude,
+        startCartographic.height,
+      );
+
+      const newPosition = Cesium.Cartographic.toCartesian(newCartographic);
+      const rotationMatrix = Cesium.Matrix4.getRotation(startModelMatrix, new Cesium.Matrix3());
+      const newModelMatrix = Cesium.Matrix4.fromRotationTranslation(rotationMatrix, newPosition);
+
+      draggedModel.modelMatrix = newModelMatrix;
+
+      this.updatedTool(newModelMatrix);
+      let position = new Cesium.Cartesian3(
+        newModelMatrix[12],
+        newModelMatrix[13],
+        newModelMatrix[14],
+      );
+      let dragEndCallback = this.dragEndCallbackMap.get(draggedModel.id);
+      if (!dragEndCallback) {
+        dragEndCallback = new Map();
+        this.dragEndCallbackMap.set(draggedModel.id, dragEndCallback);
+      }
+      dragEndCallback.set(GLTFManageEventKey.Translation, {
+        id: draggedModel.id,
+        position: position,
+      });
+    }
+  }
+
+  /**
+   * @description: 平移模型高度
+   * @param {*} draggedModel
+   * @param {*} startModelMatrix
+   * @param {*} movement
+   * @return {*}
+   */
+  moveModelHeight(
+    draggedModel: any,
+    startModelMatrix: any,
+    movement: any,
+    startMousePosition: any,
+  ) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+    const scene = viewer.scene;
+    const deltaY = startMousePosition.y - movement.endPosition.y; // 竖直方向的移动量
+
+    const rayHit: any = scene.globe.pick(viewer.camera.getPickRay(movement.endPosition), scene);
+
+    if (rayHit) {
+      const startPosition: any = Cesium.Matrix4.getTranslation(
+        startModelMatrix,
+        new Cesium.Cartesian3(),
+      );
+      const startCartographic = Cesium.Cartographic.fromCartesian(startPosition);
+
+      const newCartographic = new Cesium.Cartographic(
+        startCartographic.longitude,
+        startCartographic.latitude,
+        startCartographic.height +
+          deltaY * 0.001 * Math.max(viewer.camera.positionCartographic.height, 1),
+      );
+
+      const newPosition = Cesium.Cartographic.toCartesian(newCartographic);
+      const rotationMatrix = Cesium.Matrix4.getRotation(startModelMatrix, new Cesium.Matrix3());
+      const newModelMatrix = Cesium.Matrix4.fromRotationTranslation(rotationMatrix, newPosition);
+
+      draggedModel.modelMatrix = newModelMatrix;
+
+      this.updatedTool(newModelMatrix);
+      let position = new Cesium.Cartesian3(
+        newModelMatrix[12],
+        newModelMatrix[13],
+        newModelMatrix[14],
+      );
+      let dragEndCallback = this.dragEndCallbackMap.get(draggedModel.id);
+      if (!dragEndCallback) {
+        dragEndCallback = new Map();
+        this.dragEndCallbackMap.set(draggedModel.id, dragEndCallback);
+      }
+      dragEndCallback.set(GLTFManageEventKey.Translation, {
+        id: draggedModel.id,
+        position: position,
+      });
+      // this.runEventListener(GLTFManageEventKey.Translation, {
+      //   id: draggedModel.id,
+      //   position: position,
+      // });
+    }
+  }
+
+  /**
+   * @description: 旋转模型
+   * @param {*} draggedModel
+   * @param {*} startModelMatrix
+   * @param {*} angleDelta
+   * @return {*}
+   */
+  rotateModel(draggedModel: any, startModelMatrix: any, angleDelta: number) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+    const modelHeadingPitchRoll = this.getModelHeadingPitchRoll(startModelMatrix);
+    const newHeading = modelHeadingPitchRoll.heading + angleDelta;
+
+    const headingPitchRoll = new Cesium.HeadingPitchRoll(
+      newHeading,
+      modelHeadingPitchRoll.pitch,
+      modelHeadingPitchRoll.roll,
+    );
+
+    const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
+      Cesium.Matrix4.getTranslation(draggedModel.modelMatrix, new Cesium.Cartesian3()),
+      headingPitchRoll,
+      viewer.scene.globe.ellipsoid,
+      Cesium.Transforms.eastNorthUpToFixedFrame,
+      new Cesium.Matrix4(),
+    );
+
+    draggedModel.modelMatrix = modelMatrix;
+    let dragEndCallback = this.dragEndCallbackMap.get(draggedModel.id);
+    if (!dragEndCallback) {
+      dragEndCallback = new Map();
+      this.dragEndCallbackMap.set(draggedModel.id, dragEndCallback);
+    }
+    dragEndCallback.set(GLTFManageEventKey.Rotate, {
+      id: draggedModel.id,
+      headingPitchRoll: {
+        heading: Cesium.Math.toDegrees(newHeading),
+        pitch: Cesium.Math.toDegrees(modelHeadingPitchRoll.pitch),
+        roll: Cesium.Math.toDegrees(modelHeadingPitchRoll.roll),
+      },
+    });
+  }
+
+  cleanup() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+}