vue项目通过GetCapabilities获取wms服务元数据信息并在openlayers进行叠加显示

vue工程通过openlayers加载wms服务：

<template><div id="map" ref="mapContainer"></div>
</template><script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import ImageLayer from 'ol/layer/Image';
import WMSCapabilities from 'ol/format/WMSCapabilities';
import OSM from 'ol/source/OSM';
import TileWMS from 'ol/source/TileWMS';export default {name: 'WmsMap',data() {return {map: null,wmsUrl: 'https://your-wms-service-url'};},mounted() {this.initMap();},methods: {async initMap() {// 创建基础地图const baseLayer = new TileLayer({source: new OSM()});// 初始化地图视图const view = new View({center: [0, 0],zoom: 2});// 创建地图实例this.map = new Map({target: this.$refs.mapContainer,layers: [baseLayer],view: view});// 加载WMS服务await this.loadWmsLayer();},async loadWmsLayer() {try {// 获取WMS能力文档const parser = new WMSCapabilities();const response = await fetch(this.wmsUrl+"?request=GetCapabilities&service=WMS");const text = await response.text();const result = parser.read(text);// 解析WMS能力文档并创建图层const wmsLayer = this.createWmsLayer(result);// 添加到地图this.map.addLayer(wmsLayer);} catch (error) {console.error('加载WMS服务失败:', error);}},createWmsLayer(capabilities) {// 获取第一个可用的图层（实际应用中可能需要选择特定图层）const layerInfo = capabilities.Capability.Layer.Layer[0];// 创建WMS源const wmsSource = new TileWMS({url: this.wmsUrl,params: {'LAYERS': layerInfo.Name,'TILED': true,'VERSION': capabilities.version},serverType: 'geoserver', // 根据你的WMS服务器类型调整crossOrigin: 'anonymous'});// 创建WMS图层return new TileLayer({source: wmsSource,opacity: 0.7,title: layerInfo.Title || layerInfo.Name});},}
};
</script><style scoped>
#map {width: 100%;height: 100%;
}
</style>