Question

我有一个代码，我从地理服务器请求数据并在地图上显示geoJSON。对于此请求，我使用了三个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);

}）;

现在我的问题是每次打开页面时一切正常，但有时候当我刷新页面时，一切都会分崩离析。例如，某些时候＆＃34; A层和＃34;显示数据，有时数据会在错误的数据集上结束。当我收到此错误时，我在控制台中收到以下消息：

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和异步调用更相关。

Answer 1

jsonpCallback 类型：字符串或函数（）
指定回调函数 JSONP请求的名称。将使用此值代替随机名称由jQuery自动生成。最好是让 jQuery生成一个唯一的名称，因为它可以更容易地管理请求并提供回调和错误处理。

不要使用它。

删除此行：

jsonpCallback : 'getJson',

当您一次有多个请求时，它们的回调函数（因为您强制它们使用相同的名称）互相覆盖。

async: false

发出同步请求可以解决问题（因为你不能同时在飞行中有多个同步请求（它们排队））......但它们是：

可怕（他们在主浏览器主题上的XHR中被弃用了，有充分的理由）
与JSONP完全不兼容（因此忽略您的指示）。

您应该删除尝试使请求同步。

多个AJAX调用请求JSONP GeoServer

1 个答案: