-1
我有一個代碼，我從地理服務器請求數據並在地圖上顯示geoJSON。對於這個請求，我使用了三個AJAX調用，如下所示：多個AJAX調用請求JSONP GeoServer
$(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 © 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 ? '–' + 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％的時間內發生。什麼類型的技術可以用來解決它？我聽說過被緩存的對象，但無法將其應用到我的代碼上，我的專業水平遠非如此。雖然這可能傾向於GIS問題，但我認爲這類問題更多地與普通的jQuery和異步調用相關。