原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Cartographic%20Limit%20Rectangle.html&label=All

效果如下视频所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  shouldAnimate: true,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

//隐藏版权信息
viewer.cesiumWidget.creditContainer.style.display = "none";
//添加帧速显示
viewer.scene.debugShowFramesPerSecond = true;

const scene = viewer.scene;
const globe = scene.globe;

/**
 * Tropics of Capricorn 南回归线
 * Tropics of Cancer 北回归线
 * 
 * coffeeBeltRectangle:这里用该词语定义变量，表明该矩形区域的含义：咖啡带矩形区域
 * 赤道附近适合咖啡种植的地理区域，即南回归线和北回归线之间的区域
 */
const coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(
  -180.0,
  -23.43687,
  180.0,
  23.43687,
);

/**
 * cartographicLimitRectangle: 
 * 用于指定 Rectangle，用于将 globe 渲染限制为制图区域。默认为制图坐标的最大范围。
 */
globe.cartographicLimitRectangle = coffeeBeltRectangle;
globe.showSkirts = false;
globe.backFaceCulling = false;
globe.undergroundColor = undefined;
scene.skyAtmosphere.show = false;

// 添加矩形以显示边界
const rectangles = [];

for (let i = 0; i < 10; i++) {
  rectangles.push(
    viewer.entities.add({
      rectangle: {
        coordinates: coffeeBeltRectangle,
        material: Cesium.Color.WHITE.withAlpha(0.0),
        height: i * 5000.0,
        outline: true,
        outlineWidth: 4.0,
        outlineColor: Cesium.Color.WHITE,
      },
    }),
  );
}

Sandcastle.addToggleButton("启用(咖啡带区域)限制", true, function (checked) {
  if (checked) {
    viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
  } else {
    viewer.scene.globe.cartographicLimitRectangle = undefined;
  }
});

Sandcastle.addToggleButton("显示边界", true, function (checked) {
  const rectanglesLength = rectangles.length;
  for (let i = 0; i < rectanglesLength; i++) {
    const rectangleEntity = rectangles[i];
    rectangleEntity.show = checked;
  }
});