js数组添加数据_当iModel.js遇到CSV数据之一：RPC读取

编者注：

原英文版由Roop Saini发布在Medium.com上，本文由Bentley资深开发工程师 叶萌华(叶子)翻译而成，叶子老师现在主要负责中国iTwin相关平台、产品的开发支持工作，具有丰富的行业应用经验，特别是iTwin数字孪生在中国区落地的项目和产品上。后续，叶子老师将会与大家分享更多此过程中的经验。

iModel.js是Bentley iTwin数字孪生解决方案提供的开源开发工具包，用户可以利用它，既可以在已有数字孪生产品上进行功能拓展，又可以全新开发自己的数据孪生服务应用。CSV是一种简单的结构化序列数据。在本例中，我们将介绍如何利用iModel.js将CSV数据与三维模型连接起来。这是建立智能基础设施最基础的使用，也是数据集成的常规应用，我们将分为三篇介绍，本文为第一篇。

• 当iModel.js遇到CSV数据之一：RPC读取

• 当iModel.js遇到CSV数据之二：定位三维模型

• 当iModel.js遇到CSV数据之三：突出显示数据

以下为叶子老师的翻译。

---

上周我被拽到一堆邮件里，内容是从文件中读取数据并在iModel的视口中展示，我津津有味的看着，结果画风一变后来这帮人开始邮件@我，他们想让我准备个demo，以便可以给用户展示分享一些代码！

行吧，那就开始吧。我们现在有个excel文件，里面有两列，一列是控件的id，一列是控件的状态。

我个人啊，不是很喜欢去解析excel文件，对我来说CSV格式更简单点，老天保佑，excel可以导出为CSV格式。

去掉列名，因为反正他们也不是数据，现在我们得到了csv文件，如下所示

不错不错。接下来，我们要克隆一个iModeljs案例中的simple view App的代码，为了能让他顺利的跑起来我们需要用已知的iModel和project对其进行配置。因为它已经具有展示视口功能，我们只要可以继续扩展它，满足演示的需求就行了。我们的原始模型是这样的：

你肯定想知道这些控件ID是描述的什么玩意，其实是垫圈，管道上那些灰色球球就是。我们想通过文件列表去高亮这些垫圈，并显示它们的状态。

第一步我们得弄清楚的怎么把CSV文件读入这个应用程序。这实际上取决于文件放在那里。如果是在：

1. 前端(客户端)：需要创建文件上传功能并读取。

2. 后端(服务器)：直接读取文件，解析后将其发送到前端。

本例子中，文件存在于服务器上。我们需要获取文件的路径，读取它并将信息送到前端。底该怎么做呢？也许有一个方便iModel.js的API，后端只要调用他，打开文件，读取数据，解析,  返回数据，一气呵成？

你想的美啊，让我们看看到底怎么实现。

iModel.js允许您编写自定义RPC接口。这允许前端直接调用一个异步函数，该函数被转发到后端。

让我们用通过FileReaderRpcInterface来调用函数fetchInfo。我从文档中复制了接口定义的模板，最后得到了以下接口定义：

我们将从前端调用fetchInfo来读取文件数据。现在让我们为这个接口创建一个相应的后端实现。让我们看看……需要做些什么来获得这些数据？

1. 阅读文件-我们可以使用fs库。

2. 解析数据-获取一个数组，数组里每个元素包含一个组件的id和状态。肯定能找到一个干这事的包。

Google了一圈，我找到了csvparse这个库，它可以将csv数据转换成数组，完美。

让我们获取服务器端RPC实现的模板，并编写fetchInfo函数来完成上述任务：

最后一件事是注册我们的RPC。我们可以通过在后端初始化后注册RPC实现类，在后端完成这项工作。就是在iModelHost.startup() 函数之后调用。

在前端，我们只需将PRC接口其添加到rpc.ts文件(支持rpc接口列表)。

 

通过上述操作…终于准备好使用我们的自定义RPC！现在，我们应该从前端哪里去读文件呢？

我觉得在刚打开iModel之后这个时机就不错。现在，我们知道已经有一些数据需要处理。处理的位置是App.tsx下的_onIModelSelected 函数. 让我们在此添加接口调用，编译并运行：

 

拿到了，CSV文件中的数据…

…通过后端API的调用，打开文件，读取数据，解析数据，并返回一个我们可以接着使用的的数组数据。这是我们下一篇文章中，需要介绍的内容，我们将讲解如何通过数组找到模型的三维坐标，以进行数据连接，好了，下次见，我要去吃点好吃的庆祝下，公司旁边新开的“肉夹馍”不错(编者注：叶子是西安人，她认为原作者同样会喜欢肉夹馍)

好了，下次见！欢迎订阅关注！

- END - 

?

感觉不错，请订阅，分享！