SuperMap iClient3D for WebGL教程(S
当我们添加了一大块倾斜模型或者模型图层时,在进行填挖方分析、剖面分析、查看地下设施设备时,经常需要给图层进行开孔或者是裁剪,本章我们介绍S3MTilesLayer中的数据裁剪功能。
一、数据裁剪的方法总结
1、addExcavationRegion:对模型进行开挖,类似于开孔。
![](https://img.haomeiwen.com/i15511619/d77a76a5cab0e43a.png)
2、addFlattenRegion:用于压平模型表面,这个算是对数据进行修改并非裁剪,勉强先放到本节课中。
![](https://img.haomeiwen.com/i15511619/51469bce5e9cd7aa.png)
3、setClipSection:用于使用面裁剪
4、setCustomClipBox:使用box裁剪,相当于使用一个立方体进行裁剪数据,带有高程。
![](https://img.haomeiwen.com/i15511619/9b0a11367543699c.png)
5、setCustomClipCross:用于区域裁剪
![](https://img.haomeiwen.com/i15511619/13779df4d10a854b.png)
6、setCustomClipPlane:裁剪封边
![](https://img.haomeiwen.com/i15511619/1b5821f443d3376b.png)
7、setModifyRegions:多边形裁剪
![](https://img.haomeiwen.com/i15511619/19edd289420d3dd3.png)
二、使用方法介绍
介绍裁剪之前,我们首先先介绍下如何在场景中绘制面对象,并拿到绘制的点串。
我们使用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,传入的是
![](https://img.haomeiwen.com/i15511619/3d117da8cef5effd.png)
2、addFlattenRegion
添加压平面,用于压平模型表面,一般用于处理倾斜摄影数据,它的用法和addExcavationRegion非常一致,添加压平面的点串数组,和名称即可。
layer.addFlattenRegion({position: flatPoints,name: 'FlattenRegion' + Math.random()});
3、setClipSection
设置面裁剪,传入的是三个Cartesian3类型的点
![](https://img.haomeiwen.com/i15511619/f26b2a83936ecba1.png)
目前测试这个接口使用时存在缺陷,需要修改
4、setCustomClipBox
这个就是box裁剪,和上面几种方式完全不同,他是使用一个立方体对目标对象进行裁剪操作,可以保留盒子里面的对象,也可以挖洞,与addExcavationRegion不同的是它可以控制挖洞的高度,而不是一直挖到底部
![](https://img.haomeiwen.com/i15511619/0c4a7c4a68af0aaf.png)
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三个轴的旋转,进行旋转裁剪,但是只能是裁剪区域内的数据,而不能保留对象内的数据
![](https://img.haomeiwen.com/i15511619/70aad61909d1698a.png)
使用方法如下:
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面裁剪非常类似
![](https://img.haomeiwen.com/i15511619/227a7754e0e95baf.png)
通过设置clipPlaneColor设置剖面的颜色,通过ClipSectionMode设置剖面的颜色显示模式,一共三种
![](https://img.haomeiwen.com/i15511619/febbbba71bce95aa.png)
7、setModifyRegions
多边形裁剪,可以用于挖洞或裁剪外部,这里值得一提的是,setModifyRegions可以一次加入多个多边形进行裁剪。
![](https://img.haomeiwen.com/i15511619/6e9a5889d0bce797.png)
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);
}
多个多边形裁剪效果如下:
![](https://img.haomeiwen.com/i15511619/0f21bf528940a76e.png)