OpenLayer+Geoserver WMS服务获取要素属性，并转为JSON。

说明

GeoServer的WMS服务下点击要素可以获得属性，但一般来说是html（xml）格式的，虽然可以获得要素属性，但是格式无法灵活自定义。这里采用将获得的xml文本进行解析，转换为json对象，以便后期自由定义显示风格

通过点击要素获取属性html文本，并解析为json

地图点击部分的代码：

map.on("click", function(e) {
      if (e.dragging) return;
      //因为WFS没有加载入Map，所以用Map.getFeaturesAtPiexl的方法不可用<--此方法可以设定容差
      //只能用vectorSource的getFeatures的方法，而getFeaturesAtCoordinate不能设定容差
      //只能用getFeaturesInExtent的方法<----此方法不可行，识别的features乱七八糟
      //用wms的getFeatureInfoUrl方法，获取XML，再解析转换成Json来处理。
      var cord = e.coordinate;
      var pixel = e.pixel;
      //map获取feature，html格式
      //layerGroupTest为ol/layer/Tile类型
      var url = layerGroupTest
        .getSource()
        .getGetFeatureInfoUrl(
          e.coordinate,
          map.getView().getResolution(),
          "EPSG:4326",
          { INFO_FORMAT: "text/html", FEATURE_COUNT: 50 }
        );
      if (url) {
        Axios.get(url).then(function(response) {
          //解析XML，生成Json
          var str = stringify(response.data);
          var jsonObject = createJson(response.data);
          me.elJsonObject = jsonObject;
          console.log(jsonObject);
        });
      }
    });

createJson的代码：

var createJson = function (str) {
    var xmlData = createXml(str);

    var jsonObject = {};
    jsonObject["layers"] = [];
    var tables = xmlData.getElementsByTagName('table');
    for (var i = 0; i < tables.length; i++) {
        var layerJson = {};
        var element = tables[i];
        // console.log(element);
        //图层名
        var layerName = element.getElementsByTagName('caption')[0].textContent.toString();
        layerJson["layername"] = layerName;
        //属性
        var featureJson = []; //最外层
        var kvs = element.getElementsByTagName('tr');
        //第1个为Key值，以后多个为分别的Value值
        var keys = kvs[0].children;
        //创建一个存储Keys的对象
        var featureKeys=[];
        for(var j=0;j<keys.length;j++){
            featureKeys.push(keys[j].textContent);
        }
        layerJson["featureKeys"]=featureKeys;
        //从第2个开始
        for (var j = 1; j < kvs.length; j++) {
            var kvsJson = {};
            var values = kvs[j].children;
            for (var k = 0; k < keys.length; k++) {
                kvsJson[keys[k].textContent] = values[k].textContent;
            }
            featureJson.push(kvsJson);
        }
        layerJson["featureInfos"] = featureJson;
        jsonObject["layers"].push(layerJson);
    };
    return jsonObject;
}
var createXml = function (str) {
    if (document.all) {//IE浏览器
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.loadXML(str);
        return xmlDoc;
    }
    else {//非IE浏览器
        return new DOMParser().parseFromString(str, "text/xml");
    }
}

Json数据相对自由 ，可以根据需要展示出来。