Visualization
iTwin Viewer
iTwin Viewer 是一个可配置的ITwin.js浏览页面,其提供了查看iModel并与之交互的能力。它包括了基本功能,并且可以通过iTwin.js技术栈的额外功能进行扩展。iTwin Viewer包括以下几个工具:
- 用于选择、隐藏和强调elements的选择工具
- 基本测量工具
- 基本裁切工具
- 行走工具和相机工具
- 基本树视图和属性网格
- 带有特定工具的上下文信息的状态栏
Creating an app to view an iModel
开始之前请确保已安装node.js typescript npm Chrome等基本工具
1.创建项目文件夹
mkdir myViewer
cd myViewer
2.安装必要依赖
npm init -y
npm i @itwin/cra-template-web-viewer
npm i @bentley/react-scripts
3.创建viewer,注意自定义my-app-name
npx create-react-app@latest my-app-name --template @itwin/web-viewer --scripts-version @bentley/react-scripts
等待其自动创建完成,得到名为my-app-name的项目
4.创建并配置OIDC应用
请于此处创建OIDC application: https://developer.bentley.com/my-apps
创建时在API associations选项中勾选Visualization、Digital Twin Management
Application type请选择SPA
Redirect URIs请填入 http://localhost:3000/signin-callback
5.创建iModel
请于此处创建iModel:https://developer.bentley.com/my-imodels/
创建完成后返回iModel列表页,在表格最后一列显示IDs,得到iTwin ID与iModel ID
6.打开my-app-name的文件夹中的env文件,写入配置
- IMJS_AUTH_CLIENT_CLIENT_ID 填入在第四步中创建的OIDC application client ID
- IMJS_AUTH_CLIENT_REDIRECT_URI 填入 http://localhost:3000/signin-callback
- IMJS_ITWIN_ID与IMJS_IMODEL_ID填入第五步中创建的IDs
7.运行viewer App
cd my-app-name
npm start
Extending the capabilities
iTwin Viewer可以通过iTwin.js技术栈的额外功能进行扩展。每一个iTwin扩展功能都是一个单独的JS模块,可按需加载到iTwin.js前端应用中。独立的扩展功能在iTwin应用运行时提供了良好的扩展性。
每个扩展独立的包,可以访问所有iTwin.js共享库,实现与主应用程序的无缝集成。扩展可用于扩展iTwin Viewer的行为,以支持自定义工作流。iTwin.js SDK包含了关于创建iTwin扩展的更多信息。
英文链接:https://developer.bentley.com/apis/visualization/overview/
可在Tutorials栏目中继续学习如何扩展viewer功能
Samples栏目中可查看viewer各功能示例