cesium-地形裁剪-绘制多边形裁剪

介绍

之前的文章介绍过，cesium绘制多边形和裁剪地形，这里我将两功能融合起来实现绘制多边形裁剪地形

这里只能裁剪凸多边形

效果

先上效果

分析

1. 绘制多边形
2. 存储点数组
3. 数组逆转
4. 裁剪多边形地形

完整代码

这里使用vue实现，cesium初始化以模块引入，具体代码有相关注释

<template>
  <div class="home">
    <el-row type="flex" :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>cesium</el-breadcrumb-item>
            <el-breadcrumb-item>裁剪功能</el-breadcrumb-item>
            <el-breadcrumb-item>地形单裁剪(绘制多边形)</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <cesiumComponent id="cesium" ref="refCesium"/>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="addDem()">复位</el-button>
          <el-button type="primary" @click="draw('polygon')">绘制裁切面</el-button>
          <el-button type="primary" @click="clearAll">清空所有数据</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import cesiumComponent from '../cesium.vue'

export default {
  name: "clipping_single",
  data() {
    return {
      _viewer: undefined,
      isClipping: false,
      tempEntities: [],
      clippingPoints: [],
    };
  },

  components: {
    cesiumComponent
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$refs.refCesium.initMap();
      this._viewer = this.$refs.refCesium._viewer;
      this.addDem();
    },
    addDem() {
      let that = this;
      that._viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: '../dem/ASTGTM_N29E087D'
      });
      that._viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(87.42919921875, 28.700224692776988, 67863.0),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-45.0),
          roll: 0.0
        }
      });
    },
    clippings() {
      let that = this;
      let clippingPoints = this.clippingPoints;
      //将第一个点添加到最后一个点，完成闭环
      clippingPoints.push(clippingPoints[0]);
      // 将点集合逆转
      let newClippingPoints = clippingPoints.reverse();
      // truf判断多边形坐标是否为顺时针，true：顺时针，false：逆时针
      // console.log(turf.booleanClockwise(turf.lineString(clippingPoints)));
      let clippingPlanes1 = that.createClippingPlane(newClippingPoints);
      that._viewer.scene.globe.depthTestAgainstTerrain = true;
      that._viewer.scene.globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: clippingPlanes1,
        edgeWidth: 1.0,
        edgeColor: Cesium.Color.YELLOW
      });

    },
    draw() {
      let that = this;
      //每次裁切前清空多边形数据
      that.clearDrawEntities();
      let viewer = this._viewer;
      let tempEntities = this.tempEntities;
      let position = [];
      let tempPoints = [];
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      //鼠标移动事件
      handler.setInputAction(function (movement) {
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      //左键点击操作
      handler.setInputAction(function (click) {
        // 从相机位置通过windowPosition 世界坐标中的像素创建一条射线。返回Cartesian3射线的位置和方向。
        let ray = viewer.camera.getPickRay(click.position);
        // 查找射线与渲染的地球表面之间的交点。射线必须以世界坐标给出。返回Cartesian3对象
        position = viewer.scene.globe.pick(ray, viewer.scene);
        //将笛卡尔坐标转换为地理坐标
        let cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
        //将弧度转为度的十进制度表示
        let longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
        let latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
        let points = [longitudeString, latitudeString];
        // 将点坐标添加到数组中
        that.clippingPoints.push(points);
        tempPoints.push(position);
        let tempLength = tempPoints.length;
        //调用绘制点的接口
        let point = that.drawPoint(position);
        tempEntities.push(point);
        if (tempLength > 1) {
          let pointline = that.drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]]);
          tempEntities.push(pointline);
        } else {
          // tooltip.innerHTML = "请绘制下一个点，右键结束";
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      //右键点击操作
      handler.setInputAction(function (click) {
        let cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);

        if (cartesian) {
          let tempLength = tempPoints.length;
          if (tempLength < 3) {
            alert('请选择3个以上的点再执行闭合操作命令');
          } else {
            //闭合最后一条线
            let pointline = that.drawPolyline([tempPoints[tempPoints.length - 1], tempPoints[0]]);
            tempEntities.push(pointline);
            // that.drawPolygon(tempPoints);
            tempEntities.push(tempPoints);
            that.clippings();
            handler.destroy();//关闭事件句柄
            handler = null;

          }
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },
    drawPoint(position, config) {
      let viewer = this._viewer;
      let config_ = config ? config : {};
      return viewer.entities.add({
        name: "点几何对象",
        position: position,
        point: {
          color: Cesium.Color.SKYBLUE,
          pixelSize: 10,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 3,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        }
      });
    },
    drawPolyline(positions, config_) {
      let viewer = this._viewer;
      if (positions.length < 1) return;
      let config = config_ ? config_ : {};
      return viewer.entities.add({
        name: "线几何对象",
        polyline: {
          positions: positions,
          width: config.width ? config.width : 5.0,
          material: new Cesium.PolylineGlowMaterialProperty({
            color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
          }),
          depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
            color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
          }),
          clampToGround: true,
        }
      });
    },
    drawPolygon(positions, config_) {
      let viewer = this._viewer;
      if (positions.length < 2) return;
      let config = config_ ? config_ : {};
      return viewer.entities.add({
        name: "面几何对象",
        polygon: {
          hierarchy: positions,
          material: config.color ? new Cesium.Color.fromCssColorString(config.color).withAlpha(.2) : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),
        },
      });
    },
    /**
     * 根据多边形数组创建裁切面
     * @param points_ 多边形数组集合
     * @returns {[]} 返回裁切面数组
     */
    createClippingPlane(points_) {
      let points = [];
      for (let i = 0; i < points_.length - 1; i++) {
        points.push(Cesium.Cartesian3.fromDegrees(points_[i][0], points_[i][1]))
      }
      let pointsLength = points.length;
      let clippingPlanes = []; // 存储ClippingPlane集合
      for (let i = 0; i < pointsLength; ++i) {
        let nextIndex = (i + 1) % pointsLength;
        let midpoint = Cesium.Cartesian3.add(points[i], points[nextIndex], new Cesium.Cartesian3());
        midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint);

        let up = Cesium.Cartesian3.normalize(midpoint, new Cesium.Cartesian3());
        let right = Cesium.Cartesian3.subtract(points[nextIndex], midpoint, new Cesium.Cartesian3());
        right = Cesium.Cartesian3.normalize(right, right);

        let normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3());
        normal = Cesium.Cartesian3.normalize(normal, normal);

        let originCenteredPlane = new Cesium.Plane(normal, 0.0);
        let distance = Cesium.Plane.getPointDistance(originCenteredPlane, midpoint);

        clippingPlanes.push(new Cesium.ClippingPlane(normal, distance));
      }
      return clippingPlanes;
    },
    /**
     * 清除实体
     */
    clearDrawEntities() {
      let viewer = this._viewer;
      this.tempEntities = [];
      this.clippingPoints = [];
      // 清除之前的实体
      const entitys = viewer.entities._entities._array;
      let length = entitys.length
      // 倒叙遍历防止实体减少之后entitys[f]不存在
      for (let f = length - 1; f >= 0; f--) {
        if (entitys[f]._name && (entitys[f]._name === '点几何对象' || entitys[f]._name === '线几何对象' || entitys[f]._name === '面几何对象')) {
          viewer.entities.remove(entitys[f]);
        }
      }
    },
    clearAll() {
      let that = this;
      this.clearDrawEntities();
      that._viewer.scene.globe.clippingPlanes = null;
    }
  },
  created() {

  },
}
</script>

<style scoped>
.home {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-breadcrumb {
  margin: 10px;
  font-size: 15px;
}

#cesium {
  max-height: 700px;
}

</style>