- SuperMap iClient3D for WebGL教程 轨
- SuperMap iClient3D for WebGL教程-S
- SuperMap iClient3D for WebGL教程(模
- Angular框架下如何使用WebGL
- SuperMap iClient3D for WebGL教程(S
- SuperMap iClient3D for WebGL教程(S
- SuperMap iClient3D for WebGL教程(S
- SuperMap iClient3D for WebGL教程(S
- SuperMap iClient3D for WebGL教程-S
- SuperMap iClient3D for WebGL教程(S
当我们添加了一大块倾斜模型或者模型图层时,在进行填挖方分析、剖面分析、查看地下设施设备时,经常需要给图层进行开孔或者是裁剪,本章我们介绍S3MTilesLayer中的数据裁剪功能。
一、数据裁剪的方法总结
1、addExcavationRegion:对模型进行开挖,类似于开孔。

2、addFlattenRegion:用于压平模型表面,这个算是对数据进行修改并非裁剪,勉强先放到本节课中。

3、setClipSection:用于使用面裁剪
4、setCustomClipBox:使用box裁剪,相当于使用一个立方体进行裁剪数据,带有高程。

5、setCustomClipCross:用于区域裁剪

6、setCustomClipPlane:裁剪封边

7、setModifyRegions:多边形裁剪

二、使用方法介绍
介绍裁剪之前,我们首先先介绍下如何在场景中绘制面对象,并拿到绘制的点串。
我们使用DrawHandler进行绘制,这个对象可以绘制点、线、面、图标等对象。
首先我们实例化一个DrawHandler,绘制模型DrawMode设置为绘制Polygon
var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0);
当我们需要激活绘制时,需要调用
handlerPolygon.activate();
当不需要再绘制时,需要调用
handlerPolygon.deactivate();
另外可以调用clear()方法清除绘制的所有对象。
DrawHandler一共有三个监听事件,activeEvt(绘制激活),movingEvt(绘制时鼠标移动),drawEvt(绘制结束)
一般我们在drawEvt事件中获取绘制完成后的对象,下面的代码即可拿到点串
handlerPolygon.drawEvt.addEventListener(function(result) {
var polygon = result.object;
var positions = polygon.positions;
var flatPoints = [];
for(var i = 0, j = positions.length; i < j; i++) {
var position = positions[i];
var cartographic = Cesium.Cartographic.fromCartesian(position);
var lon = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
flatPoints.push(lon);
flatPoints.push(lat);
flatPoints.push(height);
}
});
好了,接下来我们介绍数据裁剪
1、addExcavationRegion
对模型添加开挖面,主要参数有position数组和name添加的开挖面名称,使用方法为
S3MTilesLayer.addExcavationRegion({position: ExcavationRegionPoints,name: 'ExcavationRegion'});
此处需要注意的是这里的position,传入的是

2、addFlattenRegion
添加压平面,用于压平模型表面,一般用于处理倾斜摄影数据,它的用法和addExcavationRegion非常一致,添加压平面的点串数组,和名称即可。
layer.addFlattenRegion({position: flatPoints,name: 'FlattenRegion' + Math.random()});
3、setClipSection
设置面裁剪,传入的是三个Cartesian3类型的点

目前测试这个接口使用时存在缺陷,需要修改
4、setCustomClipBox
这个就是box裁剪,和上面几种方式完全不同,他是使用一个立方体对目标对象进行裁剪操作,可以保留盒子里面的对象,也可以挖洞,与addExcavationRegion不同的是它可以控制挖洞的高度,而不是一直挖到底部

dimensions传入的是一个笛卡尔坐标系的参数,里面的
position:传入这个盒子应该放到什么位置
clipMode:设置裁剪模模式,包围盒内、包围盒外、显示裁剪线
heading:这里可以调整包围盒的方向,传入角度
var boxOption = {
dimensions: new Cesium.Cartesian3(length, width, height),
position: Cesium.Cartesian3.fromDegrees(lon,lat,height),
clipMode: 'clip_behind_all_plane',
heading: 20
};
5、setCustomClipCross
cross裁剪,可以调整裁剪长宽以及深度,与box裁剪不同的是,它还能调整xyz三个轴的旋转,进行旋转裁剪,但是只能是裁剪区域内的数据,而不能保留对象内的数据

使用方法如下:
S3MTilesLayer.setCustomClipCross({
position: Cesium.Cartesian3.fromDegrees(107, 34, 500)
dimensions: new Cesium.Cartesian2(5, 5),
heading: heading,
pitch: pitch,
roll: roll,
extrudeDistance: extrudeDistance
});
6、setCustomClipPlane
剖面分析,能够看到模型的剖切线,使用的参数和setClipSection面裁剪非常类似

通过设置clipPlaneColor设置剖面的颜色,通过ClipSectionMode设置剖面的颜色显示模式,一共三种

7、setModifyRegions
多边形裁剪,可以用于挖洞或裁剪外部,这里值得一提的是,setModifyRegions可以一次加入多个多边形进行裁剪。

positions = [];
for(var pt of result.object.positions){
var cartographic = Cesium.Cartographic.fromCartesian(pt);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
positions.push(longitude, latitude, height);
}
regions.push(positions);
for(var layer of layers){
layer.setModifyRegions(regions, clipMode);
}
多个多边形裁剪效果如下:

网友评论