AJAX和Leaflet:在样式/添加到地图之前检查要素属性 [英] AJAX and Leaflet: Inspect feature properties before styling/adding to map

问题描述

我正在使用传单-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.log，第四个也是最后一个报告报告0为maxPropertyValue的值.

在样式化样式集之前，如何检查它们的所有特征，以确保不会出现异步问题?

PS:我很确定我不能使用onEachFeature:代替上述方法，因为在对任何功能进行样式设置之前，我需要检查每个功能的属性以确定集合中的最大值. /p>

解决方案

关于检查数据和获取最大值的问题，您确实面临着经典的异步 JavaScript概念. /p>

请参阅如何从异步调用?

如果处理不当，异步是一个问题，但是如果处理得当，异步是一个优势.

简而言之，您不是以标准" 顺序方式管理异步，而是应该考虑执行的部分代码(回调)稍后根据事件进行.

每当您提供function作为参数时，它肯定是回调，该回调将在以后的时间执行，但很可能比下一个执行的时间更晚.说明.

因此，在您的情况下，您的第2个和第3个console.log位于回调中，并且将在数据加载后执行，这将比第4个console.log发生得更晚. /p>

对于下一步(样式和添加到地图)，实际上您不需要执行额外的AJAX调用，因为您已经在theGeoJson变量中获得了所有可用数据.您只需要适当地重构/重设样式即可.

这确实是一步步解决问题的好方法.

祝你好运！

PS:也就是说，ES7提供了async和await功能，这些功能将模拟异步功能的顺序执行.但是要使用这些功能，您需要最新的浏览器版本或 transpilation ，到今天为止，对于初学者来说，这可能是更多的学习和配置工作，而不是了解如何使用异步JS.

I'm using leaflet-ajax to load geoJSON on demand. I want to find the maximum theProperty value so I can use that to scale the feature's fill colors before I add them to the map.

Here's my general approach:

    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;
    };

I'm trying to wait for the data:loaded event, then loop through all the features to find the maximum value of theProperty, which is returned to the calling routine.

Except it doesn't work. The first console.log says 'The data is loaded'. The second and third console.logs are never reached, and the fourth and final one reports a value of 0 for maxPropertyValue.

How can I examine all the features in a featureset before styling them, in a way guaranteed to not have asynchronous problems?

PS: I'm pretty sure I can't use onEachFeature: instead of the above approach, because I need to examine every feature's property to determine the maximum value in the set before I can style any of the features.

解决方案

As for your issue about inspecting your data and retrieving the maximum value, you are indeed facing the classic asynchronous concept of JavaScript.

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

Asynchronism is a problem if not dealt with properly, but an advantage if correctly handled.

To put the concept shortly, you do not manage asynchronism in a "standard" sequential way, but you should rather consider parts of code (callbacks) that are executed at a later time based on events.

Whenever you provide a function as an argument, it is certainly a callback that will be executed at a later time, but very probably much later than the next instructions.

So in your case, your 2nd and 3rd console.log are within a callback, and will be executed once your data is loaded, which will happen much later than your 4th console.log.

As for your next step (styling and adding to map), you actually do not need to perform an extra AJAX call, since you already have all data available in theGeoJson variable. You simply need to refactor / restyle it properly.

It is a good approach to break your problem in small steps indeed.

Good luck!

PS: that being said, ES7 provides async and await functionalities that will emulate a sequential execution for asynchronous functions. But to be able to use those, you need latest browser versions or transpilation, which is probably more work to learn and configure as of today for a beginner than understanding how to work with async JS.

这篇关于AJAX和Leaflet:在样式/添加到地图之前检查要素属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！