利用geoserver发布的wmts图层url元数据获取对应的bbox信息

简介

由于项目中需要加载大量的geoserver发布的wmts图层数据，大概有一百多个图层需要加载，所以后端只给了我们一个geoserver服务的地址让我们请求，没有其他数据了。比如说这个图层的bbox。所以就需要用其他办法获取bbox信息了。

cesium加载wmts

由于后台提供的信息太少，所以我就直接这样渲染了，

// res.data为一个数字数组[233,444,221] 没错。这就是后端返回的数据！
   res.data.forEach(item => {
       const shadedRelief1 = new Cesium.WebMapTileServiceImageryProvider({
        style: '',
        url: mapViewGeoserverUrl,
        layers: `li:lei_${item}`,
        format: 'image/png',
        tileMatrixSetID: 'EPSG:4326',
        tilematrix: 'ESPG:4326',
        tileMatrixLabels,
        maximumLevel: 21,
        tilingScheme,
      });
      let layer = viewer.imageryLayers.addImageryProvider(shadedRelief1);
    });

但是这样加载出来会非常的卡，因为没有设置rectangle属性，所以无论相机视图在哪里都会加载所有的图层数据（视图内没有的图层也会发送请求加载数据）
补充一下rectangle功能：
设置图层的rectangle属性的作用是限定图层在地球表面的可视化区域。这主要影响图层在地球上的显示范围，确保图层只在指定的地理区域内可见。举例来说，假设你有一张地图图层，但你只对地球上的特定区域感兴趣，你可以使用rectangle属性将图层限制在这个区域内，从而提高渲染性能，避免在不必要的区域渲染。
也就是说加了这个属性图层只在这个范围内才会进行渲染加载数据，从而提高性能。

根据元数据获取bbox

以上可知，这个rectangle属性是非常有必要加的，但是后端嫌麻烦又没给我们这个数据，所以就需要我们自己想办法了，无意间得知通过geoserver的url添加一个参数?REQUEST=GetCapabilities可以得到geoserver服务的XML数据，XML数据长这样：

可以看出这里面包含了两条经纬度信息的数据，我们就看看能不能从这里取数据，刚好cesium里有个api Cesium.Resource.fetchXML(options)可以获取到这个dom文档,然后拿到xml数据进行循环遍历获取到dom节点中的数据就可以了。

* 根据geoserver地址获取图层服务的bbox
 * @param {string} str
 * @returns Map
 */
export const getBBoxFromXML = str => {
  const url = `${str}?REQUEST=GetCapabilities`;
  return Cesium.Resource.fetchXML(url).then(capabilities => {
    // 解析 XML 响应，找到所需图层的 bbox 信息
    const layersDom = capabilities.querySelectorAll('Layer');
    const obj = new Map();
    for (let i = 0; i < layersDom.length; i++) {
      const Layer = layersDom[i];
      // 获取到每个图层的名字
      const key = Layer.getElementsByTagName('ows:Title')[0].textContent.split('_')[1];
      if (obj.has(key)) {
        continue;
      }
      // 获取到每个图层的bbox
      const lowerCorner = Layer.getElementsByTagName('ows:LowerCorner')[0].textContent;
      const upperCorner = Layer.getElementsByTagName('ows:UpperCorner')[0].textContent;
      const bbox = [...lowerCorner.split(' '), ...upperCorner.split(' ')].map(i => Number(i));
      obj.set(key, bbox);
    }
    return obj;
  });
};

注意我这里返回了一个Map结构的数据。之后调用这个方法就可以获取到所有图层对应的bbox数据了。
可以页面一进来就调用这个方法，然后把值存起来，在加载wmts的时候再根据接口的字段进行取值
然后再给图层添加rectangle: new Cesium.Rectangle.fromDegrees(你的bbox),即可

小结

主要是循环遍历XML获取数据这部分，刚开始看到这数据感觉无处下手，但是遍历起来也没那么麻烦。