Working with large client-side FeatureLayers, so called feature collections, can be challenging. When naively adding many features at once, your app might be slow or even unresponsive just from the time it takes to generate all the Graphic instances.
This example demonstrates how to add 100,000 features to a feature collection while keeping your app interactive.
We achieve this by calling applyEdits with batches of features on an initially empty FeatureLayer.
The function upload (as shown below) creates and uploads batches of features every 4 milliseconds until there are no more features left to consume.
The function uploadFeatures is in charge of creating and uploading batches of features during a batch time of 4 ms, until there is no more features to consume.
/**
* Function that upload as many features as possible to a
* client-side FeatureLayer without blocking the UI thread.
*
* @param layer - The layer to upload the features to
* @param iterator - The iterator to consume features
* @param batchTime - The amount of time during which the iterator can be consumed. By default 4ms
*/
async function uploadFeatures(layer, iterator, batchTime = 4) {
const start = performance.now();
let result = iterator.next();
while (!result.done) {
const start = performance.now();
const features = [];
// consume for batchTime milliseconds.
while (performance.now() - start < batchTime && !result.done) {
features.push(result.value);
result = iterator.next();
}
if (features.length) {
console.log(`uploading ${features.length} features`);
await layer.applyEdits({
addFeatures: features
});
}
}
}