import FJSKIBind from 'fjski-model';
// 创建实例
const fjskModelBind = new FJSKIBind({
  baseUrl: 'https://your-api-server.com',
  appKey: 'your-app-key',
  appSecret: 'your-app-secret'
},{
  publicPath:''
});

模型加载

// 初始化并加载模型
await fjskModelBind.initLoad(
  document.getElementById('model-container'),
  {
    projectId: 'your-project-id',
    iModelId: 'your-imodel-id',
    changeSetId: 'your-changeset-id',
  },
  {
    backgroundColor: '#f0f0f0'
  }
);

版本对比加载（双视口）

// 主视口容器与次视口容器
const mainDom = document.getElementById('main-vp');
const secondaryDom = document.getElementById('secondary-vp');

await fjskModelBind.initLoadVersionCompare(
  mainDom,
  secondaryDom,
  {
    projectId: 'your-project-id',
    iModelId: 'your-imodel-id',
    changeSetId: 'current-changeset-id',
    targetChangeSetId: 'target-changeset-id',
    changeSetName: '当前版本',
    targetChangeSetName: '目标版本'
  },
  { backgroundColor: '#222' }
);

合模（场景）加载

const dom = document.getElementById('scene-vp');

await fjskModelBind.initLoadTileMerge(
  dom,
  {
    projectId: 'main-project',
    iModelId: 'main-imodel',
    changeSetId: 'main-changeset',
    tileMergeList: [
      { projectId: 'sub-project-1', iModelId: 'sub-imodel-1', changeSetId: 'cs-1', name: '子模型 1' },
      { projectId: 'sub-project-2', iModelId: 'sub-imodel-2', changeSetId: 'cs-2', name: '子模型 2' },
    ],
  },
  { backgroundColor: '#000' }
);

其它方法


// 销毁实例
fjskModelBind.destroyed();

1. 基础方法

1.1 构造函数

new fjskModelBindBind(config, options?)

参数

参数	说明	类型	可选值	默认值
config.baseUrl	API 基础地址	string	-	-
config.appKey	应用 Key	string	-	-
config.appSecret	应用 Secret	string	-	-
options.publicPath	静态资源路径（添加parse-imdl-worker.js配置文件）	string	-	空串

1.2 initLoad(dom, config, params)

初始化并加载模型。

参数

参数	说明	类型	可选值	默认值
dom	容器 DOM	HTMLElement	-	-
config.projectId	项目 ID	string	-	-
config.iModelId	模型 ID	string	-	-
config.changeSetId	变更集 ID	string	-	-
params.backgroundColor	背景色	string	十六进制色值	-

示例

await fjskModelBind.initLoad(
  document.getElementById('model-container'),
  { projectId: 'p', iModelId: 'm', changeSetId: 'cs' },
  { backgroundColor: '#222222' }
);

1.3 initLoadVersionCompare(dom, secondaryDom, config, params)

加载版本对比（双视口）。

参数

参数	说明	类型	可选值	默认值
dom	主视口容器	HTMLElement	-	-
secondaryDom	次视口容器	HTMLElement	-	使用 `#secondary-vp`
config.projectId	项目 ID	string	-	-
config.iModelId	模型 ID	string	-	-
config.changeSetId	当前版本变更集	string	-	-
config.targetChangeSetId	目标版本变更集	string	-	-
config.changeSetName	当前版本显示名	string	-	-
config.targetChangeSetName	目标版本显示名	string	-	-
params.backgroundColor	背景色	string	十六进制色值	-

示例

await fjskModelBind.initLoadVersionCompare(
  document.getElementById('main-vp'),
  document.getElementById('secondary-vp'),
  {
    projectId: 'p', iModelId: 'm', changeSetId: 'csA',
    targetChangeSetId: 'csB', changeSetName: 'A', targetChangeSetName: 'B'
  },
  { backgroundColor: '#000000' }
);

1.4 initLoadTileMerge(dom, config, params)

加载合模（场景）。

参数

参数	说明	类型	可选值	默认值
dom	视口容器	HTMLElement	-	-
config.projectId	主模型项目 ID	string	-	-
config.iModelId	主模型 ID	string	-	-
config.changeSetId	主模型变更集	string	-	-
config.tileMergeList	合模模型列表	Array<{ projectId,iModelId,changeSetId,name? }>	-	[]
params.backgroundColor	背景色	string	十六进制色值	-

示例

