一、普通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
//获取图层ID
data.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
// })
}