SDK

SDK 以 ESModule 的方式提供功能接口，方便开发者基于其创建不同的 BIM+GIS 应用。

1. 基础文件引入

基础文件包含基础 css 样式和组件库 js 文件, 可直接放入到入口文件的 head 标签内。

<head>
  <link rel="stylesheet" href="https://bim.gzmcg.com/cdn/sdk/s2@latest/sdk.css" />
  <link rel="stylesheet" href="https://bim.gzmcg.com/cdn/ui-next@latest/theme.css" />
  <script src="https://bim.gzmcg.com/cdn/ui-next@latest/index.js"></script>
</head>

为兼容旧浏览器对 esmodule 的支持，推荐在引入 SDK 链接前再增加引入 pollyfill。

<script async src="https://bim.gzmcg.com/cdn/sdk/s2@latest/es-module-shims@1.7.1.js"></script>

2. SDK引入

根据项目的实际情况和技术栈，我们可以选择以下任意一种方式进行引入SDK。

2.1 Vite 引入 SDK （推荐）

如果项目是基于 vite, 对于 js 文件，可以这么配置 vite.config.ts 来引入 sdk 的 js 部分：

export default defineConfig({
  ...
  resolve: {
    alias: {
      ...
      'ubm': 'https://bim.gzmcg.com/cdn/sdk/s2@latest/sdk.es.js',
      ...
    },
  },
})

2.2 自定义Loader

如果项目不是基于vite，也可以直接基于 ES Module 的动态导入机制来使用，示例如下：

先定义一个 Loader 函数：

const useUbmLoader = async () => {
  return new Promise((resolve, reject) => {
    import('https://bim.gzmcg.com/cdn/sdk/s2@latest/sdk.es.js').then(module => {
      resolve(module)
    }).catch(error => {
      // Handle failure
      console.log(error)
      reject(error)
    });
  })
}

然后在前端页面里面获取到 SDK 导出类, 并使用。

const ubm = await useUbmLoader()
const { Scene } = ubm

如果使用的 webpack, 提示不支持动态引入，可加入一个忽略语句 * webpackIgnore: true */ 来解决：

export const useUbmLoader = async () => {
  return new Promise((resolve, reject) => {
    import(/* webpackIgnore: true */ 'https://bim.gzmcg.com/cdn/sdk/s2@latest/sdk.es.js').then(module => {
      resolve(module)
    }).catch(error => {
      // Handle failure
      console.log(error)
      reject(error)
    });
  })
}

2.3 CDN 方式引入

如果只是一个简单的单页应用，也不打算使用现代框架，可采用 CDN 方式引入 SDK 文件：

<script type="module">
import * as ubm from 'https://bim.gzmcg.com/cdn/sdk/s2@latest/sdk.es.js'
</script>

最终的代码结构如下：

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="https://bim.gzmcg.com/cdn/sdk/s2@latest/sdk.css" />
      <link rel="stylesheet" href="https://bim.gzmcg.com/cdn/ui-next@latest/theme.css" />
      <script type="module" src="https://bim.gzmcg.com/cdn/ui-next@latest/index.js"></script>
      <script async src="https://bim.gzmcg.com/cdn/sdk/s2@latest/es-module-shims@1.7.1.js"></script>
    </head>
    
    <body>
      <div id="app"></div>
      <script type="module">
        import * as ubm from 'https://bim.gzmcg.com/cdn/sdk/s2@latest/sdk.es.js'
      </script>
    </body>
    
  </html>

场景基础