【超图】白模数据如何与抽屉效果结合，展示白膜内部结构

作者：taco

最近在支持的过程中，客户在看别的项目中，发现白模是可以抽插的。而非单独一个白色模型建筑。那么如何使用SuperMap产品来实现抽插的效果呢？本篇文章结合SuperMap iDesktopX产品以及SuperMap iClient for Cesium产品进行实现。

首先抽屉的效果在BIM数据上已经做出了实现。大家感兴趣的话可以参考示例BIM抽屉效果进行实现（http://support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/editor.html#drawerEffect）

具体哪些代码看不懂的话，可以留言讨论。本片文章主要介绍如何使用shp面来构造并实现。

一、数据准备

实现白模效果的前提，当然是要有矢量面啦！taco之前在资源中提供过了矢量面，大家可以自行下载（https://download.csdn.net/download/weixin_42532695/85552494?spm=1001.2014.3001.5503）

数据格式为shp类型，数据中同时包含了楼层的相关信息。

二、数据制作

2.1 导入数据

右键【数据源】，新建数据源用来存储我们需要导入的矢量数据。

右键创建的数据源，导入数据集选择本地的shp文件。

由于北京的房屋面体量较大，我们这里摘选出部分建筑进行演示。存储后的数据为新的面数据集。

2.2 数据制作

右键【数据集】-【属性】在属性结构中新建字段【房主】、【楼层】、【楼层高度】、【底部高度】。如果已经为真实字段此处可不新建，直接使用自己字段即可。

右键【数据集】-【浏览属性表】直接在属性中进行更新操作。将详细的楼层信息填写，便于后续查询等操作。

2.3 白膜拉伸

由于我们按照常规去拉伸白膜的话，拉出来的模型通常是实心的。而非能看到内部构造的。此处我们通过其他方式来对墙体和底面分别拉伸。

【数据】-【类型转换】-【面转线】将矢量面类型数据转换为矢量线便于后续操作。

【空间分析】-【缓冲区】创建缓冲区。此处以墙体为0.2m为标准创建缓冲区。当然如果后续有真是数据，也可以结合实际情况选择墙体的缓冲区字段。

在创建线型缓冲区后，可以得到一个buffer面数据集。该buffer数据集及为我的墙体面。

在buffer的属性表中新建字段【房屋面】字段，并更新该字段为【侧面】。

右键【数据源】新建一个面数据数据集（合并），将白膜的分层（底面）与buffer(侧面)追加至新的合并数据集中。并对相应的字段进行更新。此处我们定义底部的高度是0.2m。

右键合并后的数据集，将其添加至球面场景中。【三维地理设计】-【拉伸】-【线性拉伸】

分别设置【拉伸高度】【底部高度】为对应的字段。

拉伸完成后我们即可得到一个包含底面及侧面的模型数据集。将模型数据集添加至场景，右键场景【生成场景缓存】即完成数据的制作。

三、发布服务

我们将缓存后的数据添加至场景中，保存场景。同时我们将之前的数据源打开，保存工作空间。这里可只保留合并后的面数据及，也可以继续保留其他数据集。合并后的面数据集，做查询使用。右键工作空间保存工作空间。

开启iServer产品，进行服务的发布。选择【数据服务】，【三维服务】进行发布。

四、白模抽屉

前端部分仿照抽屉示例进行查询偏移完整代码可以参考下方代码

主要使用接口setObjsTranslate（ids,translate）进行偏移

