geoserver解析元数据获取图层相关参数

需求：

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属性获取其文本内容。