npm包 @bentley/presentation-frontend 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着现代Web应用程序及3D建模的普及，前端开发人员需要使用多种工具和框架来构建高质量的用户体验。当涉及到大规模或复杂的项目时，使用基础web技术是不足以满足需求的。这时，npm包再次显示出其优越性。

本文将介绍如何使用npm包 @bentley/presentation-frontend，这是一个用于在前端应用程序中显示BIM模型的库。

什么是 @bentley/presentation-frontend？

@bentley/presentation-frontend是一个基于微服务的BIM数据访问和读取库，其简化了前端应用程序开发的过程。它将BIM工程师在BIM设计工具中的建模数据暴露给前端开发人员以在他们的应用程序中使用。此库内置了许多常见的方法和功能，如：获取元素、搜索元素和属性等。

安装 @bentley/presentation-frontend

@bentley/presentation-frontend可以通过npm来安装。您可以通过以下命令将其添加到项目：

npm install --save @bentley/presentation-frontend

如何使用 @bentley/presentation-frontend？

让我们来创建一个简单的示例。

在react组件中导入 Presentation组件。

import { Presentation } from "@bentley/presentation-frontend";

配置Presentation组件。

Presentation.initialize({
  // 配置 Presentation
}).then(() => {
  // 初始化成功
}).catch((e) => {
  // 初始化失败
  console.log(e);
});

获取模型中的元素。

// 获取单个元素
Presentation.presentation!.rulesets().getContent("MyRuleSet", { imodel, rulesetId, ...});

// 获取多个元素
Presentation.presentation!.rulesets().getContentSet(["MyRuleSet"], { imodel, rulesetId, ...});

上述代码片段中传递了一个名为“ MyRuleSet”的ruleset ID，该ID表示要执行的规则集。在获取内容之前，您需要查找imodel 和 ruleset ID。

渲染元素到屏幕上。

现在我们知道如何获取元素，但如何在页面上呈现这些元素？这取决于引用 Presentation 的UI框架。在下面的示例中，使用了React。

<PresentationTable dataProvider={ content }></PresentationTable>

在这里，PresentationTable 是一个自定义React组件。

结论

@bentley/presentation-frontend 是一个非常强大的npm包，可用于以开发人员友好的方式获取BIM数据。在本文中，我们已经学会了如何安装和使用它。现在，您可以开始使用它在您的项目中使用 BIM 数据了！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/bentley-presentation-frontend