vue3+SuperMap iClient3D for Cesium实现地形开挖功能

本人小白一枚，文章如有问题还请各位大神评论区指出。整体实现是参考SuperMap iClient3D for Cesium的地形开挖功能源码~

文章目录

前言

一、主要功能

二、具体实现

1.HTML主要结构

2.javascript

---

前言

SuperMap iClient3D for Cesium中的Globe类提供了removeAllExcavationRegion方法，可移除开挖面（这里还可以通过选用removeAllExtractRegion方法实现地形抽出显示效果）。具体实现方法见下方代码。

一、主要功能

效果图：

 该功能主要实现通过指定开挖深度，绘制开挖区域从而实现地形开挖效果，如果配合地下管线数据效果更佳。

二、具体实现

1.HTML主要结构

代码如下：

<div class="content">
      <p>开挖深度（米）：</p>
      <el-input size="small" v-model="depValue" placeholder="1~5000" />
      <el-button type="primary" @click="draw">绘 制</el-button>
      <el-button type="primary" @click="clear">清 除</el-button>
</div>

2.javascript

代码如下：

<script setup>
import { ref, onBeforeUnmount } from "vue";
import { useStore } from "vuex";
const store = useStore();
// let viewer = window.viewer;
let scene = viewer.scene;
let depValue = ref(50);
//绘制多边形
var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0);
//绘制
function draw() {
  //简单控制了一下深度取值范围
  if (depValue.value < 1 || depValue.value > 5000) {
    depValue.value = 50;
  }
  handlerPolygon.drawEvt.addEventListener(function (result) {
    if (!result.object.positions) {
      handlerPolygon.polygon.show = false;
      handlerPolygon.polyline.show = false;
      handlerPolygon.deactivate();
      handlerPolygon.activate();
      return;
    }
    //处理开挖区域坐标
    var array = [].concat(result.object.positions);
    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.removeAllExcavationRegion();
    //添加地形开挖区域
    viewer.scene.globe.addExcavationRegion({
      name: "ggg",
      position: positions,
      height: depValue.value,
      transparent: false,
    });
    handlerPolygon.polygon.show = false;
    handlerPolygon.polyline.show = false;
    handlerPolygon.deactivate();
    handlerPolygon.activate();
  });
  handlerPolygon.activate();
}
//清除
function clear() {
  if (!handlerPolygon.polygon || !handlerPolygon.polyline) {
    return;
  }
  viewer.scene.globe.removeAllExcavationRegion();
  handlerPolygon.polygon.show = false;
  handlerPolygon.polyline.show = false;
  handlerPolygon.deactivate();
}

if (!scene.pickPositionSupported) {
  alert("不支持深度纹理,无法绘制多边形，地形开挖功能无法使用！");
}
onBeforeUnmount(() => {
  clear();
});
</script>