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