本文共 2887 字，大约阅读时间需要 9 分钟。

作者：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方向偏移：

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));								}							});

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();							});

转载地址：http://mipxi.baihongyu.com/