如何使用 OpenLayers 解析 JSONP 响应并返回值？

Question

我正在使用 OpenLayers 和 geoserver 来构建应用程序。对一切都很陌生，这是我的第一个应用程序。现在我正在尝试使用 WMS getFeatureInfo 来获取功能信息并在用户单击功能时显示在弹出窗口中。为了解决跨域问题，我现在正在尝试获取 JSONP 响应。我得到的回应是：

parseResponse({"type":"FeatureCollection","features":[{"type":"Feature","id":"Fire_Boundary_Pro.1","geometry":{"type":"MultiPolygon","coordinates":[[[[414495.86280000024,6451439.778],[414501.3269999996,6451437.0124],[414572.5887000002,6451444.5907],[414614.8359000003,6451368.1611],[414679.86149999965,6451410.5882],[414793.0769999996,6451376.6343],[414905.6501000002,6451419.4576],[414983.7874999996,6451315.405],[414978.77660000045,6451203.6776],[415021.0197999999,6451127.2464],[415051.8420000002,6450994.8769],[415029.2346000001,6450855.0812],[414899.8300999999,6450693.4524],[414882.8183000004,6450595.5852],[414776.48950000014,6450517.9117],[414747.5351999998,6450426.9246],[414688.4584999997,6450384.5476],[414605.3772,6450369.8903],[414568.95940000005,6450460.3295],[414555.8437000001,6450606.8071],[414473.11259999964,6450550.2695],[414468.34250000026,6450410.6221],[414433.15529999975,6450354.4835],[414350.7204999998,6450263.0455],[414273.40699999966,6450269.3751],[414076.47389999963,6450365.4401],[414061.89190000016,6450388.7117],[414037.87590000033,6450380.4262],[413891.39940000046,6450430.6506],[413934.48699999973,6450516.7853],[413948.07650000043,6450636.9786],[413961.37650000025,6450791.4776],[414092.2400000002,6450861.1987],[414153.67080000043,6450897.9731],[414179.43510000035,6450913.3962],[414281.23610000033,6450965.7158],[414279.7922,6451137.244],[414352.3854,6451189.3169],[414395.91280000005,6451223.991],[414350.94269999955,6451360.8451],[414495.86280000024,6451439.778]]]]},"geometry_name":"the_geom","properties":{"area":8.09003398112E-5,"Shape_Leng":4319.38797802,"Shape_Area":828429.079784}}]})

但是我不确定如何解析 JSONP 响应并获取属性值。我正在尝试使用 OpenLayers.Format.JSON.read 方法（不确定这是否是正确的方法），但它返回一个错误，即它是一个未定义的构造函数。这是我的代码：

map.events.register('click', map, function (e) {
                document.getElementById('nodelist').innerHTML = "Loading... please wait...";

                var params = {
                    REQUEST: "GetFeatureInfo",
                    EXCEPTIONS: "text/javascript",
                    BBOX: map.getExtent().toBBOX(),
                    SERVICE: "WMS",
                    //use JSONP format
                    INFO_FORMAT: 'text/javascript',
                    QUERY_LAYERS: map.layers[0].params.LAYERS,
                    FEATURE_COUNT: 50,
                    Layers: 'Bushfire_Com_Study:Fire_Boundary_Pro',
                    WIDTH: map.size.w,
                    HEIGHT: map.size.h,
                    format: format,
                    styles: map.layers[0].params.STYLES,
                    srs: map.layers[0].params.SRS,

                // handle the wms 1.3 vs wms 1.1 madness
                if(map.layers[0].params.VERSION == "1.3.0") {
                    params.version = "1.3.0";
                    params.j = parseInt(e.xy.x);
                    params.i = parseInt(e.xy.y);
                } else {
                    params.version = "1.1.1";
                    params.x = parseInt(e.xy.x);
                    params.y = parseInt(e.xy.y);
                }

                // merge filters
                if(map.layers[0].params.CQL_FILTER != null) {
                    params.cql_filter = map.layers[0].params.CQL_FILTER;
                } 
                if(map.layers[0].params.FILTER != null) {
                    params.filter = map.layers[0].params.FILTER;
                }
                if(map.layers[0].params.FEATUREID) {
                    params.featureid = map.layers[0].params.FEATUREID;
                }

                OpenLayers.loadURL("http://localhost:8080/geoserver/Bushfire_Com_Study/wms", params, this, setHTML, setHTML);
                OpenLayers.Event.stop(e);
            });


        // sets the HTML provided into the nodelist element
        function setHTML(response){
            var json_format = new OpenLayers.Format.JSON();
            var object = json_format.read(response);
            document.getElementById('nodelist').innerHTML = object.features[0].properties['area'];
        };

Answer 1

一个老问题，但我在其他任何地方都找不到答案。解决方案的最重要来源是 http://dev.openlayers.org/docs/files/OpenLayers/Protocol/Script-js.html 和 http://docs.geoserver.org/stable/en/user/services/wms/vendor.html#wms-vendor-parameters.

我的代码包含类似于以下内容。

// The Script protocol will insert the JSONP response in to the DOM.
var protocol = new OpenLayers.Protocol.Script({
  url: someUrl,
  callback: someCallbackFunction,
});

// GeoServer specific settings for the JSONP request.
protocol.callbackKey = 'format_options';
protocol.callbackPrefix = 'callback:';

// WMS parameters like in the question
var params={
  REQUEST: "GetFeatureInfo",
  EXCEPTIONS: "text/javascript",
  INFO_FORMAT: 'text/javascript',
  //etc
};

// Send the request.
protocol.read({
  params: params
});

// Callback to handle the response.
function someCallbackFunction(response) {
  for(var feature in response.features) {
    // Do something with the returned features.
  }
}