await fjskModelBind.initLoadTileMerge(
  document.getElementById('scene-vp'),
  {
    projectId: 'mainP', iModelId: 'mainM', changeSetId: 'mainCS',
    tileMergeList: [{ projectId: 'p1', iModelId: 'm1', changeSetId: 'cs1', name: '子模型1' }]
  },
  { backgroundColor: '#101010' }
);

1.5 setSystemUnit(unit)

参数

参数	说明	类型	可选值	默认值
unit	单位系统	string	metric / imperial	metric

示例

fjskModelBind.setSystemUnit('metric'); // 或 'imperial'

1.6 destroyed()

销毁实例并清理资源。

示例

fjskModelBind.destroyed();

2. 应用方法

2.1 ElementsControl（元素）

简介：获取元素属性/标签、视图定位。

2.1.1 getElementProperties(elementId)

获取元素属性，并按分类结构化返回。

参数

参数	说明	类型	可选值	默认值
elementId	元素 ID	string	-	-

示例

const info = await fjskModelBind.elementsControl.getElementProperties('0x123');
if (info) {
  console.log(info.label);
  console.table(info.propertyData);
}

2.1.2 getElementLabel(property)

从属性对象提取元素显示名。

参数

参数	说明	类型	可选值	默认值
property	元素属性对象	object	-	-

示例

const label = fjskModelBind.elementsControl.getElementLabel(propertyObj);

2.1.3 zoomToElements(elementIds)

视图缩放到指定元素。

参数

参数	说明	类型	可选值	默认值
elementIds	元素 ID 列表	string[]	-	-

示例

fjskModelBind.elementsControl.zoomToElements(['0x1','0x2']);

2.1.4 destroy()

释放监听与资源。

示例

fjskModelBind.elementsControl.destroy();

2.2 ModelToolsControl（模型工具）

简介：模型显示控制（背景色、隐藏/隔离、清理等）。

2.2.1 setBackgroundColor(color)

设置背景色（16 进制）。

参数

参数	说明	类型	可选值	默认值
color	背景色	string	十六进制色值	-

示例

fjskModelBind.modelToolsControl.setBackgroundColor('#1e1e1e');

2.2.2 toggleElementsVisibility(isShow)

显示/隐藏选中构件。

参数

参数	说明	类型	可选值	默认值
isShow	是否显示	boolean	true/false	-

示例

fjskModelBind.modelToolsControl.toggleElementsVisibility(false);

2.2.3 toggleElementsIsolation(isIsolate)

隔离/取消隔离选中构件。

参数

参数	说明	类型	可选值	默认值
isIsolate	是否隔离	boolean	true/false	-

示例

fjskModelBind.modelToolsControl.toggleElementsIsolation(true);

2.2.4 clearElementsIsolation()

清除隔离。

示例

fjskModelBind.modelToolsControl.clearElementsIsolation();

2.2.5 clearHiddenElements()

清除隐藏。

示例

fjskModelBind.modelToolsControl.clearHiddenElements();

2.2.6 clearSelectElements()

清除选中。

示例

fjskModelBind.modelToolsControl.clearSelectElements();

2.2.7 clear()

一次性清除隔离、隐藏与选中。

示例

fjskModelBind.modelToolsControl.clear();

2.3 MeasureToolsControl（测量）

简介：测量工具集合。

2.3.1 measureDistance()

启动距离测量。

示例

fjskModelBind.measureToolsControl.measureDistance();

2.3.2 measureArea()

启动面积测量。

示例

fjskModelBind.measureToolsControl.measureArea();

示例

fjskModelBind.measureToolsControl.measureArea();

2.3.3 measureAngle()

启动角度测量。

示例

fjskModelBind.measureToolsControl.measureAngle();

示例

fjskModelBind.measureToolsControl.measureAngle();

2.3.4 measureLocation()

测点坐标。

示例

fjskModelBind.measureToolsControl.measureLocation();

示例

fjskModelBind.measureToolsControl.measureLocation();

2.3.5 measureRadius()

测量半径。

示例

fjskModelBind.measureToolsControl.measureRadius();

示例

fjskModelBind.measureToolsControl.measureRadius();

2.3.6 measureVerticalDistance()

测量垂直距离。

示例

fjskModelBind.measureToolsControl.measureVerticalDistance();

示例

fjskModelBind.measureToolsControl.measureVerticalDistance();

2.3.7 toggleDisplayMeasurementAxes()

切换坐标轴显示。

示例

fjskModelBind.measureToolsControl.toggleDisplayMeasurementAxes();

示例

fjskModelBind.measureToolsControl.toggleDisplayMeasurementAxes();

2.3.8 clearMeasurements()

清除所有测量。

示例

