OpenLayers中加载WMS图层并实现定位功能

我们在通过OpenLayers加载WMS服务后发现OpenLayers没有现成的定位到WMS图层的方法，这时候我们需要自己去获取到图层extents来自己手动定位到该位置，下面是实现方法

// 添加新的WMS图层
    const newWMSLayer = new TileLayer({
        source: new TileWMS({
            url: newWMSConfig.url,
            params: {
                'LAYERS': newWMSConfig.layers,
                'TILED': true
            },
            serverType: 'geoserver',
            crossOrigin: 'anonymous'
        })
    });
    map.addLayer(newWMSLayer);

//图层定位
const locateLayer = async (layerName) => {
    try {
        const wmsSource = new TileWMS({
            url: url,
            params: {
                'LAYERS': LAYERS,
                'VERSION': '1.1.0',
                REQUEST: 'GetCapabilities',
                SERVER: 'WMS'
            },
            projection: getProjection('EPSG:4326'),
            crossOrigin: 'anonymous'
        })
        try {
            const respose = await fetch(
                wmsSource.getUrls()[0] + '?SERVICE=WMS&REQUEST=GetCapabilities'
            )
            const text = await respose.text()
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(text, "text/xml");
            const layers = xmlDoc.getElementsByTagName('Layer');
            const layerNames = [];

            for (let layer of Array.from(layers)) {
                const name = layer.getElementsByTagName('Name')[0].textContent;
                if (name === layerName) {
                    const bbox = layer.getElementsByTagName('BoundingBox')[0]
                    if (!bbox) {
                        console.warn('未找到图层边界框信息')
                        return
                    }
                    const minX = parseFloat(bbox.getAttribute('minx'));
                    const minY = parseFloat(bbox.getAttribute('miny'));
                    const maxX = parseFloat(bbox.getAttribute('maxx'));
                    const maxY = parseFloat(bbox.getAttribute('maxy'));
                    const extent = [minX, minY, maxX, maxY];
                    map.getView().fit(extent, { padding: [50, 50, 50, 50], duration: 1000 })
                    return;
                }
            }
            console.warn('未找到指定图层')
            return;
        } catch (error) {
            console.error('获取WMS图层信息失败', error);
        }

    } catch (error) {
        console.error('获取WMS图层信息失败', error);
    }
}