项目如何集成ParaView Glance

前言

最近做医学3d模型文件，浏览器端的引入展示，后期实现远程演示、圈点标注等很多功能，
看过很多3d集成的库，如three.js、OHIF、ParaView、vtk,js、xtk.js。
前面博客也写过three.js在vue框架展示3d的vtk和nrrd模型文件，由于样式简陋，功能少
后续虽然可以慢慢添加新的功能，但作为新手，学习周期太长，每个功能添加都需要时间
查找文献，学习，不利于快速开发。
然后是OHIF影像平台，基于react框架，搞了一两天（一点头绪没得），果断放弃。
由于时间受限，就特别想能有一个功能完善的框架，直接导入文件就可以了，
最后找到了ParaView Glance，功能特别完善，只需要传入3d文件就可以了。
只需要做解析它的接口调用逻辑，进行修改调取接口的源码，更改远程服务器就可以了

运行

官网源码地址

拉取以及运行
$ git clone https://github.com/Kitware/paraview-glance.git
$ cd paraview-glance/
$ npm install
$ npm run dev

源码运行成功的效果图

上传一个3d文件测试

注意事项

如果安装 npm install 不成功，可以根据上一篇博客操作
npm install 关于错误码 4048问题探讨

修改远程服务

1. 跨域处理
   bulid文件下的webpack.dev.config.js文件,添加proxy

   devServer: {
       proxy: {
         '/api':{
           target:"http://~~~~",//接口域名
           pathRewrite:{'^/api': '/'},//是指服务器把接口中api去掉，以免img这几个字母加入到接口地址中
           changeOrigin: true, //如果是https需要配置该参数
           ws:true,
         }
       },
       contentBase: baseConfig.output.path,
       host: HOST || '0.0.0.0',
       port: PORT || 9999,
       disableHostCheck: true,
       hot: false,
       quiet: false,
       noInfo: false,
       stats: {
         colors: true,
       },
     },
   

2. 加载时修改url为我们的远程
   GirderBox下的script.js的load方法

   load() {
     console.log('执行中',this.fileLists)
     cookies.set('girderToken',this.token) // 把token值设置到cookies中 便于后序操作
     // 多个文件集成
     const rfiles = this.fileLists.map((elem) => {
       return { // 加载调用的方法
         /* eslint-disable-next-line no-underscore-dangle */
         url:`api/oper-upload/api/medical/record/download?fileUrl=${elem.url}`,
         name: elem.name,
         withGirderToken: true,
         proxyKeys: { // 代理秘钥
           girderProvenance: { 
             ...this.location,
             apiRoot: this.girderRest.apiRoot,
           },
           girderItem: {
             /* eslint-disable-next-line no-underscore-dangle */
             itemId: 'elem._id',
             itemName: elem.name,
           },
           meta: 'elem.meta',
         },
       };
     });
   
     // // console.log('加载调用的方法')
     this.$store.dispatch('files/openRemoteFiles', rfiles);
   },
   

解释：
this.fileLists是跨域传参接收的文件数组
前篇博客有详细介绍：
关于vue打开另一个新项目以及传参问题
3、请求接口修改 原为get请求，我的接口为post请求
修改node_modules下vtk.js下Sources下IO下Core下DataAccessHelper下的HttpDataAccessHelper.js

function openAsyncXHR(method, url, options = {}) {
  console.log('执行了调用接口的方法')
  const xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  console.log('打印参数',method, url, options)
  // xhr.setRequestHeader("Content-type","application/json");  // 改成post请求需要添加请求头
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
   // XHR.send(JSON.stringify(data));  //如果是对象格式的数据就要转换成jsonstring  
  if (options.headers) { // 这个位置是传递token值的
    Object.entries(options.headers).forEach(([key, value]) =>
      xhr.setRequestHeader(key, value)
    );
  }
  console.log('接口位置1', xhr) // 这个位置已经执行完了xhr
  if (options.progressCallback) {
    console.log('options.progressCallback',options.progressCallback) // 没有走这个
    xhr.addEventListener('progress', options.progressCallback);
  }

  return xhr;
}

function fetchBinary(url, options = {}) {
  return new Promise((resolve, reject) => {
    // const xhr = openAsyncXHR('GET', url, options); // 原来的是get
    const xhr = openAsyncXHR('POST', url, options);
    console.log('jiekouxhr', xhr)
    xhr.onreadystatechange = (e) => {
      console.log('找到了接口调用的位置了吗？')
      if (xhr.readyState === 4) {
        if (xhr.status === 200 || xhr.status === 0) {
          resolve(xhr.response);
        } else {
          reject({ xhr, e });
        }
      }
    };

    // Make request
    xhr.responseType = 'arraybuffer';
    xhr.send();
  });
}

4. 一进入页面就加载

   实现：隐藏上传文件框转为一进入app.js就在生命周期created中执行文件加载的方法
   就不做描述了