fjskModelBind.measureToolsControl.measureDistance();

fjskModelBind.measureToolsControl.clearMeasurements();

2.4 SectionToolsControl（截面）

简介：剖切工具与操控器显示控制。

2.4.1 runViewClipByElement()

按选中元素剖切。

示例

fjskModelBind.sectionToolsControl.runViewClipByElement();

2.4.2 runViewClipByPlane()

按平面剖切。

示例

fjskModelBind.sectionToolsControl.runViewClipByPlane();

2.4.3 runViewClipByRange()

按范围剖切。

示例

fjskModelBind.sectionToolsControl.runViewClipByRange();

2.4.4 runViewClipByShape()

按形状剖切。

示例

fjskModelBind.sectionToolsControl.runViewClipByShape();

2.4.5 runViewClipClear()

清除所有剖切。

示例

fjskModelBind.sectionToolsControl.runViewClipClear();

2.4.6 toggleManipulators()

切换操控器显示。

示例

fjskModelBind.sectionToolsControl.toggleManipulators();

2.4.7 setToggleManipulators()

若未显示则显示操控器。

示例

fjskModelBind.sectionToolsControl.setToggleManipulators();

2.4.8 startPollingManipulatorsState()

开始轮询操控器显示状态（100ms）。

示例

fjskModelBind.sectionToolsControl.startPollingManipulatorsState();

2.4.9 stopPollingManipulatorsState()

停止轮询。

示例

fjskModelBind.sectionToolsControl.stopPollingManipulatorsState();

2.4.10 getCurrentManipulatorsState()

获取当前操控器显示状态。

示例

fjskModelBind.sectionToolsControl.getCurrentManipulatorsState()

2.4.10 destroy()

销毁清理。

示例

fjskModelBind.sectionToolsControl.destroy();

2.5 ViewToolsControl（视图）

简介：视图交互工具（选择/漫游/旋转/平移/缩放/飞行等）。

2.5.1 selectView()

选择工具。

示例

fjskModelBind.viewToolsControl.selectView();

2.5.2 walkView()

漫游工具。

示例

fjskModelBind.viewToolsControl.walkView();

2.5.3 rotateView()

旋转视图。

示例

fjskModelBind.viewToolsControl.rotateView();

2.5.4 panView()

平移视图。

示例

fjskModelBind.viewToolsControl.panView();

2.5.5 zoomView()

缩放视图。

示例

fjskModelBind.viewToolsControl.zoomView();

2.5.6 flyView()

飞行视图。

示例

fjskModelBind.viewToolsControl.flyView();

2.5.7 windowArea()

窗口区域选择。

示例

fjskModelBind.viewToolsControl.windowArea();

2.5.8 fitView()

铺满视图。

示例

fjskModelBind.viewToolsControl.fitView();

2.5.9 restView()

重置为等轴测并缩放到合适范围。

示例

fjskModelBind.viewToolsControl.restView();

2.6 ExplosionControl（爆炸动画）

简介：爆炸动画运行/进度控制/暂停与清理。

2.6.1 runExplosion()

开始爆炸动画。

示例

await fjskModelBind.explosionControl.runExplosion();

2.6.2 controlExplosion(schedule)

按百分比设置动画进度。

参数

参数	说明	类型	可选值	默认值
schedule	进度百分比	number	0-100	-

示例

await fjskModelBind.explosionControl.controlExplosion(50);

2.6.3 pauseExplosion()

暂停动画。

示例

fjskModelBind.explosionControl.pauseExplosion();

2.6.4 cleanExplosion()

清理动画状态。

fjskModelBind.explosionControl.cleanExplosion();

2.7 SaveViewsControl（保存视图）

简介：保存视图属性与缩略图、应用保存视图。

2.7.1 getSavedViewProps()

获取当前视图配置。

示例

const props = fjskModelBind.saveViewsControl.getSavedViewProps();

2.7.2 getSavedViewThumbnail()

获取缩略图 Buffer。

示例

const thumb = await fjskModelBind.saveViewsControl.getSavedViewThumbnail();

2.7.3 watchSaveView(viewDefinitionProps)

将保存的视图应用到当前视口。

参数

参数	说明	类型	可选值	默认值
viewDefinitionProps	视图属性	object	-	-

示例

const viewProps = fjskModelBind.saveViewsControl.getSavedViewProps();
fjskModelBind.saveViewsControl.watchSaveView(viewProps);

2.8 ModelTreeControl（模型树）

简介：模型层级树，支持懒加载、选择联动与可见性控制。

2.8.1 initLoad()

