vue2中, Annotorious2.7.18的创建 会导致 openseadragon5.0.1的open方法在调用之后，出现卡死现象

[shgkiller]

首先 我现在初始化OpenSeadragon之后，在open监听回调方法里 创建 Annotorious， 主视图此时是没有问题的，标注图形也能显示出来。这时候 我假如要修改切片链接地址的入参，比如我设置一个红色，让主视图所有切片都显示红色。这时候我会调用open方法，此时 只会加载几张切片，也就是说 只有缩略图改变了，而主视图此时 无法拖拽、缩放、主视图的切片也没有加载，看着像卡死了一样，还没有报错，很奇怪。
我附上部分关键代码以供查看,请各位大佬给出明示！！敬重！！
import OpenSeadragon from "openseadragon";
// 导入 Annotorious
import * as AnnotoriousModule from "@recogito/annotorious-openseadragon";
1.初始化时
const params = new URLSearchParams(colorParams).toString();
// 构建自定义 tileSource
const tileSource = {
...this.tileSourceParams,
getTileUrl: (level, x, y) => {
return /xxx/xxxx/xxxxxx_files/${level}/${x}_${y}.jpg?${params};
},
};
// 简化初始化
this.viewer = OpenSeadragon({
id: "openSeadragonall",
tileSources: tileSource,
crossOriginPolicy: "Anonymous",
............省略

2.初始化成功后的 open监听，应该监听一次即可
// 检查图像是否成功加载
this.viewer.addOnceHandler("open", () => {
console.log("图像成功加载");

        console.log("主视图world item：", this.viewer.world.getItemAt(0));
        if (!this.anno) {
          this.$nextTick(() => {
            console.log("初始化标注");
            this.initAnnotorious();
          });
        }
      });

3. 初始化 Annotorious
   initAnnotorious() {
   try {
   // this.initSelectorWidget();
   if (this.anno) {
   this.anno.destroy();
   this.anno = null;
   }
   this.anno = AnnotoriousModule(this.viewer, {});
   //其他相关业务代码
   ...........省略
   } catch (error) {
   console.error("Annotorious 初始化错误:", error);
   }
   },
   4.修改切片入参
   // 2. 保存当前视图状态
   const currentZoom = this.viewer.viewport.getZoom();
   const currentCenter = this.viewer.viewport.getCenter();
   // 参数变更时
   this.viewer.addOnceHandler("open", () => {
   console.log("颜色校正应用成功！");
   // 先恢复视图
   setTimeout(() => {
   try {
   this.viewer.viewport.zoomTo(currentZoom, currentCenter, true);
   } catch (e) {
   this.viewer.viewport.goHome();
   }
   // 再延迟一帧初始化 Annotorious
   this.$nextTick(() => {
   setTimeout(() => {
   this.initAnnotorious();
   }, 0);
   });
   }, 200);
   });
   console.log("更新的参数", colorParamsnew);

    console.log("this.tileSourceParams=====", this.tileSourceParams);
    const { width, height, tileSize, overlap, minLevel, maxLevel } =
      this.tileSourceParams;
    console.log(width, height, tileSize, overlap, minLevel, maxLevel);
   
    const params = new URLSearchParams(colorParamsnew).toString();
    // 4. 构造新 tileSource，仅变更 getTileUrl
    const newTileSource = {
      width: Number(width),
      height: Number(height),
      tileSize: Number(tileSize),
      overlap: Number(overlap),
      minLevel: 0,
      maxLevel: Number(maxLevel),
      getTileUrl: (level, x, y) => {
        return `/xxxxx/xxxxxx/xxxxxx_files/${level}/${x}_${y}.jpg?${params}`;
      },
    };
    // 如果存在标注实例，先销毁
    if (this.anno) {
      await this.destroyAnnotorious();
    }
    //  重新 open
    await this.viewer.open(newTileSource);
   

5.// Annotorious anno的销毁方法
destroyAnnotorious() {
return new Promise((resolve) => {
if (!this.anno) return resolve();

    // 1. 禁用所有交互
    // this.anno.setEnabled(false);

    // 2. 移除所有事件监听器
    this.anno.off();
    this.anno.clearAnnotations();
    // 3. 调用官方destroy方法
    this.anno.destroy();
    // 3. 手动清理画布（针对OSD插件）
    const svgContainer = this.viewer.container.querySelector(
      ".a9s-annotationlayer"
    );
    svgContainer?.remove();
    // 5. 清除引用
    this.anno = null;
    // 6. 强制重绘
    this.viewer.forceRedraw();
    resolve();
  });
},