Cesium Note19:添加填挖方—Primitive方式

Tips

1. 面向图形开发人员的底层API，通常称为“Primitive API”。该API暴露最小限度的抽象，使用图形学术语，具有很大的灵活性，需要具有图形学编程的知识；

2. 高级别的数据驱动的API，称为“Entity API”。该API使用一致性设计的、高级别的对象来管理一组相关性的可视化对象，其底层使用Primitive API；

1. 开挖多边形

代码

var points = [
    Cesium.Cartesian3.fromDegrees(116.5, 40.8),
    Cesium.Cartesian3.fromDegrees(116.9, 40.8),
    Cesium.Cartesian3.fromDegrees(116.9, 41.5)
  ];

  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));
  }
  proxy.viewer.scene.globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
    planes: clippingPlanes,
    edgeWidth: 1.0,
    edgeColor: Cesium.Color.YELLOW
  });

2. 添加底部贴图

代码

let pointstest = [116.5, 40.8, 200, 116.9, 40.8, 200, 116.9, 41.5, 200]
  var polygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArrayHeights(pointstest)
    ),
    perPositionHeight: true
  })

  const geometry = Cesium.PolygonGeometry.createGeometry(polygon)

  const material = new Cesium.Material({
    fabric: {
      type: 'Image',
      uniforms: {
        // image: '../../assets/images/image-list1.jpg'
        image: require("@/assets/images/image-list1.jpg"),
      }
    }
  })
  const appearance = new Cesium.MaterialAppearance({
    translucent: false,
    flat: true,
    material: material
  })
  proxy.viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: geometry
    }),
    appearance: appearance,
    asynchronous: false
  }))

3. 添加墙壁贴图

代码

• positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointstest),

//墙壁贴图
  let maxHeights = [4145766.089272708, 4145766.089272708, 4204304.782364098];
  let minHeights = [4144328.56394393, 4144328.56394393, 4202847.018258024];
  // console.log(Cesium.Cartesian3.fromDegreesArrayHeights(points)[0].z);
  // console.log(Cesium.Cartesian3.fromDegreesArrayHeights(pointstest)[0].z);
  // console.log(Cesium.Cartesian3.fromDegreesArrayHeights(pointstest)[1].z);
  // console.log(Cesium.Cartesian3.fromDegreesArrayHeights(pointstest)[2].z);
  let wall = new Cesium.WallGeometry({
    // positions: Cesium.Cartesian3.fromDegreesArrayHeights(points),
    positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointstest),
    // maximumHeights: maxHeights,
    // minimumHeights: minHeights,
    // vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  });
  let geometry1 = Cesium.WallGeometry.createGeometry(wall);
  var material1 = new Cesium.Material({
    fabric: {
      type: "Image",
      uniforms: {
        image: require("@/assets/images/ddfzjy.png"),
      }
    }
  }),
    appearance1 = new Cesium.MaterialAppearance({
      translucent: false,
      flat: true,
      material: material1
    });
  proxy.wellWall = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: geometry1,
      attributes: {
        // color: new Cesium.ColorGeometryInstanceAttribute(0.1, 0.1, 0.1, 0.1)
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREY)
      },
      id: "PitWall"
    }),
    appearance: appearance1,
    asynchronous: !1
  }), proxy.viewer.scene.primitives.add(proxy.wellWall)

• 方式一
• let pointstest = [116.5, 40.8, -2000, 116.9, 40.8, -2000, 116.9, 41.5, -2000, 116.5, 40.8, -2000]
• positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointstest)

• 方式二
• var regionlist =[116.5, 40.8, 116.9, 40.8, 116.9, 41.5, 116.5, 40.8]
• positions:Cesium.Cartesian3.fromDegreesArray(regionlist)
• maximumHeights: new Array(regionlist.length).fill(0);
• minimumHeights: new Array(regionlist.length).fill(-600);

清除

// 使用这种方式，如果多次点击添加按钮，会清除不掉
proxy.viewer.scene.primitives.remove(proxy.wellWall)
proxy.viewer.scene.primitives.remove(proxy.primitives)

//清除所有
proxy.viewer.scene.primitives.removeAll()//谨慎使用，可能删除不必要的primitive

报错

proxy.viewer.scene.primitives.removeAll()

proxy.viewer.scene.globe.clippingPlanes.removeAll()

参考

Cesium地形开挖（仅限凸多边形）

var points = [ Cesium.Cartesian3.fromDegrees(116.5,40.8), Cesium.Cartesian3.fromDegrees(116.9,40.8),

https://www.cnblogs.com/pumpkin-123/p/12001716.html

Cesium开发-绘制墙体_初生的太阳丶的博客-CSDN博客_cesium绘制墙

Cesium中绘制图形有两种方式，一可以通过entity自定义图形也可以使用primitives的方式绘制图形，以下是两个示例的代码总结：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <!-- Include the CesiumJS JavaScript and CSS files --> <script src="https://cesium.

https://blog.csdn.net/Strive279/article/details/116262971

cesium 地形开挖

1，绘制凸多边形，记录多边形数据2，根据turf转为逆时针3，构建ClippingPlanefor (var i = 0; i < pointsLength-1; ++i) { var nextIndex = (i + 1) % pointsLength; var midpoint = Cesium.Cartesian3.add(mid2Arr[i], mid2Arr[nextIndex], new Cesium.Cartesian3()); midp

https://blog.csdn.net/renkangever/article/details/109739366