初始化 provider/可见性处理并返回默认勾选 keys。

示例

const { defaultCheckedKeys } = await fjskModelBind.modelTreeControl.initLoad();

2.8.2 initializeTree(imodel)

使用指定 imodel 初始化依赖对象。

参数

参数	说明	类型	可选值	默认值
imodel	模型连接	IModelConnection	-	-

示例

// 假设已获取到 imodel 实例
fjskModelBind.modelTreeControl.initializeTree(imodel);

2.8.3 loadNode(node)

懒加载子节点数据（适配 el-tree）。

参数

参数	说明	类型	可选值	默认值
node	`el-tree` 节点	object	-	-

示例

const children = await fjskModelBind.modelTreeControl.loadNode(node);

2.8.4 zoomToNode(node)

根据节点类型（元素/模型/分类）缩放视图。

参数

参数	说明	类型	可选值	默认值
node	`el-tree` 节点	object	-	-

示例

await fjskModelBind.modelTreeControl.zoomToNode(node);

2.8.5 handleNodeClick(node)

同步选择集。

参数

参数	说明	类型	可选值	默认值
node	`el-tree` 节点	object	-	-

示例

fjskModelBind.modelTreeControl.handleNodeClick(node);

2.8.6 handleCheckChange(node, checked, indeterminate)

联动可见性。

参数

参数	说明	类型	可选值	默认值
node	`el-tree` 节点	object	-	-
checked	是否选中	boolean	true/false	-
indeterminate	是否半选	boolean	true/false	-

示例

fjskModelBind.modelTreeControl.handleCheckChange(node, true, false);

2.8.7 clearSelect()

清除当前选中。

示例

fjskModelBind.modelTreeControl.clearSelect();

2.9 VersionCompareControl（版本对比）

简介：对比两版模型的变更元素，支持查看属性差异与按类型查看。

2.9.1 watchElementsByType(type)

按类型缩放并选中元素（新增/更新/删除）。

参数

参数	说明	类型	可选值
type	变更类型	string	inserted / updated / removed

示例

fjskModelBind.versionCompareControl.watchElementsByType('inserted');

2.9.2 close()

关闭对比并清理事件。

示例

fjskModelBind.versionCompareControl.close();

2.10 ModelMergeTreeControl（合模模型树）

简介：用于合模场景的树控件，勾选控制附着/卸载子模型或切换主模型整树可见性。

2.10.1 loadNode()

返回一层节点（每个代表一个可勾选子模型）。

2.10.2 getOrCreateHierarchyVisibilityHandler(model)

获取/创建层级与可见性处理器。

参数

参数	说明	类型
model	模型项	{ projectId: string; iModelId: string; changeSetId: string; name?: string }

2.10.3 handleCheckChange(node, checked, indeterminate)

勾选附着/卸载或切换主模型整树可见性。

参数

参数	说明	类型	可选值	默认值
node	树节点	object	-	-
checked	是否勾选	boolean	true/false	-
indeterminate	是否半选	boolean	true/false	-

示例

fjskModelBind.modelMergeTreeControl.handleCheckChange(node, true, false);

2.10.4 handleNodeClick(node)

缩放到模型范围。

参数

参数	说明	类型
node	树节点	object

2.10.5 destroy()

释放资源。

3. 应用事件

3.1 模型选择事件：`fjskModelSelect`

当用户在视口中选择模型元素时触发，返回所选元素ID集合。

示例

fjskModelBind.eventEmitter.$on('fjskModelSelect', async (elements) => {
  if (elements && elements.length > 0) {
    const elementId = elements[0];
    const res = await fjskModelBind.elementsControl.getElementProperties(elementId);
    console.log('Selected element properties:', res);
  }
});

3.2 版本对比事件：`fjskModelCompare`

当版本对比启动并拿到变更元素时触发，包含新增/更新/删除与行数据。

事件负载

字段	说明
insertedElems	新增元素列表
updatedElems	更新元素列表
removedElems	删除元素列表
rows	汇总行数据（用于属性对比、定位等）

示例

fjskModelBind.eventEmitter.$on('fjskModelCompare', ({ insertedElems, updatedElems, removedElems, rows }) => {
  console.log('Inserted:', insertedElems.length, 'Updated:', updatedElems.length, 'Removed:', removedElems.length);
  if (rows && rows.length) {
    // 示例：查看第一条差异元素
    fjskModelBind.versionCompareControl.watchElements(rows[0]);
  }
});

Keywords

FAQs

What is fjski-model?

Is fjski-model well maintained?

Package last updated on 16 Aug 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install