如何解析JSONP響應並使用OpenLayers返回值？

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. 
 
    } 
 
}