Question

我正在使用leaflet-ajax按需加载geoJSON。我想找到最大theProperty值，这样我就可以使用它来缩放要素的填充颜色，然后再添加到地图中。

这是我的一般方法：

    function maxBinPropertyValue(theProperty) {
        var theGeoJson = null;
        var maxPropertyValue = 0;
        var propertyValue = null;
        var theGeoJson = new L.GeoJSON.AJAX(binsFileName());
        theGeoJson.on('data:loaded', function() {
            console.log('The data is loaded');
            theGeoJson.eachLayer(function(layer) {
                console.log('Looping through the layers');
                propertyValue = feature.properties[theProperty];
                if (propertyValue > maxPropertyValue) {
                    maxPropertyValue = propertyValue;
                    console.log('Max so far: ' + maxPropertyValue);
                };
            });
        });
        theGeoJson = null;
        console.log('The final maximum value: ' + maxPropertyValue);
        return maxPropertyValue;
    };

我正在尝试等待data:loaded事件，然后遍历所有功能以查找theProperty的最大值，并返回到调用例程。

除非它不起作用。第一个console.log说'数据已加载'。永远不会到达第二个和第三个console.logs，第四个和最后一个会报告0的{{1}}值。

如何在设置样式之前检查功能集中的所有功能，并保证不会出现异步问题？

PS：我很确定我不能使用maxPropertyValue而不是上面的方法，因为我需要检查每个功能的属性以确定集合中的最大值，然后才能设置任何功能的样式

Answer 1

关于检查数据和检索最大值的问题，您确实面临着JavaScript的经典异步概念。

请参阅How do I return the response from an asynchronous call?

如果处理不当，异步会成为一个问题，但如果处理得当，则是一个优势。

简而言之，您不会以“标准”顺序的方式管理异步，但您应该考虑执行的部分代码（回调）在稍后的时间基于事件。

每当你提供#id1 .selectize-input, #id2 .selectize-input, #id3 .selectize-input {}; #id1 .selectize-dropdown, #id2 .selectize-dropdown, #id3 .selectize-dropdown {};作为参数时，它肯定是回调，它将在以后执行，但很可能很晚接下来的说明。

所以在你的情况下，你的第二个和第三个function都在一个回调中，一旦你的数据被加载就会被执行，这将比你的第四个{{1>晚发生 }}

至于下一步（样式和添加到地图），您实际上不需要执行额外的AJAX调用，因为您已经在console.log变量中提供了所有数据。你只需要正确地重构/重新设计它。

这是一个很好的方法，可以在很小的步骤中解决你的问题。
祝你好运！

PS：话虽如此，ES7提供了console.log和theGeoJson功能，可以模拟异步功能的顺序执行。但是为了能够使用这些，你需要latest browser versions或 transpilation ，这对于初学者来说可能需要学习和配置，而不是理解如何使用异步JS。< / p>

Answer 2

我也遇到了这个问题，不得不全神贯注，所以在这里给出一个明确的解决方案示例；

// make a request with your "url"
var geojsonLayer = new L.GeoJSON.AJAX("url");

// define your functions to interact with data
function thingToDoBeforeLoadingStarts () {
    // do stuff
}
function thingToDoForEachFileDownloaded () {
    // do stuff
}
function thingToDoAfterAllDownloadEnds () {
    // do stuff
}

// attach listeners
geojsonlayer.on("data:loading",thingToDoBeforeLoadingStarts);
geojsonLayer.on("data:progress",thingToDoForEachFileDownloaded)
geojsonLayer.on("data:loaded",thingToDoAfterAllDownloadEnds);

AJAX和Leaflet：在样式化/添加到地图

2 个答案: