1. simple-viewer-app 样例运行

simple-viewer-app是一个iModel.js示例应用程序,用于演示如何打开iModel并查看其数据。 使用以下组件来显示数据: - *Viewport*:将几何数据渲染到HTMLCanvasElement上。 - *Tree*:显示iModel内容的层次结构视图。 - *Property Grid*:显示所选元素的属性。 - *Table*::以表格格式显示元素属性。 该应用程序可以指导您如何将一个或多个这些组件嵌入到自己的应用程序中。 有关iModel.js API以及此示例中使用的各种构造的全面文档,请参见http://imodeljs.org。

1.1. 环境设置

  • Node.js 12.x LTS version

  • Typescript 3.7x

  • Git

  • IDE: 推荐Visual Studio Code

1.2. 注册

地址:https://www.imodeljs.org/getting-started/registration-dashboard?tab=0 (注册时需要使用bentley账号)

  • 1.2.1. 注册app

  • 1.2.2. 注册iModel

收到邮件:

1.3. 代码

  • 1.3.1. 下载代码

    git clone git@github.com:imodeljs/imodeljs-samples.git
    

    </code>

    此下载文件中包含3个样例项目(本文指引以simple-viewer-app为例):

  • 1.3.2. 安装

    全局安装rush

    npm install -g @microsoft/rush
    

    安装依赖

    cd imodeljs-samples
    
    rush install
    

    若是多次安装失败,尝试:rush link

  • 1.3.3. 配置

    安装成功后,使用 vscode 打开 simple-viewer-app 项目的环境变量。 如下图设置的参数为注册时的参数: imjs_test_imodel="注册的imodel名称"

    imjs_test_project="注册的imodel名称"

    imjs_backend=1

    imjs_browser_test_client_id="你注册app的Id" </font>

  • 1.3.4. 编译&运行

    配置完保存,进行编译:
    npm run build
    
    编译完成后运行:
    npm run start
    

在本地chrome浏览器中输入:http://localhost:3000 进行访问,显示页面:

点击"open-sample-imodel",即可显示模型

results matching ""

    No results matching ""