cesium-地面裁剪(多个剪切面)

cesium-地面裁剪(多个剪切面)

介绍

我之前的文章介绍过地面裁剪的实现，这里介绍一下裁剪多个面的方式。

Cesium自带的ClippingPlaneCollection只能实现单凸多边形挖除，为了实现多个面的裁切和简单凹多边形，这里我们需要修源码以提供支持。

在github中的问题讨论中已经有人实现了，实现方式需要重新打包源码

具体的详解

实现效果

源码打包

• 这里我使用的cesium源码版本为：1.79.1下载地址
• 打包工具使用的是webstorm
• node.js版本为14.17.5

替换文件

所有替换文件位置都在Source下，可以检索一下替换

使用打包命令打包

npm run build

部署打包代码

可以部署到nginx、apache等服务器上

完整代码

这里使用vue实现

核心代码

创建裁切面

    /**
     * 根据多边形数组创建裁切面
     * @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;
    }

裁剪代码

    clippings() {
      let that = this;
      let clippingPlanes1 = this.createClippingPlane(this.polygonOne);
      let clippingPlanes2 = this.createClippingPlane(this.polygonTwo);
      let clippingPlaneCollection1 = new Cesium.ClippingPlaneCollection({
        planes: clippingPlanes1,
      });
      let clippingPlaneCollection2 = new Cesium.ClippingPlaneCollection({
        planes: clippingPlanes2,
      });
      if(!that.isClipping){
        that._viewer.scene.globe.depthTestAgainstTerrain = true;
        that._viewer.scene.globe.multiClippingPlanes = new Cesium.MultiClippingPlaneCollection({
          collections: [clippingPlaneCollection1, clippingPlaneCollection2],
          edgeWidth: 1,
          edgeColor: Cesium.Color.WHITE,
        });
        that.isClipping=true;
      }else {
        that._viewer.scene.globe.multiClippingPlanes =null;
        that.isClipping=false;
      }

    },