重读Cesium(二):修改源码增加多区域挖空功能

在上篇文章中，我们学到了如何对cesium源码进行打包编译，今天我们再来学习一下如何修改cesium源码，增加多区域挖空功能。因为cesium本身只支持单面的挖空，所以要进行源码修改增加该功能。

前言

该方法仅支持挖出凸多边形。想要挖凹多边形，需要把凹多边形分拆成多个凸多边形分别进行开挖。

修改文件

补丁文件来源官方issu
https://github.com/CesiumGS/cesium/issues/8751

补丁文件点此链接下载
https://download.csdn.net/download/weixin_49929681/89294123

此份代码是在cesium1.74基础上修改而来的，我已经尝试过集成到1.91版本。但是cesium在1.97版本后对webgl语法进行了修改，要把该补丁文件中的

texture2D 更换成 texture

⚠️请不要直接用补丁文件替换原来的文件，请按本文标明的行数替换官方版本的文件，以下是各个文件需要替换的行号，有一些位置不对的地方，可自行搜索单面挖空的api，新增的内容基本都是在单面挖空中增加判断

Source/Shaders/GlobeFS.glsl

74  
79~82  
310~313  
411

Source/Scene/Globe.js

387~400

Source/Scene/GlobeSurfaceShaderSet.js

6  
14～15  
22  
100～102  
168  
177～180  
188～189  
205  
211  
217～221  
310～312  
422

Source/Scene/GlobeSurfaceTileProvider.js

40  
54～57  
174～180  
330～348  
438～440  
667  
797～810  
1351～1354  
1679～1685  
1697～1709  
1725～1731  
1735～1745  
1825～1828  
2668

MultiClippingPlaneCollection.js

文件直接放入Source/Scene下

getMultiClippingFunction.js

文件直接放入Source/Scene下

修改完成后，再对cesium源码进行编译打包，将项目中cesium包进行替换。

挖坑代码

---

let entity=viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(119.565149, 29.053939, 50)
})

let clippingPlaneCollection1 = new Cesium.ClippingPlaneCollection({
  planes: [
    new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 0.0),
    new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), -500.0),
    new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -15.0),
    new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1.0, 0.0), -15.0),
  ],
})
let clippingPlaneCollection2 = new Cesium.ClippingPlaneCollection({
  planes: [
    new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 1000),
    new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), -2000.0),
    new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -15.0),
    new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1.0, 0.0), -15.0),
  ],
})

viewer.scene.globe.multiClippingPlanes = new Cesium.MultiClippingPlaneCollection({
  collections: [clippingPlaneCollection1, clippingPlaneCollection2],
  modelMatrix: entity.computeModelMatrix(Cesium.JulianDate.now()),
  edgeWidth: 1,
  edgeColor: Cesium.Color.RED,
})
var homeView = {
        // eslint-disable-next-line no-undef
        destination: Cesium.Cartesian3.fromDegrees(
          119.565149,
          29.053939,
          800000
        ),
        orientation: {
          // 航向
          // eslint-disable-next-line no-undef
          heading: Cesium.Math.toRadians(0),
          // 俯仰
          // eslint-disable-next-line no-undef
          pitch: Cesium.Math.toRadians(-90),
          // 滚转
          roll: 0.0
        }
      }

      // 初始化视角（飞行模式）
      viewer.camera.flyTo(homeView)

效果图