AJAX和Leaflet：在样式化/添加到地图之前检查要素属性

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报告maxPropertyValue的值。

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

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

Answer 1

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

见How do I return the response from an asynchronous call?

如果处理不当，异步是一个问题，但如果处理得当，则是一个优点。

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

每当你提供function作为参数时，它肯定是一个将在稍后执行的回调，但很可能比下一个指令晚得多。

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

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

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

祝好运！

PS：话虽如此，ES7提供了async和await功能，可以模拟异步功能的顺序执行。但是为了能够使用它们，你需要latest browser versions或transpilation，这对于初学者来说可能比今天学习和配置更多，而不是理解如何使用异步JS。