Cesium Note20:添加填挖方—Entity方式

1. 效果

代码实现

const addPolygon = () => {
  var points = [
    Cesium.Cartesian3.fromDegrees(116.5, 40.8),
    Cesium.Cartesian3.fromDegrees(116.9, 40.8),
    Cesium.Cartesian3.fromDegrees(116.9, 41.5)
  ];
  // console.log(points);
  // let pointstest1 = [116.5, 40.8, 200, 116.9, 40.8, 200, 116.9, 41.5, 200]
  // var points = Cesium.Cartesian3.fromDegreesArrayHeights(pointstest1)

  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 hierarchy = [116.5, 40.8, -2000, 116.9, 40.8, -2000, 116.9, 41.5, -2000, 116.5, 40.8, -2000,]
  proxy.viewer.entities.add({
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(hierarchy),
      material: new Cesium.ImageMaterialProperty({
        image: require("@/assets/images/LX_SEGY001.jpg"),
      }),
      closeTop: false, // 这个要设置为false
      extrudedHeight: 0,
      perPositionHeight: true // 这个要设置true
    }
  });
}

2. 墙体贴图

代码

let entityWall = new Cesium.Entity({
    id: 'enttiyWall0',
    name: 'entityWall',
    wall: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        123.0, 40.0, 100000, 123.5, 40.5, 12012, 124.0, 41.0, 210000, 124.5,
        41.5, 220000, 125.0, 42.0, 52136
      ]),
      material: new Cesium.ImageMaterialProperty({
        image: require("@/assets/images/LX_SEGY001.jpg"),
        repeat: new Cesium.Cartesian2(32, 32)
      })
    }
  })
  let wallGeom = proxy.viewer.entities.add(entityWall)
  proxy.viewer.zoomTo(entityWall)

3. 添加底图

代码

let entityRectangle = new Cesium.Entity({
    id: 'entityRectangle0',
    name: 'entityRectangle',
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
        116.5, 40.8, 2000,
        116.9, 40.8, 2000,
        116.9, 41.5, 2000,]), // west, south, east, north
      // material: Cesium.Color.PURPLE.withAlpha(0.6),
      material: require("@/assets/images/image-list1.jpg"),
      // outline: true, // height must be set for outline to display
      // outlineColor: Cesium.Color.RED,
      // extrudedHeight: 1000,
      height:-2000, //设置深度
    }
  })
  let rectangleGeom = proxy.viewer.entities.add(entityRectangle)

4. 开启深度检测

// 深度检测
proxy.viewer.scene.globe.depthTestAgainstTerrain = true;

参考

Cesium 绘制不同的形状（Entity） - 掘金

Cesium里面绘图最常用的就是 entity，而Cesium也提供了不同类型的entity,这里就介绍一下在Cesium中如何绘制这些entity。

https://juejin.cn/post/7098271625258205197