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各功能示例

Visualization 文档说明