Cesium 超出部分裁剪(二十一)

以下为官网示例，但是我加上了详细的注释

// 创建一个Cesium.Viewer对象，用于在网页中显示3D地球仪和地图
// cesiumContainer是HTML元素的ID，用于容纳地球仪
// terrainProvider是一个选项，用于指定地形数据源，默认为Cesium.createWorldTerrain()
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});

// 获取viewer对象的scene属性，表示3D场景
const scene = viewer.scene;

// 获取scene对象的globe属性，表示3D地球仪
const globe = scene.globe;

// 定义一个矩形区域，表示赤道附近的咖啡带范围（北纬23.43687度到南纬23.43687度）
// 使用Cesium.Rectangle.fromDegrees方法根据经纬度坐标创建矩形对象
const coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(
-180.0,
-53.43687,
180.0,
53.43687
);

// 设置globe对象的cartographicLimitRectangle属性为咖啡带矩形区域
// 这个属性用于限制地球仪上可见的区域，超出范围的部分将被裁剪或隐藏
globe.cartographicLimitRectangle = coffeeBeltRectangle;

// 设置globe对象的showSkirts属性为false
// 这个属性用于控制是否在地形边缘添加额外的几何体来遮挡裂缝，默认为true
globe.showSkirts = false;

// 设置globe对象的backFaceCulling属性为false
// 这个属性用于控制是否剔除背面（朝向相机背面）的三角形，默认为true
globe.backFaceCulling = false;

// 设置globe对象的undergroundColor属性为undefined
// 这个属性用于指定当没有地形数据时显示在地球仪下方的颜色，默认为黑色
globe.undergroundColor = undefined;

// 设置scene对象的skyAtmosphere属性的show属性为false
// 这个属性用于控制是否显示天空大气层效果，默认为true
scene.skyAtmosphere.show = false;

// 定义一个数组，用于存储矩形实体（Entity）对象
const rectangles = [];

// 使用for循环创建10个矩形实体，并将它们添加到viewer对象的entities集合中（entities表示场景中所有实体）
for (let i = 0; i < 10; i++) {
rectangles.push(
viewer.entities.add({
// 指定实体类型为rectangle（矩形）
rectangle: {
// 指定矩形坐标与咖啡带矩形区域相同（coordinates表示矩形边界）
coordinates: coffeeBeltRectangle,

// 指定矩形材质（material）为白色且透明度为0（即不可见）
material: Cesium.Color.WHITE.withAlpha(0.0),

// 指定矩形高度（height）随着循环变量i递增而递增（每次增加5000米），即每个矩形都在上一个矩形之上
height: i * 5000.0,

 
        // 指定矩形是否显示轮廓（outline）为true，即显示白色边框
        outline: true,

        // 指定矩形轮廓的宽度（outlineWidth）为4像素
        outlineWidth: 4.0,

        // 指定矩形轮廓的颜色（outlineColor）为白色
        outlineColor: Cesium.Color.WHITE,
      },
    })
  );
}

// 使用Sandcastle.addToggleButton方法添加一个切换按钮（ToggleButton），用于控制是否启用地球仪区域限制功能
// 第一个参数是按钮的文本，第二个参数是按钮的初始状态（true表示选中），第三个参数是按钮被点击时执行的回调函数
Sandcastle.addToggleButton("Limit Enabled", true, function (checked) {
  // 如果按钮被选中（checked为true），则设置viewer对象的scene属性的globe属性的cartographicLimitRectangle属性为咖啡带矩形区域，即启用地球仪区域限制功能
  if (checked) {
    viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
  }
  // 否则，设置viewer对象的scene属性的globe属性的cartographicLimitRectangle属性为undefined，即禁用地球仪区域限制功能
  else {
    viewer.scene.globe.cartographicLimitRectangle = undefined;
  }
});
// 使用Sandcastle.addToggleButton方法添加另一个切换按钮，用于控制是否显示矩形边界
// 第一个参数是按钮的文本，第二个参数是按钮的初始状态（true表示选中），第三个参数是按钮被点击时执行的回调函数
Sandcastle.addToggleButton("Show Bounds", true, function (checked) {
  // 获取rectangles数组的长度，并赋值给rectanglesLength变量
  const rectanglesLength = rectangles.length;

  // 使用for循环遍历rectangles数组中的每个元素（每个元素都是一个矩形实体对象）
  for (let i = 0; i < rectanglesLength; i++) {
    // 获取rectangles数组中索引为i的元素，并赋值给rectangleEntity变量
    const rectangleEntity = rectangles[i];

    // 设置rectangleEntity对象的show属性为checked值，即根据按钮状态决定是否显示该实体
    rectangleEntity.show = checked;
  }
});