JSONPジオサーバーを要求する複数のAJAX呼び出し

-1

ジオサーバからデータを要求し、geoJSONをマップに表示するコードがあります。この要求に対して、私は次のような3つのAJAX呼び出しを使用しています。JSONPジオサーバーを要求する複数のAJAX呼び出し

$(document).ready(function(){ 

//BASEMAP 
var center = new L.LatLng(-0.8936,119.8638); 
var map = new L.Map('map', { center: center, zoom: 14, attributionControl:true, zoomControl:false}); 

osmTile = "http://tile.openstreetmap.org/{z}/{x}/{y}.png"; 
osmCopyright = "Map data &copy; 2016 OpenStreetMap contributors"; 
osmLayer = new L.TileLayer(osmTile, { maxZoom: 18, attribution: osmCopyright }); 
map.addLayer(osmLayer); 


//URL SERVICE 
var owsrootUrl = 'http://sample.com/geoserver/ows'; 

//different color in layers 
function getColor(d) { 
    return d > 10000 ? '#FF0000' : 
     d > 5000 ? '#FF9900' : 
     d > 2000 ? '#E31A1C' : 
     d > 1000 ? '#00FF00' : 
     d > 500 ? '#FD8D3C' : 
     d > 200 ? '#0000CC' : 
     d > 100 ? '#FED976' : 
        '#FFEDA0'; 
} 
function style(feature) { 
    return { 
     weight: 1, 
     opacity: 3, 
     color: 'white', 
     dashArray: '3', 
     fillOpacity: 3, 
     fillColor: getColor(feature.properties.luas_tanah) 
    }; 
} 

var lyr_1 = new L.LayerGroup(); 
var lyr_2 = new L.LayerGroup(); 
var lyr_3 = new L.LayerGroup(); 
var lyr_4 = new L.LayerGroup(); 

var defaultParameters = { 
    service : 'WFS', 
    version : '1.0.0', 
    request : 'GetFeature', 
    typeName : 'pbb:view_map', 
    maxFeatures: 1000, 
    outputFormat : 'text/javascript', 
    format_options : 'callback:getJson', 
    SrsName : 'EPSG:4326' 
}; 
var parameters = L.Util.extend(defaultParameters); 
var URL = owsrootUrl + L.Util.getParamString(parameters); 

var lyr_1 = new L.LayerGroup(); 
var ajax1 = $.ajax({ 
    type: 'GET', 
    url : URL, 
    dataType : 'jsonp', 
    async: false, 
    jsonpCallback : 'getJson', 
    success : function (response) { 
     console.log("Layer 1"); 
     L.geoJson(response, { 
      style: function (feature) { 
       return { 
        stroke: true, 
        color: getColor(feature.properties.luas_tanah), 
        opacity: 1, 
        weight: 1 
       }; 
      }, 
      onEachFeature: function (feature, layer) { 
       popupOptions = {maxWidth: 200}; 
       layer.bindPopup("<b>D NOP : </b> " + feature.properties.d_nop       
        ,popupOptions); 
      } 
     }).addTo(lyr_1); 
    }, 
    error: function (xhr, status) { 
     alert("Failed call Layer A"); 
    } 
}); 

var defaultParameters1 = { 
    service : 'WFS', 
    version : '1.0.0', 
    request : 'GetFeature', 
    typeName : 'pbb:view_map', 
    maxFeatures: 1000, 
    outputFormat : 'text/javascript', 
    format_options : 'callback:getJson', 
    SrsName : 'EPSG:4326' 
}; 
var parameters1 = L.Util.extend(defaultParameters1); 
var URL1 = owsrootUrl + L.Util.getParamString(parameters1); 

var lyr_2 = new L.LayerGroup(); 
var ajax2 = $.ajax({ 
    type: 'GET', 
    url : URL1, 
    dataType : 'jsonp', 
    async: false, 
    jsonpCallback : 'getJson', 
    success : function (response) { 
     console.log("Layer 2"); 
     L.geoJson(response, { 
      style: function (feature) { 
       return { 
        stroke: true, 
        color: getColor(feature.properties.luas_tanah), 
        opacity: 0.8, 
        weight: 1 
       }; 
      }, 
      onEachFeature: function (feature, layer) { 
       popupOptions = {maxWidth: 200}; 
       layer.bindPopup("<b>D NOP : </b> " + feature.properties.d_nop 
        ,popupOptions); 
      } 
     }).addTo(lyr_2); 
    }, 
    error: function (xhr, status) { 
     alert("Failed call Layer B"); 
    } 
}); 

var defaultParameters2 = { 
     service : 'WFS', 
     version : '1.0.0', 
     request : 'GetFeature', 
     typeName : 'pbb:view_map', 
     maxFeatures: 1000, 
     outputFormat : 'text/javascript', 
     format_options : 'callback:getJson', 
     SrsName : 'EPSG:4326' 
    }; 
var parameters2 = L.Util.extend(defaultParameters2); 
var URL2 = owsrootUrl + L.Util.getParamString(parameters2); 

var lyr_3 = new L.LayerGroup(); 
var ajax3 = $.ajax({ 
    type: 'GET', 
    url : URL2, 
    dataType : 'jsonp', 
    async: false, 
    jsonpCallback : 'getJson', 
    success : function (response) { 
     console.log("Layer 3"); 
     L.geoJson(response, { 
      style: function (feature) { 
       return { 
        stroke: true, 
        color: getColor(feature.properties.luas_tanah), 
        opacity: 0.8, 
        weight: 1 
       }; 
      }, 
      onEachFeature: function (feature, layer) { 
       popupOptions = {maxWidth: 200}; 
       layer.bindPopup("<b>D NOP : </b> " + feature.properties.d_nop 
        ,popupOptions); 
      } 
     }).addTo(lyr_3); 
    }, 
    error: function (xhr, status) { 
     alert("Failed call Layer C"); 
    } 
}); 

var defaultParameters3 = { 
     service : 'WFS', 
     version : '1.0.0', 
     request : 'GetFeature', 
     typeName : 'pbb:view_map', 
     maxFeatures: 1000, 
     outputFormat : 'text/javascript', 
     format_options : 'callback:getJson', 
     SrsName : 'EPSG:4326' 
    }; 
var parameters3 = L.Util.extend(defaultParameters3); 
var URL3 = owsrootUrl + L.Util.getParamString(parameters3); 

var lyr_4 = new L.LayerGroup(); 
var ajax4 = $.ajax({ 
    url : URL3, 
    dataType : 'jsonp', 
    async: false, 
    jsonpCallback : 'getJson', 
    success : function (response) { 
     console.log("Layer 4"); 
     L.geoJson(response, { 
      style: function (feature) { 
       return { 
        stroke: true, 
        color: getColor(feature.properties.luas_tanah), 
        opacity: 0.8, 
        weight: 1 
       }; 
      }, 
      onEachFeature: function (feature, layer) { 
       popupOptions = {maxWidth: 200}; 
       layer.bindPopup("<b>D NOP : </b> " + feature.properties.d_nop 
        ,popupOptions); 
      } 
     }).addTo(lyr_4); 
    }, 
    error: function (xhr, status) { 
     alert("Failed call Layer D"); 
    } 
}); 

var baseMaps = [ 
       { 
        groupName : "OSM Base Maps", 
        layers : { 
         "OpenStreetMaps" : osmLayer 
        } 
       } 
     ]; 


var overlays = [ 
       { 
        groupName : "Kecamatan", 
        expanded : true, 
        layers  : { 
         "Layer A"  : lyr_1, 
         "Layer B"  : lyr_2, 
         "Layer C"  : lyr_3, 
         "Layer D"  : lyr_4 
        } 
       } 
     ]; 

var options = { 
      container_width  : "300px", 
      group_maxHeight  : "800px", 
      exclusive   : true 
     }; 

var control = L.Control.styledLayerControl(baseMaps, overlays, options); 
map.addControl(control); 

var legend = L.control({position: 'bottomright'}); 
    legend.onAdd = function (map) { 
     var div = L.DomUtil.create('div', 'info legend'), 
      grades = [0, 100, 200, 500, 1000, 2000, 5000, 10000], 
      labels = [], 
      from, to; 
     for (var i = 0; i < grades.length; i++) { 
      from = grades[i]; 
      to = grades[i + 1]; 
      labels.push(
       '<i style="background:' + getColor(from + 1) + '"></i> ' + 
       from + (to ? '&ndash;' + to : '+')); 
     } 
     div.innerHTML = labels.join('<br>'); 
     return div; 
}; 
legend.addTo(map);

}）;

私の問題はページを開くたびにうまくいきますが、ページをリフレッシュするとすべてが分断されることがあります。たとえば、「レイヤA」データが表示されることがありますが、データが間違ったデータセットになることがあります。私は、コンソールに次のメッセージを取得このバグを取得する場合：私の研究で

ows?service=WFS&version=1.0.0&request=GetFeature&typeName=pbb%3Aview_map&maxFeatures=1000&outputFor…:1 Uncaught TypeError: getJson is not a function

複数のAJAX呼び出しを実行するときに、このタイプのエラーは、かなり一般的であるようです。私が理解できないのは、このエラーが100％発生しない理由です。それを修正するためにどのようなテクニックを使用できますか？ Deffered Objectsについて聞いたことがありますが、それを私のコードに適用できませんでした。私の専門知識レベルはそれほど素晴らしいものではありません。これはGISの質問に向いていますが、私はこのタイプの問題は通常のjQueryと非同期呼び出しに関連していると信じています。

出典

2016-09-22 hardi subagyo

jsonpCallbackタイプ：
はJSONPリクエストのためのコールバック関数名を指定します（）文字列または関数。この値は、jQueryによって自動的に生成されるランダム名の代わりに使用されます。 jQueryは、リクエストの管理とコールバックとエラー処理の提供を容易にするため、一意の名前を生成することをお勧めします。

使用しないでください。一度に飛行中の複数の要求がある場合（同じ名前を使用するように強制されているので）互いに上書き、そのコールバック関数を

jsonpCallback : 'getJson',

：

は、この行を削除します。
同期要求は（あなたが一度に飛行中の複数の同期要求を持つことができないので、（彼らはキュー））問題を解決するだろう作る

async: false

...しかし、彼らは以下のとおりです。

Horrible（正当な理由で、メインブラウザのスレッドでXHRで非推奨になりました）

JSONPと完全に互換性がありません赤）。

リクエストを同期させる試みも削除する必要があります。

出典

2016-09-22 13:59:25 Quentin

JSONPジオサーバーを要求する複数のAJAX呼び出し

答えて

関連する問題