查询统计数据客户端

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
let layerList = new LayerList({
  view: view,
  container: document.createElement("div"),
  listItemCreatedFunction: function(event) {
    const item = event.item;

    // add the pie chart to the Predominance layer list item panel
    if (item.title === predominanceLayer.title) {
      item.panel = {
        content: [
          [
            "<b>Educational attainment</b> refers to the highest level of education that an individual has completed. ",
            "This chart categorizes the population living within the current ",
            "view extent by their educational attainment."
          ].join(""),

          document.createElement("canvas"),

          [
            "Notice that while one attainment level appears to dominate certain regions, it doesn't ",
            "necessarily mean it represents the majority of the population. In fact, as ",
            "you explore most areas, you will find the predominant educational attainment makes up ",
            "just a fraction of the population due to the number of categories considered."
          ].join("")
        ],
        className: "esri-icon-pie-chart",
        open: item.visible
      };
    }
  }
});
layerList.container.style = "height: 100%";
let panelDiv = document.getElementById("panel");
panelDiv.appendChild(layerList.container);

1
2
3
4
5
6
// Update the pie chart after the user stops panning or zooming
watchUtils.whenTrue(view, "stationary", function(val) {
  queryLayerViewStats(layerView).then(function(newData) {
    updateChart(newData);
  });
});

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
56
57
58
59
60
61
62
function queryLayerViewStats(layerView) {
  const educationFields = [
    "EDUC01_CY",
    "EDUC02_CY",
    "EDUC03_CY",
    "EDUC04_CY",
    "EDUC05_CY",
    "EDUC06_CY",
    "EDUC07_CY",
    "EDUC08_CY",
    "EDUC09_CY",
    "EDUC10_CY",
    "EDUC11_CY",
    "EDUC12_CY",
    "EDUC13_CY",
    "EDUC14_CY",
    "EDUC15_CY",
    "EDUC16_CY",
    "EDUCA_BASE"
  ];

  // Creates a query object for statistics of each of the fields listed above
  const statDefinitions = educationFields.map(function(fieldName) {
    return {
      onStatisticField: fieldName,
      outStatisticFieldName: fieldName + "_TOTAL",
      statisticType: "sum"
    };
  });

  // query statistics for features only in view extent
  const query = layerView.layer.createQuery();
  query.outStatistics = statDefinitions;
  query.geometry = view.extent;

  // query features within the view's extent on the client
  return layerView.queryFeatures(query).then(function(response) {
    const stats = response[0].attributes;

    const updatedData = [
      stats.EDUC01_CY_TOTAL, // no school
      stats.EDUC02_CY_TOTAL, // preschool
      stats.EDUC03_CY_TOTAL, // some elementary
      stats.EDUC04_CY_TOTAL + stats.EDUC07_CY_TOTAL, // elementary
      stats.EDUC05_CY_TOTAL, // some secondary
      stats.EDUC06_CY_TOTAL + stats.EDUC08_CY_TOTAL, // secondary
      stats.EDUC09_CY_TOTAL + stats.EDUC11_CY_TOTAL, // high school
      stats.EDUC10_CY_TOTAL +
        stats.EDUC12_CY_TOTAL +
        stats.EDUC13_CY_TOTAL +
        stats.EDUC14_CY_TOTAL +
        stats.EDUC15_CY_TOTAL, // college
      stats.EDUC16_CY_TOTAL // not specified
    ];

    // data used to update the pie chart
    return {
      total: stats.EDUCA_BASE_TOTAL,
      values: updatedData
    };
  });
}