我们在通过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);
}
}