Rectangle

Rectangle是CesiumJS中定义的一个矩形对象，用于表示地球上的一个矩形区域。它由两个点（或经纬度）和高度范围组成，可以用于描述一个地图视图或者一个天文观测区域。

创建一个Rectangle

Rectangle对象可以使用四个经度纬度值来创建，分别表示西南角和东北角。如果高度没有指定，则默认为0。

const rectangle = new Cesium.Rectangle(
    Cesium.Math.toRadians(west),   // 西经
    Cesium.Math.toRadians(south),  // 南纬
    Cesium.Math.toRadians(east),   // 东经
    Cesium.Math.toRadians(north)   // 北纬
);

可以使用 Rectangle.fromDegrees 方法方便地创建一个 Rectangle 对象，同时可以避免人为的角度和度的转换错误。

const rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

设置Rectangle高度

可以使用 Rectangle 对象的 height 属性来设置矩形区域的高度范围。

rectangle.height = height;

如果需要将高度保持和地表一致，则可以使用 Cesium.Ellipsoid.WGS84 全球椭球体对象来获取高度值。

const surface = Cesium.Cartesian3.fromRadiansArray([
  rectangle.west, rectangle.south,
  rectangle.east, rectangle.north
]);
const height = viewer.scene.globe.getHeight(new Cesium.RectangleGeometry({
    rectangle: rectangle,
    ellipsoid: Cesium.Ellipsoid.WGS84
}));
rectangle.height = height;

使用Rectangle

在CesiumJS中，可以使用以下方式来使用 Rectangle 对象。

RectangleGeometry

RectangleGeometry 将一个矩形区域表示为一个模型，可以使用它进行视图选择和体积计算等操作。

const instance = new Cesium.GeometryInstance({
    geometry: new Cesium.RectangleGeometry({
        rectangle: rectangle,
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
    }),
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(color)
    }
});
viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: instance,
    appearance: new Cesium.PerInstanceColorAppearance()
}));

RectangleGraphics

可以使用 RectangleGraphics 来在地图场景中显示一个矩形图形。该图形可以被更新和交互。

viewer.entities.add({
    rectangle: {
        coordinates: rectangle,
        material: 'red'
    }
});

Cesium3DTileset

可以将 Rectangle 用于 Cesium3DTileset 对象的裁剪平面，在显示大规模3D模型数据量时进行性能优化。

tileset.clippingPlanes = new Cesium.ClippingPlaneCollection({
    planes: [
        new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), 0.0),
        new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, 1.0), 0.0),
        new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), -rectangle.east),
        new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), rectangle.west),
        new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -rectangle.north),
        new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1.0, 0.0), rectangle.south)
    ],
    edgeWidth: 1.0,
    edgeColor: Cesium.Color.WHITE,
    enabled: true
});

参考

• Rectangle
• Entity
• ClippingPlaneCollection
• RectangleGeometry
• RectangleGraphics