美文网首页SuperMap
SuperMap iClient3D for WebGL教程(S

SuperMap iClient3D for WebGL教程(S

作者: 为梦齐舞 | 来源:发表于2019-11-11 10:19 被阅读0次

    当我们添加了一大块倾斜模型或者模型图层时,在进行填挖方分析、剖面分析、查看地下设施设备时,经常需要给图层进行开孔或者是裁剪,本章我们介绍S3MTilesLayer中的数据裁剪功能。

    一、数据裁剪的方法总结

    1、addExcavationRegion:对模型进行开挖,类似于开孔。


    模型开挖

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


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

    5、setCustomClipCross:用于区域裁剪


    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,传入的是


    addExcavationRegion

    2、addFlattenRegion

    添加压平面,用于压平模型表面,一般用于处理倾斜摄影数据,它的用法和addExcavationRegion非常一致,添加压平面的点串数组,和名称即可。

    layer.addFlattenRegion({position: flatPoints,name: 'FlattenRegion' + Math.random()});
    

    3、setClipSection

    设置面裁剪,传入的是三个Cartesian3类型的点


    setClipSection

    目前测试这个接口使用时存在缺陷,需要修改

    4、setCustomClipBox

    这个就是box裁剪,和上面几种方式完全不同,他是使用一个立方体对目标对象进行裁剪操作,可以保留盒子里面的对象,也可以挖洞,与addExcavationRegion不同的是它可以控制挖洞的高度,而不是一直挖到底部


    setCustomClipBox

    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三个轴的旋转,进行旋转裁剪,但是只能是裁剪区域内的数据,而不能保留对象内的数据


    image.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面裁剪非常类似


    image.png

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


    image.png

    7、setModifyRegions

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


    image.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);
       }
    

    多个多边形裁剪效果如下:


    setModifyRegions裁剪

    相关文章

      网友评论

        本文标题:SuperMap iClient3D for WebGL教程(S

        本文链接:https://www.haomeiwen.com/subject/pzzopctx.html