SuperMap iClient3D for WebGL教程（空间分析）- 地表开挖及修改

---

地表开挖主要是为了显示出地下的场景，比如地下管网，而地形修改通常是为了让地表平整，便于跟模型匹配，接下来我们分别说说如何实现地表开挖和地形修改。

地表开挖
1.引用核心样式文件和库文件

<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">

2.实例化三维球，'cesiumContainer’是三维球所在div的ID，加载地形数据

var viewer = new Cesium.Viewer('cesiumContainer',{
		terrainProvider : new Cesium.CesiumTerrainProvider({
			url : "https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path",
			requestWaterMask : true,
			requestVertexNormals : true
		})
	});

3.用画面工具绘制开挖的区域，获取面的节点，传入globe的开挖区域

    var handlerPolygon = new Cesium.DrawHandler(viewer,Cesium.DrawMode.Polygon, 0);
    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(windowPosition.x < 200 && windowPosition.y < 150){
            tooltip.setVisible(false);
            return ;
        }
        if(handlerPolygon.isDrawing){
            tooltip.showAt(windowPosition,'<p>点击确定开挖区域中间点</p><p>右键单击结束绘制,进行开挖</p>');
        }
        else{
            tooltip.showAt(windowPosition,'<p>点击绘制开挖区域第一个点</p>');
        }
    });//鼠标移动过程中的提示
    handlerPolygon.drawEvt.addEventListener(function(result){
        if(!result.object.positions){
            tooltip.showAt(result,'<p>请绘制正确的多边形</p>');
            handlerPolygon.polygon.show = false;
            handlerPolygon.polyline.show = false;
            handlerPolygon.deactivate();
            handlerPolygon.activate();
            return;
        };
        var array = [].concat(result.object.positions);
        tooltip.setVisible(false);
        var positions = [];
        for(var i = 0, len = array.length; i < len; i ++){
            var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            var h=cartographic.height;
            if(positions.indexOf(longitude)==-1&&positions.indexOf(latitude)==-1){
                positions.push(longitude);
                positions.push(latitude);
                positions.push(h);
            }
        }
        var dep = $('#depth').val();
        viewer.scene.globe.removeAllExcavationRegion();
        viewer.scene.globe.addExcavationRegion({
            name : 'ggg' ,
            position : positions,
            height : dep,
            transparent : false
        });//核心代码，把绘制的面节点，传入globe开挖区域
        handlerPolygon.polygon.show = false;
        handlerPolygon.polyline.show = false;
        handlerPolygon.deactivate();
        handlerPolygon.activate();
    });

地表开挖效果如下图：

地表开挖完整Demo可参考SuperMap iClient 3D for WebGL官方在线范例：

http://support.supermap.com.cn:8090/webgl/examples/editor.html#digTerrain

地形修改

1.引用核心样式文件和库文件

<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">

2.实例化三维球，'cesiumContainer’是三维球所在div的ID，加载地形数据

var viewer = new Cesium.Viewer('cesiumContainer',{
		terrainProvider : new Cesium.CesiumTerrainProvider({
			url : "https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path",
			requestWaterMask : true,
			requestVertexNormals : true
		})
	});

3.用画面工具绘制修改的区域，获取面的节点，传入globe的修改区域

 var handlerPolygon = new Cesium.DrawHandler(viewer,Cesium.DrawMode.Polygon,0);
    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(windowPosition.x < 200 && windowPosition.y < 150){
            tooltip.setVisible(false);
            return ;
        }
        if(handlerPolygon.isDrawing){
            tooltip.showAt(windowPosition,'<p>点击确定修改区域中间点</p><p>右键单击结束绘制,进行开挖</p>');
        }
        else{
            tooltip.showAt(windowPosition,'<p>点击绘制修改区域第一个点</p>');
        }
    });
    handlerPolygon.drawEvt.addEventListener(function(result){
        if(!result.object.positions){
            tooltip.showAt(result,'<p>请绘制正确的多边形</p>');
            handlerPolygon.polygon.show = false;
            handlerPolygon.polyline.show = false;
            handlerPolygon.deactivate();
            handlerPolygon.activate();
            return;
        };
        var array = [].concat(result.object.positions);
        tooltip.setVisible(false);
        var positions = [];
        for(var i = 0, len = array.length; i < len; i ++){
            var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            var h=cartographic.height;
            if(positions.indexOf(longitude)==-1&&positions.indexOf(latitude)==-1){
                positions.push(longitude);
                positions.push(latitude);
                positions.push(h);
            }
        }
        viewer.scene.globe.removeAllModifyRegion();          
		viewer.scene.globe.addModifyRegion({
			name:'ggg',
			position:positions,
		});//核心代码，用面的节点传入globe修改区域
        handlerPolygon.polygon.show = false;
        handlerPolygon.polyline.show = true;
        handlerPolygon.deactivate();
        handlerPolygon.activate();
    });

地形修改效果如下图：

[外链图片转存失败(img-nYFXTMcF-1569223740278)(D:\博客\SuperMap iClient3D for WebGL教程（空间分析）- 地表开挖及修改\dxxg.png)]

地形修改完整Demo可参考SuperMap iClient 3D for WebGL官方在线范例：

地形修改完整Demo可参考SuperMap iClient 3D for WebGL官方在线范例：

http://support.supermap.com.cn:8090/webgl/examples/editor.html#modifyTerrain