openlayers 点击geoserve发布的WMS数据获取属性信息

一、普通web工程写法

/*** 获取WMS服务的属性数据* @param map* @param wmsSource*/function getWMSInfo(map,wmsSource){var eventKey = map.on('singleclick', function(evt) {$(".testMenu").hide()var view = map.getView()var viewResolution = /** @type {number} */ (view.getResolution());var url = wmsSource.getGetFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:4326',{'INFO_FORMAT': 'application/json'});//封装的ajax请求getData(url,function (res) {if(res.features.length>0){var data = res.features[0].properties//获取图层IDdata.layerId = wmsSource.layerId}})});return eventKey;}

注意：

//获取图层ID

data.layerId = wmsSource.layerId

这句话就是为了获取加载wms服务时候设置的图层id，主要用来区分鼠标获取那类型数据，然后展示不同的弹出框

/*** 说明：请求后台* @param url* @param success* @param error*/function getData(url,success,error) {$.ajax({type: "POST",url:url ,dataType: "json",success: function (result){if(success) success(result)},error: function (err) {if(error) error(err)}})}

二、vue的写法

/*** 说明：获取WMS服务数据的要素信息* @param {*} map 必填，对象，地图对象* @param {*} wmsSource 必填，对象，WMS服务的数据源*/export function getWMSInfo(map,wmsSource){// return new Promise((resolve,reject)=>{var eventKey = map.on('singleclick', function(evt) {let view = map.getView()var viewResolution = /** @type {number} */ (view.getResolution());var url = wmsSource.getGetFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:4326',{'INFO_FORMAT': 'application/json'});if (url) {axios.get(url).then(res=>{console.log(res)// resolve(res.data.features,eventKey)}).catch(error=>{// reject("查询失败")})}});// resolve(eventKey)console.log("点击函数",eventKey)return eventKey// }) }