openlayers 点击geoserve发布的WMS数据获取属性信息_通过axios从wms服务获取属性信息-CSDN博客

本文链接：https://blog.csdn.net/gis_zzu/article/details/101167441

本文介绍了一种在Web环境中获取WMS服务属性数据的方法，包括普通web工程和Vue项目中实现WMS服务数据要素信息的获取过程。通过单击地图事件触发，利用OpenLayers库的WMS数据源，请求WMS服务的GetFeatureInfo操作，解析返回的JSON数据，获取要素属性及图层ID，用于展示不同的弹出框内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、普通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
    // }) 
}