FeatureLayerView - 按几何查询统计数据
此示例演示如何在 FeatureLayerView 中按几何查询统计数据，以及如何在图表中显示查询结果。
此应用程序按人口普查区域显示 2010 年人口密度。在与缓冲区相交的人口普查区域中按年龄和性别查询人口，并显示在人口金字塔图中。
工作原理
人口金字塔图会随着用户通过拖动缓冲区的中心点来移动缓冲区，或者通过移动缓冲区的边缘点来调整缓冲区的大小时进行更新。当用户移动两个点中的一个点时，将重新计算测地线缓冲区，并用于查询图层视图中与缓冲区相交的所有要素的统计数据。缓冲区图形的中心点和边缘点通过侦听 SketchViewModel 上的更新事件进行更新。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
sketchViewModel.on("update", onMove);
/*********************************************************************
* Edge or center graphics are being moved. Recalculate the buffer with
* updated geometry information and run the query stats again.
*********************************************************************/
function onMove(event) {
// If the edge graphic is moving, keep the center graphic
// at its initial location. Only move edge graphic
if (event.toolEventInfo && event.toolEventInfo.mover.attributes.edge) {
const toolType = event.toolEventInfo.type;
if (toolType === "move-start") {
centerGeometryAtStart = centerGraphic.geometry;
}
// keep the center graphic at its initial location when edge point is moving
else if (toolType === "move" || toolType === "move-stop") {
centerGraphic.geometry = centerGeometryAtStart;
}
}
// the center or edge graphic is being moved, recalculate the buffer
const vertices = [
[centerGraphic.geometry.x, centerGraphic.geometry.y],
[edgeGraphic.geometry.x, edgeGraphic.geometry.y]
];
// client-side stats query of features that intersect the buffer
calculateBuffer(vertices);
// user is clicking on the view... call update method with the center and edge graphics
if (event.state === "complete") {
sketchViewModel.update([edgeGraphic, centerGraphic], { tool: "move" });
}
}
然后，更新后的缓冲区面用于查询统计数据，以按性别获取人口普查区域中属于不同年龄类别的总人口。返回统计数据查询结果后，信息将显示在人口金字塔图表中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*********************************************************************
* Spatial query the census tracts feature layer view for statistics
* using the updated buffer polygon.
*********************************************************************/
function queryLayerViewAgeStats(buffer) {
// Data storage for the chart
let femaleAgeData = [],
maleAgeData = [];
// Client-side spatial query:
// Get a sum of age groups for census tracts that intersect the polygon buffer
const query = featureLayerView.layer.createQuery();
query.outStatistics = statDefinitions;
query.geometry = buffer;
// Query the features on the client using FeatureLayerView.queryFeatures
return featureLayerView
.queryFeatures(query)
.then(function(results) {
// Statistics query returns a feature with 'stats' as attributes
const attributes = results.features[0].attributes;
// Loop through attributes and save the values for use in the population pyramid.
for (var key in attributes) {
if (key.includes("FEM")) {
femaleAgeData.push(attributes[key]);
} else {
// Make 'all male age group population' total negative so that
// data will be displayed to the left of female age group
maleAgeData.push(-Math.abs(attributes[key]));
}
}
// Return information, separated by gender
return [femaleAgeData, maleAgeData];
})
.catch(function(error) {
console.log(error);
});
}