You are currently reviewing an older revision of this page.
iModel.js Front-End简介 iModel.js应用程序的前端主要与数据显示和用户交互有关,其以TypeScript实现。前端代码始终在网络浏览器中运行,通过向后端发出请求来访问iModel中的数据。 支持在浏览器网页应用,桌面应用,移动应用。 应用程序的前端脚本需要@ bentley / imodeljs-frontend npm软件包。通用软件包也将是必需的。这些软件包提供前端所需的以下功能: 1. 登录并获取AccessToken。 2. 打开与iModel的“连接”,类似于数据库连接。 3. 通过IModelApp类进行前端应用程序的管理。 4. 字符串和用户界面的本地化工作。 5. 编写用于处理用户事件的工具。通过RpcInterface与后端通信。 6. 显示iModel的视图。 7. 在iModels上执行ECSQL查询。 8. 存储应用程序,项目和iModel的设置。 9. 实施扩展。 iModel.js Front-End核心接口 Front-End主要包含2个核心接口:IModelApp和IModelConnection。其中,IModelApp主要负责前端界面管理与交互工作,IModelConnection主要负责与后端数据的请求与查询等工作。 IModelApp IModelApp如下所示: IModelConnection IModelConnection如下所示: 其中IModelConnection是一个抽象类,我们根据需要使用其适当的子类。 注意:IModelConnection类层次与后端的IModelDb类层次是相互对应的。 其中,IModelConnection包含如下数据类接口: 严格而言,这里的数据集合不是指真正意义上的数据集合,因为其只是包含了操作查询数据的API,而不是包含真正的数据。不过,其概念上是一致的,因此,在此处使用集合一词。 关于ViewManager ViewManager是iModel.js Front-End最重要的类之一,大部分开发工作都是围绕着该类展开,有关更多了解,请参考前端WebGL的渲染帧循环。 ViewManager包含已打开视图的列表以及当前选定的视图,其还提供有关视图打开/关闭/挂起/继续的更多的操作,有关更多了解,请参考前端API文档,此处,只是简单介绍一下相关的数据结构。 从上图可以清晰的看出,ViewManager包含一个Viewport(视口)集合和一个Decorator(集合),其中每个Decorator会应用于所有的Viewport,Decorator是一个抽象类,更多的时候是由用户根据需要去实现其子类,然后将子类对象添加到ViewManager中,从而在下一帧循环中,出现在每个视口中。 每个Viewport(视口)都包含一个ViewState,ViewState包含Viewport显示的内容,样式等诸多内容,例如,该视口要显示的模型,背景色,网格,阴影等设置。我们一般通过Viewport提供的API设置其视口的属性(这些动作将转发给Viewport),而不是直接操作ViewState,以保证视口内容的同步。注意,ViewState类对应于后端的ViewDefinition。 其中ViewState是一个抽象类,将会根据视口内容2D,3D等而选择使用合适的子类。 其中ViewState类层次如下所示: 类 描述 ViewState ViewDefinition元素的前端状态。 ViewState通常与Viewport关联以在屏幕上显示视图的内容。 ViewState2d 定义单个2D模型的视图状态。 ViewState3d 定义3D模型视图的状态。 SpatialViewState 定义一个或多个SpatialModels的视图。查看的模型列表存储在ModelSelector中。 DrawingViewState DrawingModel的视图 SheetViewState SheetModel的视图 OrthographicViewState 定义使用平行正投影在图像平面上显示几何图形的空间视图。