├── 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<String> 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<String> 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 | <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
 57 | ```
 58 | 2. 定义DOM元素，用于在该DOM元素中显示模型或图纸
 59 | ```javascript
 60 | <div id="view3d"></div>
 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<res.data.length; i++){
110 |     var imageConfig = new Glodon.Bimface.Plugins.Drawable.ImageConfig();
111 |       //设置图片路径
112 |       imageConfig.src = me.img_other;
113 |       //设置图片坐标
114 |       imageConfig.worldPosition = res.data[i];
115 |       //创建标签
116 |       var tag = new Glodon.Bimface.Plugins.Drawable.Image(imageConfig);
117 |       //判断该标签是否当前用户
118 |       if(tag.worldPosition.name == me.user){
119 |         tag.setSrc(me.img_cur);
120 |         me.user = tag.worldPosition.name;
121 |         me.parkNum = tag.worldPosition.parkNumber;
122 |       };
123 |       tagArr.push(tag);
124 |       //对标签的点击做相应处理
125 |       tag.onClick(function(){
126 |         var isClick = (this.getSrc()==me.img_other);
127 |         for(var i=0; i<me.tagArr.length;i++){
128 |           me.tagArr[i].setSrc(me.img_other);
129 |         }
130 |         if(isClick){
131 |           this.setSrc(me.img_cur);
132 |           me.user = this.worldPosition.name;
133 |           me.parkNum = this.worldPosition.parkNumber;
134 |           me.parkPoint(this.worldPosition.parkId);
135 |         } else {
136 |           this.setSrc(me.img_cur);
137 |         }
138 |       })
139 |   }
140 |   me.drawableContainer.addItems(me.tagArr);
141 |   ```
142 | 5. 调用API方法
143 |   * overrideComponentsColorById(objectIds, color) 改变构件颜色（用于停车位设置高亮）
144 |   * restoreComponentsColorById(objectIds) 恢复构件颜色（重置停车位）
145 |   * isolateComponentsByObjectData(conditions, state) 根据筛选条件隔离构件 （用于在初始化模型时候将停车场按楼层单独隔离显示）
146 |   * clearIsolation() 清楚隔离 （楼层切换时候先恢复到初始状态）
147 | 
148 | 
149 | ps. 该Demo基于vue+webpack进行开发打包，如用jquery/React实现同上。
150 | 
151 | 参考API：[http://doc.bimface.com/book/js/articles/basic/index.html](http://doc.bimface.com/book/js/articles/basic/index.html)
152 | 
153 | # 查看示例
154 | 
155 | [http://bimface.com/example/park](http://bimface.com/example/park)
156 | 


--------------------------------------------------------------------------------
/code/example-common.css:
--------------------------------------------------------------------------------
  1 | a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   border: 0
  5 | }
  6 | 
  7 | html {
  8 |   -webkit-text-size-adjust: none
  9 | }
 10 | 
 11 | body {
 12 |   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
 13 |   font-size: 14px;
 14 |   line-height: 1.5;
 15 |   color: #333;
 16 |   background-color: #eee
 17 | }
 18 | 
 19 | img {
 20 |   outline: none;
 21 |   vertical-align: middle
 22 | }
 23 | 
 24 | nav,ol,ul {
 25 |   list-style: none
 26 | }
 27 | 
 28 | a {
 29 |   color: #4a90e2;
 30 |   text-decoration: none;
 31 |   outline: none
 32 | }
 33 | 
 34 | table {
 35 |   border-collapse: collapse
 36 | }
 37 | 
 38 | input,select {
 39 |   border: 0 none;
 40 |   vertical-align: middle;
 41 |   outline: none
 42 | }
 43 | 
 44 | a:hover {
 45 |   text-decoration: underline
 46 | }
 47 | 
 48 | .clearfix:after {
 49 |   content: " ";
 50 |   display: block;
 51 |   height: 0;
 52 |   clear: both
 53 | }
 54 | 
 55 | .clearfix {
 56 |   zoom:1}
 57 | 
 58 | .bg {
 59 |   background: #fff;
 60 |   min-width: 1200px
 61 | }
 62 | 
 63 | .w1200 {
 64 |   width: 1200px;
 65 |   margin: 0 auto
 66 | }
 67 | 
 68 | header {
 69 |   height: 55px;
 70 |   line-height: 55px;
 71 |   padding:0 20px;
 72 |   background-color: #2c2c2c;
 73 | }
 74 | header .logo {
 75 |   float: left;
 76 |   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAeCAYAAACrI9dtAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAMsSURBVHjazJhfiExRHMfvXHfIlGWLJxIRngghpbSSUto8eNiUv0nJn13bZkditlWGstYmD2rKn0QoacN6Ex7EavEiK9tu2Igte5c2/3b4/up38vPrnLsz5Rq/+jQz55x7z+eeOef8zkyi/EXbZs/zmkGZ9zvOgtVgrCh7CA6CBLefJuqegn6wVJT1gjR4DTKgwvszFoDHH2esHFLlns8d7AYDnjtIqA3UgQbQAroi2vfyAxwDm6hzcFu1WQXOYVBG2KTKhhEzQhn+TDc5HiFmhE6AkVxW6xBbaxPz+dUlpoXkdTYxKZRU1xQs5otKKRaCBw4hm9hL8CZCqCixBN6cUQ1CvvlUsF3VPQcpMFmU0UQ9DL6A/eIroxgEHWCJus9pUM6LScYVTPwbJNWvKmiE9qHykRdjoN9ZeDkElqmq2T4ve0MnuA92ePFHFejmkZQOvl/ApI4zrHPML6GQU8wvsZBVLOCVRjv1HbXK4o4e1ed8cBK8DziXjeGd2kQqYtVcwstMtYXQQ/0EWTBB1H3ip69UW0gDly8Gi0TdcnA14A2zhTdCM8eeRDwhCc3h9wO82R4FX0ErOADGC+Eu0T4ParjP8+AtX7eQp9EeStA+Z/tqbpwvYviNUDMvZdo0m0Aj6LO0N0LV4oSR4fl8CqyAUChXX7FiUkgeeZIOMZuQJ8R6jJDOfVJsKEIodAjZxD7wvVxCJrKYq2nzIeADmgw6qO2NkKrjOdQtyjp5Uo8TZevALk7WtAA+q77eqc9VEHuGEWsN+MQog1bRD5cRLmpXJ8xCYo1lFW+09D0K5alAddDHw04jtTXmfWqK6ptOqdtAu28RalLHj38RJDTXnON9i1CylEJG6r8SMlJpPjEO8nIP+X3ccZlPt/NEv0Q+4LP1TXVBR0Tua/wLx+GLYDRvwtfUcfgVSdVzftqiLsw5vCotuSzLUvfUD4eQk/sGdV/q864qvwBuma+vgnfaXJHDL1PHdDCJR2on+O64Jsd96V/LJLTe/Fo2q69YMVcumxghVpCQzn2Fig2Xy6TYt2KFTO7zlBjFkQipBssfHC6xWk7K9Rah664/OH4JMABZFx2zEE4mHQAAAABJRU5ErkJggg==) no-repeat 0 13px;
 77 |   width: 50px;
 78 |   height: 50px;
 79 | }
 80 | header h2 {
 81 |   float: left;
 82 |   font-weight: normal;
 83 |   color:#fff;
 84 |   font-size: 18px;
 85 | }
 86 | header h2 i {
 87 |   display: inline-block;
 88 |   margin-left:20px;
 89 |   background-color: #f60;
 90 |   color:#fff;
 91 |   padding:4px 5px;
 92 |   border-radius: 3px;
 93 |   font-size: 12px;
 94 |   font-weight: normal;
 95 |   line-height: 12px;
 96 |   font-style: normal;
 97 | }
 98 | header .btn-box {
 99 |   float:right;
100 | }
101 | header .btn-box .btn {
102 |   text-align: right;
103 |   margin-left:10px;
104 | }
105 | header .back {
106 |   float: right;
107 |   line-height: 55px;
108 |   color: #11dab7;
109 | }
110 | 
111 | 
112 | footer {
113 |   background-color: #2c2c2c;
114 |   min-width: 1200px
115 | }
116 | footer .copyright {
117 |   line-height: 50px;
118 |   font-size: 14px;
119 |   text-align: center;
120 |   color: #999
121 | }
122 | 
123 | footer .copyright a {
124 |   color: #11dab7
125 | }
126 | 
127 | .btn {
128 |   display: inline-block;
129 |   text-align: center;
130 |   border: none;
131 |   border-radius: 3px;
132 |   outline: none;
133 |   box-sizing: border-box;
134 |   cursor: pointer
135 | }
136 | 
137 | .btn,.btn:hover {
138 |   text-decoration: none
139 | }
140 | 
141 | .btn.btn-primary {
142 |   background: #11dab7;
143 |   color: #fff
144 | }
145 | 
146 | .btn.btn-primary:hover {
147 |   background: #0feac3
148 | }
149 | 
150 | .btn.btn-default {
151 |   background: transparent;
152 |   color: #32d3a6;
153 |   border: 1px solid #32d3a6;
154 | }
155 | 
156 | .btn.btn-default:hover {
157 |   color: #0feac3;
158 |   border: 1px solid #0feac3
159 | }
160 | 
161 | .btn.btn-disable {
162 |   background: #eee;
163 |   cursor: default
164 | }
165 | 
166 | .btn.btn-disable,.btn.btn-disable:hover {
167 |   color: #ccc;
168 |   border: 1px solid #ccc
169 | }
170 | .btn.btn-yellow {
171 |   background: #f99d0b;
172 |   color: #fff
173 | }
174 | 
175 | .btn.btn-yellow:hover {
176 |   background: #e99002
177 | }
178 | .btn.btn-sm {
179 |   padding: 0 20px;
180 |   line-height: 28px
181 | }
182 | 
183 | .btn.btn-md {
184 |   width: 120px;
185 |   height: 40px;
186 |   line-height: 40px
187 | }
188 | 
189 | .btn.btn-big {
190 |   font-size: 20px;
191 |   width: 280px;
192 |   height: 60px;
193 |   line-height: 60px
194 | }
195 | 
196 |   /* Let's get this party started */
197 | ::-webkit-scrollbar {
198 |   width: 8px;
199 |   height:8px;
200 |   position: relative;
201 | }
202 | /* Track */
203 | ::-webkit-scrollbar-track {
204 |   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
205 |   -webkit-border-radius: 4px;
206 |   border-radius: 6px;
207 | }
208 | /* Handle */
209 | ::-webkit-scrollbar-thumb {
210 |   -webkit-border-radius: 6px;
211 |   border-radius: 6px;
212 |   background: rgba(204,204,204,0.4);
213 |   -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
214 | }
215 | ::-webkit-scrollbar-thumb:window-inactive {
216 |   background: rgba(204,204,204,0.3);
217 | }
218 | 
219 | .container {
220 |   overflow: hidden;
221 |   position: relative;
222 | }
223 | 


--------------------------------------------------------------------------------
/code/parkingManage.js:
--------------------------------------------------------------------------------
 1 | import 'babel-polyfill'
 2 | import 'es6-promise/auto'
 3 | 
 4 | import Vue from 'vue'
 5 | import axios from 'axios'
 6 | import App from './parkingManage.vue'
 7 | 
 8 | Vue.prototype.$http = axios;
 9 | 
10 | const app = new Vue({
11 |     el: '#app',
12 |     render: h => 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 | <template>
  2 |   <div id="app">
  3 |     <header>
  4 |       <a href="#" class="logo"></a>
  5 |       <h2>基于BIM智慧停车的室内定位示例<i>官方示例</i></h2>
  6 |       <div class="btn-box">
  7 |         <a href="https://github.com/bimface/example-parking" target="_blank" class="btn btn-sm btn-primary">源代码</a>
  8 |       </div>
  9 |     </header>
 10 | 
 11 |     <section class="temp-container" :style="{'height':cHeight + 'px'}">
 12 |       <!--左侧导航-->
 13 |       <section class="side">
 14 |         <div class="title">停车位列表</div>
 15 |         <div class="tab">
 16 |           <a href="javascript:void(0)" v-for="(item,i) in tree" :class="{'cur':isFloor == item.floor}" @click="tab(item.floor)">{{item.floor}}</a>
 17 |         </div>
 18 |         <div class="list" v-if="tree">
 19 |           <dl v-for="(item,i) in tree" :class="{'show':isFloor == item.floor}">
 20 |             <dt v-for="park in item.exampleParkList" @click="showPark(park.elementId)"><span>{{park.parkNumber}}</span></dt>
 21 |           </dl>
 22 |         </div>
 23 |         <div class="park-state">
 24 |           停车位：{{total}}<br />
 25 |           已停车位：<span>{{employ}}</span>
 26 |         </div>
 27 |       </section>
 28 | 
 29 |       <!--主内容区域-->
 30 |       <section class="main">
 31 |         <div id="view3d"></div>
 32 |         <div class="person-state">
 33 |           车库当前人数：<span>{{personSum}}</span>人
 34 |           <template v-if="user">，当前用户：<span>{{user}}</span></template>
 35 |           <template v-if="parkNum">，车位：<span>{{parkNum}}</span></template>
 36 |         </div>
 37 |       </section>
 38 |     </section>
 39 | 
 40 |     <footer>
 41 |       <div class="w1200">
 42 |         <div class="copyright">
 43 |           Copyright ©2016-2020 <a href="//bimface.com" target="_blank">BIMFACE</a> 京ICP备10021606号-19 <a href="http://www.glodon.com/" target="_blank">广联达</a>旗下产品
 44 |         </div>
 45 |       </div>
 46 |     </footer>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 |   import Vue from 'vue'
 52 |   import './example-common.css'
 53 |   import './parkingManage.less'
 54 | 
 55 |   export default {
 56 |     data(){
 57 |       return {
 58 |         cHeight:null,
 59 |         tree:null,
 60 |         total:0,
 61 |         employ:0,
 62 |         personSum:0,
 63 |         user:null,
 64 |         parkNum:null,
 65 |         viewer3D:null,
 66 |         parkHighArr:[],
 67 |         parkEmploy:[],
 68 |         drawableContainer:null,
 69 |         tagArr: [],
 70 |         img_cur:'http://resource.bimface.com/developer/images/user_cur.png',
 71 |         img_other:'http://resource.bimface.com/developer/images/user_other.png',
 72 |         isFloor:"-1F",
 73 |         interval:null
 74 |       }
 75 |     },
 76 | 
 77 |     mounted(){
 78 |       var me = this;
 79 | 
 80 |       me.cHeight = document.documentElement.clientHeight - 105;
 81 | 
 82 |       me.$http.get('//bimface.com/api/console/share/preview/viewtoken?token=8d21e764').then((res)=>{
 83 |         if(res.data.code == 'success'){
 84 |           var viewToken = res.data.data;
 85 | 
 86 |           var options = new BimfaceSDKLoaderConfig();
 87 |           options.viewToken = viewToken;
 88 |           BimfaceSDKLoader.load(options, successCallback, failureCallback);
 89 | 
 90 |           function successCallback() {
 91 |             // 获取DOM元素
 92 |             var dom4Show = document.getElementById('view3d');
 93 | 
 94 |             // 配置参数
 95 |             var config = new Glodon.Bimface.Viewer.Viewer3DConfig();
 96 |             config.domElement = dom4Show;
 97 | 
 98 |             // 创建viewer3D对象
 99 |             me.viewer3D = new Glodon.Bimface.Viewer.Viewer3D(config);
100 | 
101 |             // 添加模型
102 |             me.viewer3D.addView(viewToken);
103 | 
104 |             // 监听添加view完成的事件
105 |             me.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function() {
106 | 
107 |               me.$http.get('//bimface.com/example/park/all').then((res) => {
108 |                 me.tree = res.data;
109 |                 me.tree.forEach(function(fun){
110 |                   me.total += fun.exampleParkList.length;
111 |                 })
112 |               })
113 | 
114 |               me.viewer3D.isolateComponentsByObjectData([{"levelName":'-1F'}],Glodon.Bimface.Viewer.IsolateOption.HideOthers);
115 | 
116 |               me.$http.get('//bimface.com/example/park/list?valid=false').then((res)=>{
117 |                 me.employ = res.data.length;
118 |                 res.data.forEach(function(fun){
119 |                   me.parkEmploy.push(fun.elementId);
120 |                 });
121 |                 let parkEmployColor = new Glodon.Web.Graphics.Color(255,0,0,0);
122 |                 me.viewer3D.overrideComponentsColorById(me.parkEmploy,parkEmployColor);
123 |               })
124 | 
125 |               // 渲染3D模型
126 |               me.viewer3D.render();
127 | 
128 |               var drawaleContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
129 |               drawaleContainerConfig.viewer = me.viewer3D;
130 |               me.drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawaleContainerConfig);
131 | 
132 |               me.showPerson();
133 | 
134 |             });
135 |           }
136 | 
137 |           function failureCallback(error) {
138 |             console.log(error);
139 |           };
140 |         }
141 |       })
142 | 
143 |     },
144 | 
145 |     methods: {
146 |       tab: function(floor){
147 |         var me = this;
148 |         if(floor !== this.isFloor){
149 |           me.resetView();
150 |           me.viewer3D.clearIsolation();
151 |           me.viewer3D.isolateComponentsByObjectData([{"levelName":floor}],Glodon.Bimface.Viewer.IsolateOption.HideOthers);
152 |           me.viewer3D.render();
153 |           me.isFloor = floor;
154 | 
155 |           me.tagArr = [];
156 |           me.user = null;
157 |           me.parkNum = null;
158 |           me.drawableContainer.clear()
159 |           me.showPerson();
160 |         }
161 |       },
162 |       showPark:function(parkId){
163 |         for(var i=0; i<this.tagArr.length;i++){
164 |           this.tagArr[i].setSrc(this.img_other);
165 |         }
166 |         this.user = null;
167 |         this.parkNum = null;
168 |         this.parkPoint(parkId);
169 |       },
170 | 
171 |       parkPoint:function(parkId){
172 |         this.resetView();
173 |         this.parkHighArr.push(parkId);
174 |         let highColor = new Glodon.Web.Graphics.Color(255,255,0,0);
175 |         this.viewer3D.overrideComponentsColorById(this.parkHighArr,highColor);
176 |         this.viewer3D.render();
177 |       },
178 | 
179 |       showPerson: function(){
180 |         var me = this;
181 |         me.$http.get('//bimface.com/example/park/user').then((res)=>{
182 |           //创建DrawableContainer
183 |           me.tagArr = [];
184 | 
185 |           for(var i=0; i<res.data.length; i++){
186 |             if(res.data[i].floor == me.isFloor){
187 |               var imageConfig = new Glodon.Bimface.Plugins.Drawable.ImageConfig();
188 |               imageConfig.src = me.img_other;
189 |               imageConfig.worldPosition = res.data[i];
190 |               var tag = new Glodon.Bimface.Plugins.Drawable.Image(imageConfig);
191 |               if(tag.worldPosition.name == me.user){
192 |                 tag.setSrc(me.img_cur);
193 |                 me.user = tag.worldPosition.name;
194 |                 me.parkNum = tag.worldPosition.parkNumber;
195 |               };
196 |               me.tagArr.push(tag);
197 |               tag.onClick(function(){
198 |                 var isClick = (this.getSrc()==me.img_other);
199 |                 for(var i=0; i<me.tagArr.length;i++){
200 |                   me.tagArr[i].setSrc(me.img_other);
201 |                 }
202 |                 if(isClick){
203 |                   this.setSrc(me.img_cur);
204 |                   me.user = this.worldPosition.name;
205 |                   me.parkNum = this.worldPosition.parkNumber;
206 |                   me.parkPoint(this.worldPosition.parkId);
207 |                 } else {
208 |                   this.setSrc(me.img_cur);
209 |                 }
210 |               })
211 |             }
212 |           }
213 |           me.drawableContainer.addItems(me.tagArr);
214 |           me.personSum = res.data.length;
215 |         })
216 |       },
217 | 
218 |       resetView: function(){
219 |         this.viewer3D.restoreComponentsColorById(this.parkHighArr);
220 |         let parkEmployColor = new Glodon.Web.Graphics.Color(255,0,0,0);
221 |         this.viewer3D.overrideComponentsColorById(this.parkEmploy,parkEmployColor);
222 |         this.viewer3D.render();
223 |         this.parkHighArr = [];
224 |       }
225 |     }
226 |   }
227 | </script>
228 | 


--------------------------------------------------------------------------------
/resources/img/view.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bimface/example-parking/72d06fdd9e5d69180a20ce45456c1f1925205811/resources/img/view.jpg


--------------------------------------------------------------------------------