FeatureLayerView - query statistics by geometry

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// Listen to SketchViewModel's update event so that population pyramid chart
// is updated as the graphics are updated
sketchViewModel.on("update", (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 {
      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]

  debounceOnMove(vertices).catch((error) => {
    if (!promiseUtils.isAbortError(error)) {
      throw error;
    }
  });

  if (event.state == "complete") {
    sketchViewModel.update([edgeGraphic, centerGraphic], {
      tool: "move"
    });
  }
});

/*********************************************************************
 * Edge or center graphics are being moved. Recalculate the buffer with
 * updated geometry information and run the query stats again.
 *********************************************************************/
const debounceOnMove = promiseUtils.debounce(async (vertices) => {
  // client-side stats query of features that intersect the buffer
  const buffer = await calculateBuffer(vertices);

  // Query female and male age groups of the census tracts that intersect
  // the buffer polygon on the client
  const newData = await queryLayerViewAgeStats(buffer);
  updateChart(newData);

  // 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((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 (const 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((error) => {
      console.error(error);
    });
}