├── README.md ├── code ├── example-common.css ├── parkingManage.js ├── parkingManage.less └── parkingManage.vue └── resources └── img └── view.jpg /README.md: -------------------------------------------------------------------------------- 1 | # 功能介绍 2 | 3 | 基于BIMFACE改变构件颜色的扩展功能,可以直观显示停车场内车库占用的比例情况。基于BIMFACE增加图片标签的扩展功能,同时结合室内定位装置读取的地下车库行人的实时坐标模拟行人的走动,点击行人的标签可以高亮显示对应的车位,实现车位引导的功能。 4 | 5 | # 效果图 6 | ![view](resources/img/view.jpg) 7 | 8 | # 主要逻辑 9 | 10 | 通过BIMFACE服务端API和前端JavaScript API灵活使用构建停车场应用场景。 11 | 12 | ## 逻辑#1 - 构建停车场停车位列表 13 | 14 | 1. 通过调用BIMFACE服务端"获取文件转换的构件列表"API,根据构件类型ID、族和族类型获取"停车位"构件列表: 15 | * "获取文件转换的构件列表"API详见[http://doc.bimface.com/book/restful/articles/api/translate/get-ele-ids.html](http://doc.bimface.com/book/restful/articles/api/translate/get-ele-ids.html?p=doc) 16 | * JAVA-SDK调用示例如下: 17 | ```java 18 | BimfaceClient bimfaceClient = new BimfaceClient(appKey, appSecret); 19 | List elements = bimfaceClient.getElements(fileId, categoryId, family, familyType); 20 | ``` 21 | 2. 通过调用BIMFACE服务端"获取文件转换的构件属性"API,根据fileId、elementId获取构件属性: 22 | * "获取文件转换的构件属性"API详见[http://doc.bimface.com/book/restful/articles/api/translate/get-ele-prop.html](http://doc.bimface.com/book/restful/articles/api/translate/get-ele-prop.html?p=doc) 23 | * JAVA-SDK调用示例如下: 24 | ```java 25 | PropertyBean propertyBean = bimfaceClient.getProperty(fileId, elementId); 26 | ``` 27 | 示例代码段: 28 | ```java 29 | BimfaceClient bimfaceClient = new BimfaceClient("Y3vZC8N79ia7JMNBGNBMYuRnJkf12345", "1TrD4kG3h4X2rc3bHa69abxk6sK12345"); 30 | Long fileId = 1187125317033123L; 31 | List elements = bimfaceClient.getElements(fileId, "-2000151", "车-停车位-基于面", "车-停车位-基于面"); 32 | for (String elementId : elements) { 33 | PropertyBean propertyBean = bimfaceClient.getProperty(fileId, elementId); 34 | 35 | //获取楼层属性 36 | PropertyGroup basicGroup = propertyBean.getProperties().stream().filter(propertyGroup -> propertyGroup.getGroup().equals("基本属性")).findFirst().get(); 37 | String floor = basicGroup.getItems().stream().filter(propertyItem -> propertyItem.getKey().equals("floor")).findFirst().get().getValue().toString(); 38 | 39 | //获取停车位编号属性 40 | PropertyGroup signGroup = propertyBean.getProperties().stream().filter(propertyGroup -> propertyGroup.getGroup().equals("标识数据")).findFirst().get(); 41 | String parkNumber = signGroup.getItems().stream().filter(propertyItem -> propertyItem.getKey().equals("编号")).findFirst().get().getValue().toString(); 42 | 43 | ...... 44 | } 45 | ``` 46 | 通过以上两个API就可以构建出停车位业务数据(停车位楼层、编号、是否停车等),有了相关业务数据可以提供前端随意使用。 47 | 48 | ## 逻辑#2 - 构建停车场人员列表 49 | 50 | 根据真实场景,通过第三方设备实时采集停车场人员信息(人员编号、姓名、实时坐标、对应的停车位等)并提供应用使用。(此示例程序中,通过模拟构造一些人员的实时数据,供前端使用达到人员动态走动和找车位的效果) 51 | 52 | # 前端实现 53 | ## 基本流程 54 | 1. 引用BIMFACE的JavaScript显示组件库 55 | ```javascript 56 | 57 | ``` 58 | 2. 定义DOM元素,用于在该DOM元素中显示模型或图纸 59 | ```javascript 60 |
61 | ``` 62 | 3. 初始化JavaScript显示组件 63 | ```javascript 64 | var options = new BimfaceSDKLoaderConfig(); 65 | options.viewToken = viewToken; 66 | BimfaceSDKLoader.load(options, successCallback, failureCallback); 67 | 68 | function successCallback() { 69 | // 获取DOM元素 70 | var dom4Show = document.getElementById('view3d'); 71 | 72 | // 配置参数 73 | var config = new Glodon.Bimface.Viewer.Viewer3DConfig(); 74 | config.domElement = dom4Show; 75 | 76 | // 创建viewer3D对象 77 | viewer3D = new Glodon.Bimface.Viewer.Viewer3D(config); 78 | 79 | // 添加模型 80 | viewer3D.addView(viewToken); 81 | 82 | // 监听添加view完成的事件 83 | viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function() { 84 | 85 | // 渲染3D模型 86 | viewer3D.render(); 87 | 88 | //调用viewer3D对象的Method,可以继续扩展功能 89 | 90 | }); 91 | } 92 | 93 | function failureCallback(error) { 94 | console.log(error); 95 | }; 96 | ``` 97 | 4. 人的标识处理 98 | 原理就是运用了Bmiface的批注方式,先初始化绘制器,然后在绘制器上打标签。 99 | * 初始化绘制器 100 | ```javascript 101 | var drawaleContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig(); 102 | drawaleContainerConfig.viewer = me.viewer3D; 103 | me.drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawaleContainerConfig); 104 | ``` 105 | * 打标签 106 | ```javascript 107 | me.tagArr = []; 108 | 109 | for(var i=0; i h(App) 13 | }).$mount('#app') 14 | -------------------------------------------------------------------------------- /code/parkingManage.less: -------------------------------------------------------------------------------- 1 | .temp-container { 2 | position: relative; 3 | .side { 4 | width: 200px; 5 | position: absolute; 6 | top:0px; 7 | left:0px; 8 | bottom:0px; 9 | background-color: #fff; 10 | .title { 11 | text-align: center; 12 | line-height:30px; 13 | background-color: #666; 14 | color: #fff; 15 | } 16 | .tab { 17 | height:29px; 18 | background-color: #ddd; 19 | padding: 0 5px; 20 | box-sizing: border-box; 21 | border-bottom: 1px solid #ccc; 22 | a { 23 | float: left; 24 | margin-right: 1px; 25 | display: block; 26 | line-height: 30px; 27 | width:94px; 28 | text-align: center; 29 | color: #333; 30 | &.cur, &:hover { 31 | text-decoration: none; 32 | background-color: #fff; 33 | position: relative; 34 | line-height: 30px; 35 | } 36 | } 37 | } 38 | .list { 39 | width: 200px; 40 | position: absolute; 41 | top:60px; 42 | left:0px; 43 | bottom:70px; 44 | overflow-y: auto; 45 | padding:10px; 46 | box-sizing: border-box; 47 | 48 | dl { 49 | display: none; 50 | &.show { 51 | display: block; 52 | } 53 | } 54 | dt, dd { 55 | padding-left:15px; 56 | line-height: 1.8; 57 | span:hover { 58 | color:#fb8686; 59 | cursor: pointer; 60 | } 61 | } 62 | } 63 | .park-state { 64 | position: absolute; 65 | width: 100%; 66 | bottom:0px; 67 | text-align: center; 68 | background-color: #666; 69 | color: #fff; 70 | line-height: 1.8; 71 | padding:10px 0; 72 | span { 73 | color: #f4645f; 74 | } 75 | } 76 | } 77 | 78 | .main { 79 | position: absolute; 80 | top:0px; 81 | left:200px; 82 | bottom:0px; 83 | right:0; 84 | box-shadow: -2px 2px 4px RGBA(150,152,154,.2); 85 | box-sizing: border-box; 86 | overflow-y: auto; 87 | .person-state { 88 | position: absolute; 89 | width: 100%; 90 | bottom:0px; 91 | line-height: 40px; 92 | background-color: #333; 93 | text-align: center; 94 | color:#fff; 95 | } 96 | .person-state span { 97 | color: #f4645f; 98 | } 99 | } 100 | } 101 | 102 | 103 | #view3d { 104 | position: absolute; 105 | top:0; 106 | left:0; 107 | right:0; 108 | bottom:40px; 109 | background-color: #fff; 110 | } 111 | -------------------------------------------------------------------------------- /code/parkingManage.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 228 | -------------------------------------------------------------------------------- /resources/img/view.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bimface/example-parking/72d06fdd9e5d69180a20ce45456c1f1925205811/resources/img/view.jpg --------------------------------------------------------------------------------