Cesium入门（七）：设置影像图层的覆盖范围

本章介绍Cesium JS库的Rectangle类，并以GeoServer服务器为例演示了在加载EPSG:4326网格的瓦片地图时，通过设置rectangle参数来限定图层的覆盖范围。

主要包括以下内容：

• Rectangle类
• 设置rectangle参数

在Cesium入门（六）：加载EPSG4326网格的瓦片地图章节中，通过创建一个WMTS ImageryProvider类，在设置了必要的参数后就可以访问GeoServer发布的地图瓦片服务了。但是，当浏览器请求图层有效覆盖范围之外的瓦片时就会报一系列的瓦片“列（或行）超出范围”的400错误。虽然这种情况并不影响图层的正确显示，但是浏览器去向服务器请求一个本来就不存在的瓦片，不仅浪费了大量的网络交互时间，更是让誓言消灭一切Bug的程序员们感觉不怎么完美，一个真正的程序员是绝对不能容忍程序执行过程中有任何一点的错误和警告出现的。那么，怎样才能让浏览器不对外发出无效的瓦片请求呢？

1 Rectangle类

Cesium JS库中提供了一个Rectangle类，专门用来使用弧度来表示一个矩形的区域，一个Rectangle就代表着一个使用经度和纬度坐标定义的二维区域。

构造一个Rectangle需要定义矩形区域的四个边的经经纬度，依次为west、south、east和north共4个参数，单位都为弧度，取值范围为[-Pi, +Pi]。

通常条件下，人们更喜欢使用度而不是弧度来表示地理范围，此时就可使用Rectangle的另外一个静态函数fromDegrees(west, south, east, north)。

2 设置rectangle参数

ImageryProvider类有一个rectangle构造参数，用来表示些图层覆盖的范围。一般来说，只要不是覆盖整个地球表面的图层都应该设置这个rectangle参数。

（1）获取图层的区域参数

对于使用GeoServer发布的图层可以很容易地获得图层的边界。在GeoServer入门（一）：发布第一个WMS图层文章中，我们知道，每一个在GeoServer服务器上发布的GeoTIFF图像必须包含自己的地理坐标，所以通过“图层编辑”页面，我们应该能够看到这个图层的边界坐标。

当然，也可以使用gdalinfo之类的应用程序来对这个GeoTIFF文件进行解析，从解析结果中也可以得到其边界坐标。

 如上图中显示出的是度分秒格式的坐标边界，实际使用时转换成度即可。

（2）构造Rectangl对象

第（1）步中获得的图层边界坐标全部都是以度为单位，所以在生成rectangle对象时可以使用Rectangle.fromDegrees(west, south, east, north)函数。有了rectangle对象之后只需将其赋值给ImageryProvider的rectangle成员即可。

主要代码如下：

    <script>
      let rectangle = new Cesium.Rectangle.fromDegrees(109.34, 34.75, 109.92, 35.16);

      let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
        url: '/map/gwc/service/wmts/rest/pucheng:satellite/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
        style: 'raster',
        tileMatrixSetID: 'EPSG:900913',
        rectangle: rectangle
      });
    </script>

（3）图层预览

在浏览器中预览图层，可以发现在“Web开发者工具”中再也不会出现那烦人的红色400错误了，所有的有效范围之外的瓦片请求再也不会发出来了。