1 效果

如下所示，实现一个挖坑效果；坑的表面材质可以使用任意图片替代

如上展示了静态挖坑的效果和移动效果。移动效果可用来查看地下管线等要素

2 完整代码

                                        
/**
 * 地面挖坑效果完整代码
 */
import {
  Viewer,
  Cesium3DTileset ,
  Color,
  ImageMaterialProperty,
  ClippingPlane,
  Cartesian3,
  ClippingPlaneCollection,
  Plane,
  Ion
} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import cesiumUtil from '../utils/cesiumUtil';
import viewOption from './viewerOption';
Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNzBlMTYxMC02YTkwLTQ5Y2EtOTU2NC1kNDUwYTg5ZGNjZTkiLCJpZCI6ODc0Mywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MjY0MzE0NH0.1hZ8wb3Tq-58PXFaG9o-XPS0U7FmaOMr1qZocIEkIBM"
var V = new Viewer('gisContainer', viewOption);
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display ='none';
var globe = V.scene.globe;
globe.depthTestAgainstTerrain = true;
let points=[];
let polygon_arr=[];
// 原始坐标
let coors=[
  [116.611118,40.043265],
  [116.627775,40.044821],
  [116.622637,40.048625],
  [116.615127,40.047588]
] 
for(let i=0;i<coors.length;i++){
  let _cartesian3=cesiumUtil.WGS84_to_Cartesian3({
    lng:coors[i][0],
    lat:coors[i][1],
    alt:0
  });
  points.push(_cartesian3);
  polygon_arr.push(coors[i][0]);
  polygon_arr.push(coors[i][1]);
}
 // 存储ClippingPlane集合
var clippingPlanes = [];
for (var i = 0; i < points.length; ++i) {
  var nextIndex = (i + 1) % points.length; // 0 1 2 3 0
  var midpoint = Cartesian3.add(points[i], points[nextIndex], new Cartesian3());
  midpoint = Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint);
  var up = Cartesian3.normalize(midpoint, new Cartesian3());
  var right = Cartesian3.subtract(points[nextIndex], midpoint, new Cartesian3());
  right = Cartesian3.normalize(right, right);

  var normal = Cartesian3.cross(right, up, new Cartesian3());
  normal = Cartesian3.normalize(normal, normal);
  var originCenteredPlane = new Plane(normal, 0.0);
  var distance = Plane.getPointDistance(originCenteredPlane, midpoint);
  clippingPlanes.push(new ClippingPlane(normal, distance));
}

globe.clippingPlanes = new ClippingPlaneCollection({
    planes: clippingPlanes,
    edgeWidth: 1.0,
    edgeColor: Color.WHITE
});

V.entities.add({
  polygon: {
    hierarchy: Cartesian3.fromDegreesArray(polygon_arr),    
    material: new ImageMaterialProperty({
      image: "./statics/imgs/soil1.jpg"
    }),
    extrudedHeight: -200,   //如果是fromDeGreeArrayHeight   这里为0即可
    perPositionHeight: true, // 这个要设置true
    closeBottom:true,  
    closeTop:false
  }
});

V.camera.setView({
  destination : Cartesian3.fromDegrees(116.611118,40.043265, 100.0)
});
                                        
                                    

3 放大镜效果

通过实现挖方多边形跟随鼠标移动；可以实现查看管线等地下要素的放大镜效果

全部代码如下