需求：

1、通过geoserver地址获取所有图层名称；

2、加载wms服务，实现自动定位。

获取图层名和范围视图有两种思路：

1、调取geoserver的rest接口。缺点就是需要验证登录。

rest接口官方文档：GeoServer API Docs

2、通过GetCapabilities接口解析元数据。元数据是xml格式的，在JavaScript中，可以使用DOM解析器来解析XML文本数据

为了简单起见选择第二种。话不多说，直接上代码：

// 使用fetch发送GetCapabilities请求
fetch(`/geoserver/hd/wms?service=WFS&version=1.0.0&request=GetCapabilities`)
  .then(response => response.text())
  .then(text => new DOMParser().parseFromString(text, 'text/xml'))
  .then(xml => {
    const layerList = []
    // 解析XML获取图层信息
    const featureTypeList = xml.childNodes[0].getElementsByTagName('FeatureTypeList')[0].getElementsByTagName('FeatureType')
    for (let i = 0; i < featureTypeList.length; i++) {
      const element = featureTypeList[i];
      const layerName = element.getElementsByTagName('Name')[0].textContent; // 获取图层名称
      const minx = element.getElementsByTagName('LatLongBoundingBox')[0].getAttribute('minx')
      const miny = element.getElementsByTagName('LatLongBoundingBox')[0].getAttribute('miny')
      const maxx = element.getElementsByTagName('LatLongBoundingBox')[0].getAttribute('maxx')
      const maxy = element.getElementsByTagName('LatLongBoundingBox')[0].getAttribute('maxy')
      layerList.push({
        layerName,
        minx,
        miny,
        maxx,
        maxy
      })
    }
    console.log(layerList) // 打印图层信息
  })
  .catch(error => console.error('Error fetching GetCapabilities:', error));

获取结果如下：

通过请求获取XML数据的字符串。然后，使用DOMParser的parseFromString方法将这个字符串解析成一个XML文档对象。接着，使用getElementsByTagName方法找到名为'节点名称'的元素，并通过textContent属性获取其文本内容。