nyyzt/public/toolibs/DrawClipping.js

function ClippingPlanes(arg) {
  this.viewer = arg.viewer;
  this.callback = arg.callback;
  this.activeShape = null;
  this.color = arg.color || "#f00";
  this.width = arg.width || 8;
  this.image = arg.image;
  this.endposition = []; //活动点
  this.floatingPoint = null; //标识点
  this.ischange = arg.change || 1;
  this.RedpylineID = Number(
    new Date().getTime() + "" + Number(Math.random() * 1000).toFixed(0)
  );
  this.getData = function() {
    return {
      objects: this.activeShape,
      position: this.endposition,
      RedpylineID: this.RedpylineID
    };
  };
  this.StartClippingPlanes = function() {
    let self = this;
    let cartesian = null;
    let viewer = self.viewer;
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(movement => {
      cartesian = viewer.scene.pickPosition(movement.position);

      if (cartesian) {
        if (self.endposition.length == 0) {
          self.floatingPoint = self.createPoint(
            cartesian,
            viewer,
            self.width,
            self.color
          );
          self.endposition.push(cartesian);
          var dynamicPositions = new Cesium.CallbackProperty(function() {
            return new Cesium.PolygonHierarchy(self.endposition);
          }, false);
          self.ischange = 1;
          self.activeShape = self.createpolygon(
            dynamicPositions,
            viewer,
            self.width,
            self.color
          );
        }
        self.endposition.push(cartesian);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    handler.setInputAction(function(event) {
      if (Cesium.defined(self.floatingPoint)) {
        var newPosition = viewer.scene.pickPosition(event.endPosition);
        if (Cesium.defined(newPosition)) {
          self.floatingPoint.position.setValue(newPosition);
          self.endposition.pop();
          self.endposition.push(newPosition);
        }
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    handler.setInputAction(() => {
      handler.destroy();
      if (typeof self.callback == "function") {
        self.callback(self.activeShape, self.endposition);
      }
      viewer.entities.remove(self.floatingPoint);
      viewer.entities.remove(self.activeShape);
      self.getpoint(self.endposition);
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  };
  this.createPoint = function(worldPosition, viewer, width, color) {
    var point = viewer.entities.add({
      position: worldPosition,
      point: {
        pixelSize: width,
        color: Cesium.Color.fromCssColorString(color)
      }
    });
    return point;
  };
  this.createpolygon = function(
    worldPosition,
    viewer,
    width,
    color,
    extrudedHeight,
    height
  ) {
    const polygon = viewer.entities.add({
      polygon: {
        hierarchy:
          this.ischange == 1
            ? worldPosition
            : new Cesium.PolygonHierarchy(worldPosition),
        width: width,
        material:
          this.ischange == 1
            ? Cesium.Color.fromCssColorString(color).withAlpha(0.5)
            : new Cesium.ImageMaterialProperty({
                //映射到图像
                image: "./images/b.png", //资源地址
                repeat: new Cesium.Cartesian2(
                  worldPosition.length / 2,
                  worldPosition.length / 2
                ) //想x,y方向重复的次数
              }),
        extrudedHeight: extrudedHeight || 0,
        height: height || 0,
        closeTop: this.ischange == 1 ? true : false
      }
    });
    return polygon;
  };
  this.getpoint = function(data) {
    let points = [];
    data.forEach(item => {
      var lat = Cesium.Math.toDegrees(
        this.viewer.scene.globe.ellipsoid.cartesianToCartographic(item).latitude
      );
      var lng = Cesium.Math.toDegrees(
        this.viewer.scene.globe.ellipsoid.cartesianToCartographic(item)
          .longitude
      );
      var alt = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(item)
        .height;
      points.push([lng, lat, alt]);
    });
    points.push(points[0]);
    if (turf.booleanClockwise(turf.lineString(points))) {
      let pointstart = [];
      points.reverse().pop();
      pointstart.push(points[points.length - 1]);
      pointstart = pointstart.concat(points);
      this.getterrionclippingPlanes(data, true);
    } else {
      const pointes = points;
      this.getterrionclippingPlanes(data, false);
    }
  };
  this.getterrionclippingPlanes = function(points, checked) {
    if (checked) {
      points = points.reverse();
    }
    let viewer = this.viewer;
    var pointsLength = points.length;
    var clippingPlanes = []; // 存储ClippingPlane集合
    for (var i = 0; i < pointsLength; ++i) {
      var nextIndex = (i + 1) % pointsLength;
      var midpoint = Cesium.Cartesian3.add(
        points[i],
        points[nextIndex],
        new Cesium.Cartesian3()
      );
      midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint);

      var up = Cesium.Cartesian3.normalize(midpoint, new Cesium.Cartesian3());
      var right = Cesium.Cartesian3.subtract(
        points[nextIndex],
        midpoint,
        new Cesium.Cartesian3()
      );
      right = Cesium.Cartesian3.normalize(right, right);
      var normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3());
      normal = Cesium.Cartesian3.normalize(normal, normal);
      var originCenteredPlane = new Cesium.Plane(normal, 0.0);
      var distance = Cesium.Plane.getPointDistance(
        originCenteredPlane,
        midpoint
      );
      clippingPlanes.push(new Cesium.ClippingPlane(normal, distance));
    }
    var globe = viewer.scene.globe;
    globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
      planes: clippingPlanes,
      edgeWidth: 0.0,
      edgeColor: Cesium.Color.WHITE
    });
    globe.backFaceCulling = true;
    globe.showSkirts = true;
    this.ischange = 2;
    this.createpolygon(points, this.viewer, 8, 0, -10);
  };
  this.unterrionclippingPlanes = function() {
    this.viewer.scene.globe.clippingPlanes = null;
  };
}