如何给建筑模型空间添加标签？

空间添加标签

示例描述与操作指南
示例效果展示
实现步骤

示例描述与操作指南

空间添加标签示例，主要是用于将建筑空间模型的空间结构和它的空间意义关联在一起展示出来。通过调用获取模型空间树列表接口，将模型空间架构展示出来，后在对应结构位置添加相关信息标签。用户将完整代码下载下来后，将模型 id 和用户个人账户 devcode 替换上去，即可展示自有模型。

示例效果展示

实现步骤

第一步获取并创建树结构
通过调用获取模型空间树的接口，获取对应模型树结构并在三维界面左侧展示出来，具体接口在页面下方相关接口中展示。

// 添加左侧树
const initTree = (tree) => {$('#tree').treeview({data: tree,collapseIcon:"glyphicon glyphicon-minus",expandIcon:'glyphicon glyphicon-plus',onNodeSelected: function(event, data) {removeMarker(threeBallMarkers,'test1'); // 移除上次的标签const hightArray = getComponentArrayByButton(data.text);  // 获取当前层级构件数组const starPositionBox = getBoundingBoxByComponents(hightArray); // 获取当前层级包围盒const starPosition = starPositionBox.getCenter(); // 获取当前包围盒位置// 添加三维标签vizbim.addThreeWordMarker({startPosition:starPosition,offsetX:-30000,offsetY:30000,offsetZ:20000,content:data.text,scale:200,id:'test1'},(threeBallMarker) => {threeBallMarkers.add(threeBallMarker);});vizbim.resetScene(false,false,false,true,true,false);vizbim.adaptiveSize(hightArray);vizbim.reverseTransparentObjs(hightArray,0.4,true);},onNodeUnselected: (event, data) => {vizbim.resetScene(true,true,true,true,true,true);}});$('#tree').treeview('collapseAll', { silent: true });
}// 空间树数据初始化
const getLocationTreeNodes = (arr) => {var tree = [];for(var i=0;i < arr.length;i++){var node = {};node.id = arr[i].key;var name = "";switch (arr[i].type) {case "IFCPROJECT" :name = "项目(未命名)";break;case "IfcSite" :name = "场地(未命名)";break;case "IFCBUILDING" :name = "建筑（未命名）";break;case "IFCBUILDINGSTOREY" :name = "楼层(未命名)";break;case "IfcSpace" :name = "空间(未命名)";break;default:name = "构件(未命名)";}node.text=arr[i].name||name;if(arr[i].childrenResultList&&arr[i].childrenResultList.length > 0&&arr[i].childrenResultList[0].childrenResultList){node.nodes=getLocationTreeNodes(arr[i].childrenResultList);} else if(arr[i].childrenResultList&&arr[i].childrenResultList.length === 0){tree.push({text:"该模型无空间划分"});continue;}tree.push(node);}return tree;
};// 获取模型空间树结构
const getSpaceTreeComponents = (filekey) => {return fetch(`${op.baseaddress}models/${filekey}/trees/location?devcode=${op.devcode}`).then(response => response.json())
}//  初始化空间树数据
const initSpaceTreeData = (treeData) => {const array=treeData[0].childrenResultList[0].childrenResultList[0].childrenResultList;array.forEach(item => spaceTreeData[item.name]=item.children.filter(item1 => vizbim.components[item1] !== undefined))return spaceTreeData;
}

第二步获取空间包围区域
获取所选区域的包围盒，在包围盒几何中心点上方，添加标签。

// 传入所选区域的构件数组，返回包围盒
const getBoundingBoxByComponents = (components) => {let box = window.box =new THREE.Box3();// 先将每一个构件的包围盒更新成世界坐标下的包围盒，再融合components.forEach(item => {const boundingBox = vizbim.components[item].geometry.boundingBox;const minArray = [boundingBox.min.x,boundingBox.min.y,boundingBox.min.z,1];const maxArray = [boundingBox.max.x,boundingBox.max.y,boundingBox.max.z,1];const boxMin = compute4MatrixAnd1matrix(vizbim.components[item].matrix.elements,minArray);const boxMax = compute4MatrixAnd1matrix(vizbim.components[item].matrix.elements,maxArray);const boxWorld = new THREE.Box3(new THREE.Vector3(boxMin[0],boxMin[1],boxMin[2]),new THREE.Vector3(boxMax[0],boxMax[1],boxMax[2]))box = box.union(boxWorld);});return box;
}//  计算 4*4矩阵与4*1 向量的数乘,目的是将构件的包围盒的局部坐标更新为世界坐标，用于添加标签
const compute4MatrixAnd1matrix = (Matrix44,Matrix41) =>{let x = 0,y=0,z=0,d=1;if(Matrix44.length === 16 && Matrix41.length ===4){x = Matrix44[0]*Matrix41[0] +  Matrix44[4]*Matrix41[1] +  Matrix44[8]*Matrix41[2] +  Matrix44[12]*Matrix41[3];y = Matrix44[1]*Matrix41[0] +  Matrix44[5]*Matrix41[1] +  Matrix44[9]*Matrix41[2] +  Matrix44[13]*Matrix41[3];z = Matrix44[2]*Matrix41[0] +  Matrix44[6]*Matrix41[1] +  Matrix44[10]*Matrix41[2] +  Matrix44[14]*Matrix41[3];d = Matrix44[3]*Matrix41[0] +  Matrix44[7]*Matrix41[1] +  Matrix44[11]*Matrix41[2] +  Matrix44[15]*Matrix41[3];}return [x,y,z,d];
}

第三步为空间添加标签
利用已经获取的空间包围区域，为选中区域添加三维标签。

// 为选中区域添加三维标签vizbim.addThreeWordMarker({startPosition:starPosition,offsetX:-30000,offsetY:30000,offsetZ:20000,content:data.text,scale:200,id:'test1'},(threeBallMarker)=>{threeBallMarkers.add(threeBallMarker);});vizbim.resetScene(false,false,false,true,true,false);vizbim.adaptiveSize(hightArray);vizbim.reverseTransparentObjs(hightArray,0.4,true);},onNodeUnselected: (event, data)=>{vizbim.resetScene(true,true,true,true,true,true);}});

下载完整代码

如何给建筑模型空间添加标签？相关推荐

TextView文本尾部添加标签，支持自动换行
文章目录 TextView文本尾部添加标签,支持自动换行需求使用SpannableStringBuilder + ImageSpan实现代码实现参考 TextView文本尾部添加标签,支持自动 ...
iOS 仿微信灵活添加标签
iOS 仿微信灵活添加标签原作者的github 地址喜欢的点赞 https://github.com/DreamFlyingCow/TTTags 效果如下,iOS 13 访问私有属性会崩溃,自己 ...
安卓java代码标签_Android实现动态添加标签及其点击事件
在做Android开发的时候,会遇到动态添加标签让用户选择的功能,所以自己写了个例子,运行效果图如下. 标签可以左右滑动进行选择,点击的时候,会弹出toast提示选择或者取消选择了哪个标签.通过动态添 ...
R语言图形用户界面数据挖掘包Rattle：加载UCI糖尿病数据集、并启动Rattle图形用户界面、数据集变量重命名，为数据集结果变量添加标签、数据划分（训练集、测试集、验证集）、随机数设置
R语言图形用户界面数据挖掘包Rattle:加载UCI糖尿病数据集.并启动Rattle图形用户界面.数据集变量重命名,为数据集结果变量添加标签.数据划分(训练集.测试集.验证集).随机数设置目录
Python使用matplotlib可视化发散棒棒糖图、发散棒棒糖图可以同时处理负值和正值、并按照大小排序区分数据、为发散棒棒糖图的特定数据点添加标签、自定义背景填充色、自定义数据点颜色
Python使用matplotlib可视化发散棒棒糖图.发散棒棒糖图可以同时处理负值和正值.并按照大小排序区分数据.为发散棒棒糖图的特定数据点添加标签.自定义背景填充色.自定义数据点颜色(Diverg ...
R语言可视化散点图（scatter plot）图、为图中的部分数据点添加标签、ggrepel包来帮忙
R语言可视化散点图(scatter plot)图.为图中的部分数据点添加标签.ggrepel包来帮忙目录
R语言可视化、编写自定义函数可视化水平排序条形图（horizontal bar plot）、自定义图像布局模仿经济学人杂志可视化效果、右侧添加标签数值图像方框、自定义背景色、水平条形图中间线条等
R语言可视化.编写自定义函数可视化水平排序条形图(horizontal bar plot).自定义图像布局模仿经济学人杂志可视化效果.右侧添加标签数值图像方框.自定义背景色.水平条形图中间线条.网格线 ...
R语言ggplot2可视化：在可视化结果图的四个角落（左上、左下、右上、右下）添加标签实战
R语言ggplot2可视化:在可视化结果图的四个角落(左上.左下.右上.右下)添加标签实战目录
R语言ggplot2可视化绘制分组水平并行条形图（bar plot）并为条形图内添加标签
R语言ggplot2可视化绘制分组水平并行条形图(bar plot)并为条形图内添加标签目录