作者：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 Documentation
http://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>最终效果
