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

本文主要是介绍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官方在线范例：