700字范文 > SuperMap iClient3D for WebGL之BIM模型爆炸

SuperMap iClient3D for WebGL之BIM模型爆炸

时间：2024-01-04 12:33:56

作者：nannan

IT技术的飞速迅猛发展，深刻而长远地影响了BIM与GIS两个领域。SuperMap基于HTML5WebGL技术，推出了轻量级三维客户端，这样无须安装软件、无须安装插件、无须下载数据，就可以在浏览器上高效浏览三维服务，并通过开源的S3M规范支持实用的三维空间查询、量算以及空间分析等功能。其中BIM模型爆炸是BIM+GIS应用的迫切需求，它可以清晰的分辨出内部BIM模型构件。今天，它来了。请先看炫酷的效果图：

一、接口介绍

（1）S3MTilesLayer.setObjsTranslate(ids,translate)，输入要偏移的对象id数组，和指定偏移量。

（2）S3MTilesLayer.removeObjsTranslate(ids)，移除指定ids对象的偏移。

（3）S3MTilesLayer.removeAllObjsTranslate()，移除所有对象的偏移。

二、数据准备

将BIM模型通过插件导入supermap idesktop，生成多个模型数据集，进行批量生成模型缓存操作生成一个.scp配置文件。在iserver上发布数据服务和三维服务。（注意：如果想每个构件设置不同的方向爆炸，需要在属性表里新建字段进行记录，方便前端查询获取）本篇博客使用的是范例数据url=“/realspace/services/3D-BIMbuilding/rest/realspace”

三、代码实现

(1)加载含BIM模型的场景，获取BIM的s3m图层。

var promise = scene.open(URL_CONFIG.SCENE_BIMBUILDING);Cesium.when(promise, function(layers) {//设置相机位置、方向，定位至模型scene.camera.setView({destination: new Cesium.Cartesian3(-2180753.065987198, 4379023.266141494, 4092583.575045952),orientation: {heading: 4.0392222751147955,pitch: 0.010279641987852584,roll: 1.240962888005015e-11}});var layer = scene.layers.find('BIMbuilding');});

（2）连接数据服务，获取图元ID数组,可以得到每个构件的起始ID和终止ID。

小编这里为了让每个构件同时偏移的量不一样，所以随着for循环的运行，每个ID数组对应的偏移量也不一样。

layer.setQueryParameter({url: "/realspace/services/data-BIMbuilding/rest/data",dataSourceName: "BIMBuilding",isMerge: true});datainfo(layer);function datainfo(layer) {layer.datasetInfo().then(function(result) {list = result;console.log(list);if(list.length > 0) {for(var i = 0; i < list.length; i++) {ids[i] = range(list[i].startID, list[i].endID);translate[i] = new Cesium.Cartesian3((2 * i), (5 * i), (10 * i));}}});}

（3）滑动条左右滑动来控制偏移量

Cesium.knockout.getObservable(viewModel, 'offsetX').subscribe(function(newValue) {for(var i = 0; i < list.length; i++) {layer.setObjsTranslate(ids[i], new Cesium.Cartesian3(viewModel.offsetX * i, viewModel.offsetY, viewModel.offsetZ));}});

X方向偏移：

Y方向偏移：

Cesium.knockout.getObservable(viewModel, 'offsetY').subscribe(function(newValue) {for(var i = 0; i < list.length; i++) {layer.setObjsTranslate(ids[i], new Cesium.Cartesian3(viewModel.offsetX, viewModel.offsetY * i, viewModel.offsetZ));}});

Z方向偏移：

Cesium.knockout.getObservable(viewModel, 'offsetZ').subscribe(function(newValue) {for(var i = 0; i < list.length; i++) {layer.setObjsTranslate(ids[i], new Cesium.Cartesian3(viewModel.offsetX, viewModel.offsetY, viewModel.offsetZ * i));}});