This sample demonstrates how to run aggregate spatial statistics on a FeatureLayerView to get the convex hull of grouped features when groupByFieldsForStatistics is used. Each statistics group will have a convex hull representing the smallest area containing all features in that group.
How it works
The map shows the National Forest System (NFS) lands symbolized by regions. The data was downloaded from the U.S. Forest Service website.
When the application starts, a query runs once to generate aggregated statistics to get the count and total acres of forests grouped by their regions. A statistics query also returns the convex hull geometry for each of the grouped features. The convex hull represents the smallest area containing all forests in a region.
const consumeStatsByRegion = {
onStatisticField: statsField,
outStatisticFieldName: "totalAcresStatsField",
statisticType: "sum"
};
const forestsInRegion = {
onStatisticField: "OBJECTID",
outStatisticFieldName: "forestCountStatsField",
statisticType: "count"
};
const aggregatedConvex = {
statisticType: "convex-hull-aggregate",
outStatisticFieldName: "aggregateConvexHull"
};
const query = layer.createQuery();
query.groupByFieldsForStatistics = [groupField];
query.orderByFields = [`${groupField} desc`];
query.outStatistics = [
consumeStatsByRegion,
forestsInRegion,
aggregatedConvex
];
const statsResults = await layerView.queryFeatures(query);
Then, a chart is created to show the total acres of forests in each region. Users can hover over the chart to see the forest region on the map. The convex hull representing the smallest area containing all forests in that region will be added to the map and a featureEffect will be applied to the layer view to highlight forests in the selected region.
// Add the convex hull of grouped forests for that region
// set a featureffect on the layerview
// run stats on forests of the clicked region
canvasElement.addEventListener("mousemove", async () => {
const data = await getRegionFromChart(event);
if (data) {
await updateMapForSelectedRegion(data);
}
});
}