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 sample demonstrates how to add 100,000 features to a feature collection while keeping your app interactive. To add, remove, or update features in a client-side FeatureLayer at runtime, you must call FeatureLayer.applyEdits() and pass in an array of graphics. In this sample, we achieve this by calling applyEdits() with batches of features on an initially empty FeatureLayer.
The function uploadFeatures (as shown below) creates and uploads batches of features every 4 milliseconds until there are no more features left 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, }); } } }