S3MTilesLayer - Cesium Documentationhttp://support.supermap.com.cn:8090/webgl/Cesium/docs/Documentation/S3MTilesLayer.html?classFilter=s3m#setObjsTranslate

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>抽屉效果</title>
		<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
		<link href="./css/font-awesome.min.css" rel="stylesheet">
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<link href="./css/pretty.css" rel="stylesheet">
		<link href="./css/style.css" rel="stylesheet">
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
		<script src="./js/bootstrap-select.min.js"></script>
		<link rel="stylesheet" href="./css/liMarquee.css">
		<link rel="stylesheet" href="./css/InfoGrid-skyline.css">
		<script src="./js/jquery.min.3.2.1.js"></script>
		<script src="./js/js/jquery.liMarquee.js"></script>
		<script src="./js/spectrum.js"></script>
		<script src="./js/config.js"></script>
		<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
		<style>
			input[type=range] {
				-webkit-appearance: none;
				width: 73px;
				height: 2px;
				border-radius: 10px;
				/*这个属性设置使填充进度条时的图形为圆角*/
			}

			input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
				margin-top: -3px;
				height: 10px;
				width: 10px;
			}

			.inputBox {
				margin-bottom: 25px;
			}

			input[type=range]::-webkit-slider-runnable-track {
				height: 2px;
			}

			input[type=text] {
				width: 62px;
				height: 28px;
				background: rgba(51, 51, 51, 1);
				border: 1px solid rgba(74, 74, 74, 1);
				border-radius: 4px;
				margin: 0;
				box-sizing: border-box;
			}

			.btn2 {
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
				background-color: rgba(42, 42, 42, 1);
				margin-right: 0px;
				border-radius: 4px;
				height: 28px;
				border: 1px solid rgba(174, 174, 174, 1);
				position: absolute;
				bottom: 10px;
			}
		</style>
	</head>

	<body>
		<div id="cesiumContainer"></div>
		<div id='loadingbar' class="spinner">
			<div class="spinner-container container1">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container2">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container3">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
		</div>
		<button id="bn"
			style="position:absolute;left:1%;top:2%;display: none;background-color:#00a1cb;color:#fff;border:0">
			查询
		</button>
		<div id="toolbar" style="position:absolute;left:1%;top:2%;display: none;">
			<div class="titleBox">
				<div class="titl">抽屉效果</div>
				<span class="close2" aria-hidden="false">×</span>
			</div>
			<div class="inputBox">
				<label class="lab" style="position:relative;top:4px;">偏移量:</label>
				<div class="rangeBox">
					<input type="range" id="offsetNormal" min="0" max="200" step="10" value="100" title="offsetNormal"
						data-bind="value:offsetNormal,valueUpdate:'input'">
				</div>
				<input type="text" size="5" data-bind="value:offsetNormal" style="color:#ffffff;margin-top: 3px;">
			</div>
		</div>
		<div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;">
			<div id="tools" style="text-align : right">
				<span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">对象属性</span>
				<span class="fui-export" id="bubblePosition" style="color: darkgrey; padding:5px"></span>
				<span class="fui-cross" title="关闭" id="close" style="color: darkgrey;padding:5px"></span>
			</div>
			<div style="overflow-y:scroll;height:150px" id="tableContainer">
				<table id="tab"></table>
			</div>
		</div>
		<script type="text/javascript">
			function onload(Cesium) {
				var viewer = new Cesium.Viewer('cesiumContainer', {
					infoBox: false
				});
				var scene = viewer.scene;
				scene.lightSource.ambientLightColor = new Cesium.Color(0.4, 0.4, 0.4, 1);
				var widget = viewer.cesiumWidget;
				scene.sun.show = true;
				scene.moon.show = false;

				var infoboxContainer = document.getElementById("bubble");
				var table = document.getElementById("tab");

				var viewModel = { //操纵面板
					offsetNormal: 20
				}
				Cesium.knockout.track(viewModel);
				var toolbar = document.getElementById("toolbar");
				Cesium.knockout.applyBindings(viewModel, toolbar);
				Cesium.knockout.getObservable(viewModel, 'offsetNormal').subscribe(function(newValue) {
					viewModel.offsetNormal = newValue;
					updateOffset();
				})
				//修改数据
				var url = "http://localhost:8090/iserver/services/data-baimo/rest/data";
				var dataurl =
					"http://localhost:8090/iserver/services/data-baimo/rest/data/featureResults.rjson?returnContent=true";
				var promise = scene.open("http://localhost:8090/iserver/services/3D-baimo/rest/realspace");
				var chooseLayer, featureQuery = false,
					normal,
					idList = [],
					chooseNormal = new Cesium.Cartesian3(),
					totalList = [],
					scratchSelectColor = new Cesium.Color(0.7, 0.7, 1.0, 1.0),
					scenePosition = null,
					scratchNromal = new Cesium.Cartesian3();
				Cesium.when(promise, function(layer) {
					chooseLayer = layer[0];
					layer[0].setQueryParameter({
						url: url,
						dataSourceName: "白模抽屉",
						dataSetName: '北京白模_合并',
						keyWord: 'SmID'
					});
				}, function(e) {
					if (widget._showRenderLoopErrors) {
						var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
						widget.showErrorPanel(title, undefined, e);
					}
				});

				function getFeatureBySQL(bg) { //根据查询条件得到对应户型id
					var tt = "房主=" + "'"+ String(bg)+ "'";
					var sqlParameter = {
						"datasetNames": ["白模抽屉:北京白模_合并"],
						getFeatureMode: "SQL",
						queryParameter: {
							attributeFilter: tt,
						}
					};
					var queryData = JSON.stringify(sqlParameter);
					$.ajax({
						type: "post",
						url: dataurl,
						data: queryData,
						success: function(result) {
							var resultObj = JSON.parse(result);
							console.log(resultObj);
							if (resultObj.featureCount > 0) {
								getBuildingId(resultObj);
							}
						},
						error: function(msg) {
							console.log("msg===========",msg);
						},
					})

					
				};

				function getBuildingId(response) { //得到户型id
					var length = response.features.length;
					for (var i = 0; i < length; i++) {
						idList[i] = response.features[i].ID;
					}
					if (idList.length > 0) {
						Array.prototype.push.apply(totalList, idList);
						console.log("totalList",totalList,"idList===",idList)
						var offsetNormal = Cesium.Cartesian3.multiplyByScalar(normal, Number(
							viewModel.offsetNormal), scratchNromal); //可以更改偏移默认值
						chooseLayer.setObjsTranslate(idList, offsetNormal);
					}
				}

				var scratchNormal = new Cesium.Cartesian3(); //更新偏移
				function updateOffset() {
					scratchNormal = Cesium.Cartesian3.multiplyByScalar(chooseNormal, Number(viewModel.offsetNormal),
						scratchNormal);
					chooseLayer.setObjsTranslate(idList, scratchNormal);
				}


				function handlerNormal() {
					var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
					handler.setInputAction(function(e) {
						console.log(123)
						idList = [];
						normal = scene.pickNormal(e.position);
						chooseNormal = normal;
						var position = scene.pickPosition(e.position);
						if (!position) {
							position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
						}
						scenePosition = position;
						viewer.pickEvent.addEventListener(function(feature) {
							console.log(feature)
							if (!featureQuery) {
								getFeatureBySQL(feature["房主"]);

							}
						});
					}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
				}
				handlerNormal(); //获取法线，进行偏移


				var scratchDefaultNormal = new Cesium.Cartesian3(0, 0, 0);
				$("#clear").click(function() { //清除偏移
					//viewModel.offsetNormal = 0;
					$("#bubble").hide();
					chooseLayer.setObjsTranslate(totalList, scratchDefaultNormal);
					featureQuery = false;
					idList = [];
					totalList = [];
				});

				$("#close").click(function() {
					$("#bubble").hide();
				});
				//关闭操作框
				$(".close2").click(function() {
					$("#toolbar").hide();
					$("#bn").show();
				});
				$("#bn").click(function() {
					$("#toolbar").show();
					$("#bn").hide();
				});
				$("#loadingbar").remove();
				$("#toolbar").show();
			}
			if (typeof Cesium !== "undefined") {
				window.startupCalled = true;
				onload(Cesium);
			}
		</script>
	</body>

</html>

最终效果