SuperMap iClient3D for WebGL模型炸开
作者 Kele
前言
在三维项目中，BIM模型是非常常见的数据格式，BIM分层、BIM爆炸查看内部结构是三维系统常见的功能。对于BIM爆炸，我想大家都知道其实现原理是控制构件的偏移，然而要实现各个构件向四周发散型的爆炸效果，各个构件的偏移方向及偏移量该如何计算呢，接下来我向大家提供一种新的思路
一、实现思路
实现模型爆炸的核心接口是模型偏移，setBatchObjsTranslate
实现模型向四周爆炸效果，那么每个模型构建的偏移方向、偏移距离都会不同，我们按以下步骤实现
1.获取整个图层中心点
2.获取各个构建中心点
3.计算各个构建的偏移方向和偏移距离
4.实现偏移
二、数据准备
1.获取各个构建中心点
坐标系选择wgs84，该方法只能获取模型构建xy坐标，接下来获取模型构建z坐标
通过模型属性提取，获得最大最小高度，再通过计算平均值得到中心点z值（顶部高程 + 底部高程）/ 2，记得提前建好字段来保存z值
这样，我们就获取到各个构建的中心点坐标了
由于后面我们会通过数据服务查询的方式获取这些坐标，为了使查询更快，我们将模型的属性信息单独存为属性表，查询数据的时候查询这个属性表
2.模型数据生成缓存
将模型数据集添加到场景，保存场景，对场景生成缓存
缓存成功后，打开生成的工作空间，将数据源添加进来，确保当前工作空间有数据源和场景
发布数据服务和三维服务
三、WebGL实现步骤
1.获取图层中心点
function getLayerCenterPos() {building = viewer.scene.layers.find('楼板_办公楼__@DatasourceYYD007');if(building){let cartographic = Cesium.Cartographic.fromCartesian(building._position);let longitude = Cesium.Math.toDegrees(cartographic.longitude);let latitude = Cesium.Math.toDegrees(cartographic.latitude);let height = cartographic.height;let layerCenterPos = Cesium.Cartesian3.fromDegrees(longitude,latitude,height);return layerCenterPos}
}
2.获取构建中心点
构建中心点坐标我们已经在上面处理好了，现在通过查询数据服务获取
function modelTranslate(layerCenterPos) {let sqlParameter = {toIndex: -1,datasetNames: ["DatasourceYYD007:info"],getFeatureMode: "SQL",queryParameter: {attributeFilter: "smid>=0"}};let url = dataUrl;let queryData = JSON.stringify(sqlParameter);$.ajax({type: "post",url: url,data: queryData,success: function (result) {let resultObj = JSON.parse(result);for(let item of resultObj.features){//构件中心点let center = Cesium.Cartesian3.fromDegrees(Number(item.fieldValues[12]),Number(item.fieldValues[13]),Number(item.fieldValues[14]));}},error: function (msg) {console.log(msg);},})
}
3.通过图层中心点和各个构建中心点，计算偏移参数
//将图层中心点变换成4*4矩阵
let transform = Cesium.Transforms.eastNorthUpToFixedFrame(layerCenterPos);
let inverseTransform = Cesium.Matrix4.inverseTransformation(transform, {});
//计算图层中心点矩阵与构建中心点乘积，得到变换矩阵
Cesium.Matrix4.multiplyByPoint(inverseTransform, center, center);
//计算图层中心点与构建中心点距离
let distance = Cesium.Cartesian3.magnitude(center);
oExplode.directions.push(Cesium.Cartesian3.clone(center));
Cesium.Cartesian3.normalize(center, center);
oExplode.distances.push(distance);
oExplode.directions_normalize.push(center);
oExplode.ids.push(Number(item.fieldValues[0]));
4.执行偏移
Cesium.knockout.track(viewModel);
let toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout.getObservable(viewModel, 'scale').subscribe(function (newValue) {let option = {};for (let i = 0; i < oExplode.ids.length; i++) {let currentTranslate = new Cesium.Cartesian3(//新偏移量 = 原始偏移量*偏移比例*输入偏移值oExplode.directions_normalize[i].x * oExplode.scale[i] * newValue,oExplode.directions_normalize[i].y * oExplode.scale[i] * newValue,oExplode.directions_normalize[i].z * oExplode.scale[i] * newValue);option[i] = currentTranslate}building.setBatchObjsTranslate(option)}
);
四、效果展示
小提示：偏移接口底层优化过，需要结合最新WebGL包使用，demo和包获取地址：
链接：https://pan.baidu.com/s/15MDsElNVFaiTfkK5XZ6j5A
提取码：6655
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！