SDK开发方式说明

# 一、SDK 介绍

bjksj-sdk 开发包是基于跨~界图形引擎用于快速搭建模型开发的api库，支持react、vue2、vue3项目。

# 二、快速上手

# 1.设置npm安装源

在项目根目录下创建.npmrc文件 ,内容设置当前项目的npm安装源为

registry=http://npm.ksj.com.cn:4873/

需要联系对接人获取npm源地址的账号密码

# 2.安装bjksj-sdk依赖开发包

项目下添加完.npmrc文件后联系对接人获取npm登录账号密码，通过npm login 进行登录，登录完成后在项目根目录下执行

npm install bjksj-sdk -S --force

注意：需带上参数 --force 避免包依赖冲突造成安装失败

# 3.调用api

bjksj-sdk安装完成后，在项目内进行调用，以设置模型透明度为例

import { SampleAppViewer, KSJModelControlApi } from "bjksj-sdk";

function App () {
    return <div>
        <div>
            <button 
				onClick={() => { KSJModelControlApi.setWholeTransparency({ opacity: 0.5 }) }}
	    	>显示模型</button>
        </div>
        <SampleAppViewer props={configProps} bimFile={bimFile}></SampleAppViewer>
    <div/>
}

其他api调用查看接口列表或者对应示例demo。

# 4. vue项目调用配置

# 4.1 vue2配置

vue2的版本需要大于2.4，版本小于2.4需要升级版本；
安装vuera
```
npm i vuera -S
```

在入口文件引入插件并安装

import { VuePlugin } from 'vuera';
Vue.use(VuePlugin);

# 4.2 vue3配置

安装veaury

npm i veaury -S

在调用sdk开发包的组件时，在组件注册时需要进行处理

// 组件处理函数
import { applyPureReactInVue } from "veaury";
// 引入sdk的组件
import { SampleAppViewer } from "bjksj-sdk";

components: {
   AppViewer: applyPureReactInVue(SampleAppViewer), // 组件注册时使用applyPureReactInVue进行处理
}

# 5.基于webpack5搭建的项目

使用webpack5构建的项目，由于在webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要在项目配置文件中增加下列配置：

configureWebpack: {
    resolve: {
      fallback: {
        "fs": false,
        "path": false
      }
    }
 }

# 6.vite 项目配置

使用vite 构建的项目，需要在vite增加下列配置

安装 vite-plugin-env-compatible 插件, 在项目中提供process.env.xxxx变量

npm install vite-plugin-env-compatible -D --force

安装二次开发包插件 bjksj-plugin

npm install bjksj-plugin -D --force

在 vite.config.js 中添加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
// add
import path from 'path';
import envCompatible from 'vite-plugin-env-compatible';
import { ksjViteTilePlugin } from 'bjksj-plugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // add
    ksjViteTilePlugin(), // 二次开发sdk的vite插件
    // add
    envCompatible(), // 提供process.env.xxxx 的环境变量 polyfill
    vue(),
  ],
  resolve: {
    // add 添加sdk别名
    alias: {
      '~@itwin': path.resolve(__dirname, 'node_modules/@itwin'),
      '~@ksj': path.resolve(__dirname, 'node_modules/@ksj')
    },
    // add 在默认的后缀配置基础上，添加 .scss
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss']
  }
});

← iframe开发方式说明