WEBGIS开发 模型抽拉效果实现 Cesium EarthSDK
项目场景:最近一直在学习CesiumLab工具的使用,除了原生的Cesium以外,顺带也学习了一下CesiumLab出的EarthSDK库,这个库用了一下发现也十分的好用,封装了很多效果可以直接调用,并且Cesium中的原生API都可以直接调用,持续学习中。。。如果一个复杂结构的模型需要在页面中展示,我们常常需要查看楼宇的某一个楼层内的情况,常见的处理方式是将此楼层从楼宇中“抽拉”出来,或者将此楼
项目场景:
最近一直在学习CesiumLab工具的使用,除了原生的Cesium以外,顺带也学习了一下CesiumLab出的EarthSDK库,这个库用了一下发现也十分的好用,封装了很多效果可以直接调用,并且Cesium中的原生API都可以直接调用,持续学习中。。。
如果一个复杂结构的模型需要在页面中展示,我们常常需要查看楼宇的某一个楼层内的情况,常见的处理方式是将此楼层从楼宇中“抽拉”出来,或者将此楼层以外的其他楼层做透明处理,其实现方法都差不多,在EarthSDK中我们可以通过修改3DTiles模型的样式来实现此类效果。
实现思路
通过CesiumLab处理后的3DTiles模型会输出一个scenetree.json文件,此文件描述了整个模型的层级结构,其结构在建模时就应是按照对象层级的概念规划设计好的,如一个园区是第一层级,每个楼宇是第二层级,每一层楼是第三层级这样的结构来设计建模,处理好的模型每一层都有一个唯一的ID值,在开发中可以通过根据ID值操作修改模型的样式。
用CesiumLab处理后的scenetree.json结构如图所示:
如上图所示,scenetree.json的E楼拥有一个唯一的ID值,同时它的children里包含的就是它的子节点,如E楼的第一层,第二层等。子节点也拥有唯一值ID,我们实现抽拉效果就是通过获取ID值后设置其样式来实现的。
以一个BIM模型为例,我们处理好的模型如图:
在EarthSDK的earth.scenetree.root.children场景结构树中获取到这个3DTiles的czmlObject,并绑定到this._tileset上,然后执行以下代码:
此时的construct为一个数组,例如:
[["${id} ===‘6c8349cc7260ae62e3b1396831a8398f’",“vec3(0,0,1)”],[“true”,“vec3(0,0,0)”]]
含义为id为6c8349cc7260ae62e3b1396831a8398f的模型结构,在三个方向上各平移多少距离,[“true”,“vec3(0,0,0)”]为其余的默认节点模型,不做偏移处理,保持原来位置不变。
但是我在使用过程中,发现用EarthSDK根据id值去修改模型样式只能通过获取模型scenetree.json的最下层的子节点才有效果,比如说如果模型的某一层还有子节点(桌椅板凳、天花板、地板等子结构),我们是需要获取最底层的模型结构的id全部添加到construct中去,然后统一的去做偏移处理的,而直接获取某一层的id值去抽拉,是实现不了效果的。
运用此方法,我们还可以根据id值、name值、高度值等等去修改模型的颜色、透明度、样式等等。

GitCode 天启AI是一款由 GitCode 团队打造的智能助手,基于先进的LLM(大语言模型)与多智能体 Agent 技术构建,致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话,还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力,真正做到“一句话,让 Al帮你完成复杂任务”。
更多推荐
所有评论(0)