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应用
5.创建iModel
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各功能示例

results matching ""

    No results matching ""