# JS端调用离线数据包

当离线数据包部署到本地服务器以后，开发者可以按照以下方式集成JavaScript完成整个流程。本质上，离线数据包和在线访问相比，只是数据访问路径发生了变化，因此，进行如下四个设置即可。

# 前端设置

# 1. 下载JSSDK

在控制台 (opens new window)的离线数据包页面，能够获取到针对离线数据包的最新版JSSDK，也可以访问开发指南中的JSSDK下载页面 (opens new window)，获取最新或历史版本的JSSDK资源。新版的JSSDK可以兼容所有该大版本下的模型离线数据，因此只需要下载一次JSSDK，即可对应多组模型离线数据。

# 2. 确定离线数据包的部署路径

在线模式下，通常需要根据fileId、integrateId获取viewToken，以便于确定应该显示哪个模型或图纸。而部署离线数据包之后，该步骤已经省略。假设，你的离线数据包部署在： http://{你的域名或IP地址}/bimface/cea1da8a380fd215b01bff8c58312839/（注：cea1da8a380fd215b01bff8c58312839是数据包解压后的根目录）那么，上述路径就是你某个模型数据包的部署目录。

# 3. 引用离线数据包中的JSSDK

改变之前引用JS组件的方式，直接引用数据包中的JSSDK（仅支持相对路径）。由于模型数据与JSSDK分离，因此用户需要根据JSSDK的位置，自行设置路径，例如：

<script src="./jssdk/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>

# 4. 初始化Viewer的配置

改变BimfaceLoaderConfig的三个配置项：

BimfaceLoaderConfig.dataEnvType
BimfaceLoaderConfig.sdkPath
BimfaceLoaderConfig.path

如：

let BimfaceLoaderConfig = new BimfaceSDKLoaderConfig();
BimfaceLoaderConfig.dataEnvType = BimfaceEnvOption.Local;
BimfaceLoaderConfig.sdkPath = './jssdk';
BimfaceLoaderConfig.path = './viewToken.json';

注意：此处的sdkPath需要根据JSSDK实际的存放路径进行修改。

# 完整案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BimfaceApplication</title>
  <style media="screen">
    html,
    body{
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    #view{
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="../jssdk/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
</head>
<body>
  <div id="view"></div>
  <script type="text/javascript">
  let viewer;
  let BimfaceLoaderConfig = new BimfaceSDKLoaderConfig();

  BimfaceLoaderConfig.dataEnvType = BimfaceEnvOption.Local;
  BimfaceLoaderConfig.sdkPath = '../jssdk';
  BimfaceLoaderConfig.path = './viewToken.json';
    
  BimfaceSDKLoader.load(BimfaceLoaderConfig,onSDKLoadSucceeded,onSDKLoadFailed);

  function onSDKLoadSucceeded(viewMetaData){

    if(viewMetaData.viewType == "drawingView"){
        let view = document.getElementById('view');   
        let WebAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingConfig();
        WebAppConfig.domElement = view;
        let app = new Glodon.Bimface.Application.WebApplicationDrawing(WebAppConfig);
        viewer = app.getViewer();
        viewer.loadDrawing({viewMetaData});
        
    }else if(viewMetaData.viewType == "3DView"){
      let view = document.getElementById('view')
      let config = new Glodon.Bimface.Application.WebApplication3DConfig();
      config.domElement = view;
      let eventManager = Glodon.Bimface.Application.WebApplication3DEvent;
      app = new Glodon.Bimface.Application.WebApplication3D(config);
      viewer = app.getViewer();
      viewer.loadModel({viewMetaData});
    }else if(viewMetaData.viewType =="rfaView"){
      let view = document.getElementById('view')
      let config = new Glodon.Bimface.Application.WebApplicationRfaConfig();
      config.domElement = view;
      let eventManager = Glodon.Bimface.Application.WebApplicationRfaEvent;
      app = new Glodon.Bimface.Application.WebApplicationRfa(config);
      viewer = app.getViewer();
      viewer.loadModel({viewMetaData});
    }
  };

  function onSDKLoadFailed(error){
	  console.log("Failed to load SDK!");
  };
  </script>
</body>
</html>

← 服务端部署离线包离线包试用 →