作者：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=“http://www.supermapol.com/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: "http://www.supermapol.com/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));}});

（4）移除所有偏移

$("#huifu").click(function() {layer.removeAllObjsTranslate();});

完整代码请参见：
链接：https://pan.baidu.com/s/1_yGJAHL_pKTb1XfSCM9ZkA
提取码：f691

SuperMap iClient3D for WebGL之BIM模型爆炸相关推荐

SuperMap iClient3D for WebGL之查询模型属性
目录一.通过数据服务查询 1.普通图层查询 1.1 通过WebGL属性查询接口查询 1.2.通过iserver数据服务查询接口进行查询(SuperMap iServer REST API 2.多图层 ...
SuperMap iClient3D for WebGL教程（Entity）-ModelGraphics
作者:为梦齐舞本文同步更新于简书文章[https://www.jianshu.com/p/bdf397685e8b] ModelGraphics类是隶属于实体对象的一个类型,主要用于创建模型图形,加 ...
SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效
SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效扩展喷泉特效喷泉特效实现完整代码作者: NIck Cheng 扩展喷泉特效之前的博客已经讲过了如何去生成一 ...
SuperMap iClient3D for WebGL教程 Camera
SuperMap iClient3D for WebGL教程 Camera WuYK 在WebGL场景里,有一类很重要的对象,那就是我们的相机Camera对象.这里的Camera相当于人的眼睛,从坐标 ...
SuperMap iClient3D for WebGL教程（空间分析）- 地表开挖及修改
地表开挖主要是为了显示出地下的场景,比如地下管网,而地形修改通常是为了让地表平整,便于跟模型匹配,接下来我们分别说说如何实现地表开挖和地形修改. 地表开挖 1.引用核心样式文件和库文件 <scr ...
SuperMap iClient3D for WebGL产品包更新--201706
SuperMap iClient3D for WebGL将于每月更新一次产品包,目前已更新至2017年06月版本. 下载SuperMap iClient3D for WebGL最新产品包请点击:下载链 ...
bim 模型web页面展示_HTML5/WebGL技术BIM模型轻量化Web浏览解决方案
原标题:HTML5/WebGL技术BIM模型轻量化Web浏览解决方案互联网技术的兴起极大地改变了我们的娱乐.生活和生产方式.尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化,大 ...
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效粒子特效简介使用粒子特效完整代码作者: NIck Cheng 粒子特效简介粒子特效通常使用与要表现某些动态 ...
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务申请天地图开发者 token 读懂能力文 ...
SuperMap iClient3D for WebGL教程（影像篇）-Mapbox
作者:为梦齐舞本文同步更新于简书文章https://www.jianshu.com/p/e19129908252 Mapbox 是一个可以创建各种自定义地图的网站,如 foursquare.Pint ...

SuperMap iClient3D for WebGL之BIM模型爆炸