1：参考API文档：SuperMap iClient3D for Cesium 开发指南
2：官网示例：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#layer
3：SuperMap iServer：欢迎使用 SuperMap iServer 11i(2022) (supermapol.com)
1：引入样式，必要文件：
<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/bootstrap.min.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-select.min.js"></script>
<script src="./js/tooltip.js"></script>
<script src="./js/config.js"></script>
<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
</head>2：html部分：
<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>
<div id="toolbar" class="param-container tool-bar">
<button type="button" id="polygon" class="button black">绘制裁剪面</button>
<button type="button" id="clear" class="button black">清除</button>
</div>3.js部分：
1.Cesium初始化
-
使用
Cesium.Viewer对象来初始化cesiumContainer元素。 -
配置包括禁用
infoBox和selectionIndicator，并添加了 Bing Maps 图像提供者。 -
使用
scene.open()方法将 S3M 图层添加到场景中。
2.绘制和裁剪
-
处理事件包括绘制开始、移动和完成等，使用
handlerPolygon.setCustomClipPlane()方法设置裁剪面。 -
使用
Cesium.DrawHandler来处理多边形绘制。
3.引用的必要文件
-
引用
Cesium.js和widgets.css文件。 -
额外的 JavaScript 文件包括 jQuery、Bootstrap、Bootstrap-Select、Tooltip 和 Config 文件。
4.功能实现的工具
-
使用
Cesium.DrawHandler类来处理绘图操作。 -
使用
Cesium.Color和Cesium.Cartesian3处理颜色和坐标。
<script type="text/javascript">
function onload(Cesium) {
//初始化viewer部件
var viewer = new Cesium.Viewer('cesiumContainer',{
infoBox : false,
selectionIndicator : false
});
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url : 'https://dev.virtualearth.net',
mapStyle : Cesium.BingMapsStyle.AERIAL,
key : URL_CONFIG.BING_MAP_KEY
}));
var scene = viewer.scene;
scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
var BIMLayer;
try{
//场景添加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');
layer.selectEnabled = false;
//设置被裁剪对象的颜色
layer.clipLineColor = new Cesium.Color(1,1,1,0);
BIMLayer = layer;
if(!scene.pickPositionSupported){
alert('不支持深度纹理,无法拾取位置！');
}
},function(e){
if (widget._showRenderLoopErrors) {
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
}
});
}
catch(e){
if (widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
var clampMode = 0;
var tooltip = createTooltip(document.body);
var handlerPolygon = new Cesium.DrawHandler(viewer,Cesium.DrawMode.Polygon,clampMode);
handlerPolygon.activeEvt.addEventListener(function(isActive){
if(isActive == true){
viewer.enableCursorStyle = false;
viewer._element.style.cursor = '';
$('body').removeClass('drawCur').addClass('drawCur');
}
else{
viewer.enableCursorStyle = true;
$('body').removeClass('drawCur');
}
});
handlerPolygon.movingEvt.addEventListener(function(windowPosition){
if(handlerPolygon.isDrawing){
tooltip.showAt(windowPosition,'<p>点击确定多边形中间点</p><p>绘制三点即可</p><p>右键单击结束绘制</p>');
}
else{
tooltip.showAt(windowPosition,'<p>点击绘制第一个点</p>');
}
});
handlerPolygon.drawEvt.addEventListener(function(result){
tooltip.setVisible(false);
handlerPolygon.polygon.show = false;
var positions = result.object.positions;
//通过多边形的顶点设置裁剪面，裁剪方向为裁剪面的法线方向
BIMLayer.setCustomClipPlane(positions[0],positions[1],positions[2]);
});
$('#polygon').click(function(){
handlerPolygon.activate();
});
$('#clear').click(function(){
handlerPolygon.clear();
//清除裁剪结果
BIMLayer.clearCustomClipBox();
});
$('#toolbar').show();
$('#loadingbar').remove();
if(!scene.pickPositionSupported){
alert('不支持深度拾取,无法进行鼠标交互绘制！');
}
}
if (typeof Cesium !== 'undefined') {
window.startupCalled = true;
onload(Cesium);
}
</script>
</body>
