点聚类 - 查询聚类

尝试一下在线预览

此示例演示如何查询由聚合点聚类表示的要素。聚类是一种减少 FeatureLayer、CSVLayer、GeoJSONLayer、WFSLayer 或 OGCFeatureLayer 中的点的方法，方法是根据它们之间的空间接近程度对它们进行分组。通常，聚类的大小取决于每个聚类中的要素数。如果您不熟悉聚类，请参阅点聚类 - 基本配置示例。

通过查询聚类要素，您可以执行以下操作：

在弹出窗口中查询并显示描述聚类要素的统计数据。
查询要素的范围并将其显示在视图中。
查询所有要素并计算凸壳。

要查询聚类的要素，必须将表示聚类的图形的 ObjectID 提供给 Query.aggregateIds 属性，并将参数传递给聚类图层的图层视图上的所需查询方法。

查询聚类要素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
  name="viewport"
  content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<title>Point clustering - query clusters | Sample | GeoScene API for JavaScript 4.22</title>

<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>

<style>
  html,
  body,
  #viewDiv {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
  }
  #infoDiv {
    background: white;
    padding: 10px;
  }
  table td {
    padding: 3px;
  }

  table.popup td.num {
    text-align: right;
  }

  table.popup tr.head {
    text-align: center;
    font-weight: bold;
    background-color:rgba(50, 50, 50,0.08);
  }

  .table-container {
    width:100%;
    height:100%;
    text-align: center;
  }

  table {
    margin: 0 auto;
  }
</style>

<script>
  require([
    "geoscene/WebMap",
    "geoscene/Graphic",
    "geoscene/views/MapView",
    "geoscene/layers/FeatureLayer",
    "geoscene/widgets/Legend",
    "geoscene/widgets/Expand",
    "geoscene/smartMapping/labels/clusters",
    "geoscene/smartMapping/popup/clusters",
    "geoscene/core/watchUtils",
    "geoscene/symbols/support/symbolUtils",
    "geoscene/geometry/geometryEngine",
  ], (
    WebMap,
    Graphic,
    MapView,
    FeatureLayer,
    Legend,
    Expand,
    clusterLabelCreator,
    clusterPopupCreator,
    watchUtils,
    symbolUtils,
    geometryEngine
  ) => {

    let layerView;

    const layer = new FeatureLayer({
      portalItem: {
        id: "eb54b44c65b846cca12914b87b315169"
      },
      outFields: [ "capacity_mw" ]
    });

    const map = new WebMap({
      basemap: {
        portalItem: {
          id: "75a08e8cd8b64dcfa6945bb7f624ccc5"
        }
      },
      layers: [ layer ]
    });

    const view = new MapView({
      container: "viewDiv",
      map,
      extent: {
        spatialReference: {
          latestWkid: 3857,
          wkid: 102100
        },
        xmin: -15327459,
        ymin: 2740044,
        xmax: -6076744,
        ymax: 6878650
      },
      popup: {
        dockEnabled: true,
        dockOptions: {
          breakpoint: false,
          position: "top-right"
        }
      }
    });

    view.ui.add( new Expand({
      content: new Legend({ view }),
      view
    }), "top-left");

    layer
      .when()
      .then(generateClusterConfig)
      .then( async (featureReduction) => {

        // sets generated cluster configuration on the layer
        layer.featureReduction = featureReduction;

        // the layer view is needed for querying clusters
        layerView = await view.whenLayerView(layer);

        // Disable clustering when user zooms beyond a 1:50,000 scale level
        // Re-enable clustering when the user zooms out to a scale smaller than 1:50,000
        view.watch("scale", (scale) => {
          layer.featureReduction = view.scale > 50000 ? featureReduction : null;
        });
      })
      .catch((error) => {
        console.error(error);
      });

    async function generateClusterConfig(layer) {
      // generates default popupTemplate
      const popupTemplate =
        await clusterPopupCreator
          .getTemplates({
            layer
          })
          .then((popupTemplateResponse) => popupTemplateResponse.primaryTemplate.value);

      // Add actions for exploring the features of each cluster
      popupTemplate.actions = [
        {
          title: "Statistics",
          id: "statistics",
          className: "esri-icon-line-chart"
        },
        {
          title: "Convex hull",
          id: "convex-hull",
          className: "esri-icon-polygon"
        },
        {
          title: "Show features",
          id: "show-features",
          className: "esri-icon-maps"
        }
      ];

      // generates default labelingInfo
      const { labelingInfo, clusterMinSize } =
        await clusterLabelCreator
          .getLabelSchemes({
            layer, view
          })
          .then((labelSchemes) => labelSchemes.primaryScheme);

      return {
        type: "cluster",
        popupTemplate,
        labelingInfo,
        clusterMinSize
      };
    }

    view.popup.on("trigger-action", (event) => {
      clearViewGraphics();

      const popup = view.popup;
      const selectedFeature = popup.selectedFeature && popup.selectedFeature.isAggregate

      const id = event.action.id;

      if(id === "convex-hull"){
        displayConvexHull(view.popup.selectedFeature);
      }
      if(id === "show-features"){
        displayFeatures(view.popup.selectedFeature);
      }
      if(id === "statistics"){
        calculateStatistics(view.popup.selectedFeature);
      }
    });

    watchUtils.watch(view, ["scale", "popup.selectedFeature", "popup.visible"], clearViewGraphics);

    let convexHullGraphic = null;
    let clusterChildGraphics = [];

    function clearViewGraphics(){
      view.graphics.remove(convexHullGraphic);
      view.graphics.removeMany(clusterChildGraphics);
    }

    // displays all features from a given cluster in the view
    async function displayFeatures(graphic){
      processParams(graphic, layerView);


      const query = layerView.createQuery();
      query.aggregateIds = [graphic.getObjectId()];
      const { features } = await layerView.queryFeatures(query);


      features.forEach( async (feature) => {
        const symbol = await symbolUtils.getDisplayedSymbol(feature)
        feature.symbol = symbol;
        view.graphics.add(feature);
      });
      clusterChildGraphics = features;
    }


    async function displayConvexHull(graphic){
      processParams(graphic, layerView);

      const query = layerView.createQuery();
      query.aggregateIds = [graphic.getObjectId()];
      const { features } = await layerView.queryFeatures(query);
      const geometries = features.map( feature => feature.geometry );
      const [ convexHull ] = geometryEngine.convexHull(geometries, true);

      convexHullGraphic = new Graphic({
        geometry: convexHull,
        symbol: {
          type: "simple-fill",
          outline: {
            width: 1.5,
            color: [ 75, 75, 75, 1 ]
          },
          style: "none",
          color: [ 0, 0, 0, 0.1 ]
        }
      });
      view.graphics.add(convexHullGraphic);
    }


    // calculates set statistics for features in a cluster
    // and displays them in the cluster popup

    async function calculateStatistics(graphic){
      processParams(graphic, layerView);

      const query = layerView.createQuery();

      query.aggregateIds = [graphic.getObjectId()];

      query.groupByFieldsForStatistics = [ "fuel1" ];
      query.outFields = [ "capacity_mw", "fuel1" ];
      query.orderByFields = [ "num_features desc" ];
      query.outStatistics = [
        {
          onStatisticField: "capacity_mw",
          outStatisticFieldName: "capacity_total",
          statisticType: "sum"
        },
        {
          onStatisticField: "1",
          outStatisticFieldName: "num_features",
          statisticType: "count"
        },
        {
          onStatisticField: "capacity_mw",
          outStatisticFieldName: "capacity_max",
          statisticType: "max"
        }
      ];

      const { features } = await layerView.queryFeatures(query);
      const stats = features.map( feature => feature.attributes);


      let table = `
        <div class="table-container">
          <span style="font-size: 14pt"><strong>Summary by fuel type</strong></span>
          <br/>
          <br/>
          <table class="esri-widget popup">
            <tr class="head"><td>Fuel</td><td>Count</td><td>Capacity (mW)</td><td>Largest plant (mW)</td></tr>
      `;

      let totalCapacity = 0;
      let totalCount = 0;

      stats.forEach( stat => {
        const fuel = stat.fuel1;
        const total = stat.capacity_total;
        const max = stat.capacity_max;
        const count = stat.num_features;

        totalCapacity += total;
        totalCount += count;

        table += `
          <tr><td><span style:'font-weight:bolder'>${fuel}</span></td><td class="num">${count}</td><td class="num">${roundDecimals(total, 2).toLocaleString()}</td><td class="num">${roundDecimals(max, 2).toLocaleString()}</td></tr>
        `;
      });

      table += `
        </table>
      </div>`;

      view.popup.content = `
        <div style="font-size: 12pt">
        Number of features: <strong>${totalCount.toLocaleString()}</strong><br>
        Total capacity (mW): <strong>${roundDecimals(totalCapacity, 2).toLocaleString()}</strong><br>
        </div><br>
      ` + table;
    }


    function processParams(graphic, layerView){
      if (!graphic || !layerView) {
        throw new Error("Graphic or layerView not provided.");
      }

      if (!graphic.isAggregate) {
        throw new Error("Graphic must represent a cluster.");
      }
    }

    function roundDecimals(num, places){
      return Math.round(num * Math.pow(10, places)) / Math.pow(10, places);
    }
  });
</script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>

查询聚类统计数据

要查询聚类中包含的要素的统计数据，请在 Query.aggregateIds 中引用聚类图形的 ObjectID，然后指定查询 outStatistics。由于聚类图层具有 UniqueValueRenderer，因此我们将使用 groupByFieldsForStatistics 按用于对渲染器中的要素进行分类的字段对统计数据进行分组。

cluster statistics

计算聚类统计信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
  name="viewport"
  content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<title>Point clustering - query clusters | Sample | GeoScene API for JavaScript 4.22</title>

<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>

<style>
  html,
  body,
  #viewDiv {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
  }
  #infoDiv {
    background: white;
    padding: 10px;
  }
  table td {
    padding: 3px;
  }

  table.popup td.num {
    text-align: right;
  }

  table.popup tr.head {
    text-align: center;
    font-weight: bold;
    background-color:rgba(50, 50, 50,0.08);
  }

  .table-container {
    width:100%;
    height:100%;
    text-align: center;
  }

  table {
    margin: 0 auto;
  }
</style>

<script>
  require([
    "geoscene/WebMap",
    "geoscene/Graphic",
    "geoscene/views/MapView",
    "geoscene/layers/FeatureLayer",
    "geoscene/widgets/Legend",
    "geoscene/widgets/Expand",
    "geoscene/smartMapping/labels/clusters",
    "geoscene/smartMapping/popup/clusters",
    "geoscene/core/watchUtils",
    "geoscene/symbols/support/symbolUtils",
    "geoscene/geometry/geometryEngine",
  ], (
    WebMap,
    Graphic,
    MapView,
    FeatureLayer,
    Legend,
    Expand,
    clusterLabelCreator,
    clusterPopupCreator,
    watchUtils,
    symbolUtils,
    geometryEngine
  ) => {

    let layerView;

    const layer = new FeatureLayer({
      portalItem: {
        id: "eb54b44c65b846cca12914b87b315169"
      },
      outFields: [ "capacity_mw" ]
    });

    const map = new WebMap({
      basemap: {
        portalItem: {
          id: "75a08e8cd8b64dcfa6945bb7f624ccc5"
        }
      },
      layers: [ layer ]
    });

    const view = new MapView({
      container: "viewDiv",
      map,
      extent: {
        spatialReference: {
          latestWkid: 3857,
          wkid: 102100
        },
        xmin: -15327459,
        ymin: 2740044,
        xmax: -6076744,
        ymax: 6878650
      },
      popup: {
        dockEnabled: true,
        dockOptions: {
          breakpoint: false,
          position: "top-right"
        }
      }
    });

    view.ui.add( new Expand({
      content: new Legend({ view }),
      view
    }), "top-left");

    layer
      .when()
      .then(generateClusterConfig)
      .then( async (featureReduction) => {

        // sets generated cluster configuration on the layer
        layer.featureReduction = featureReduction;

        // the layer view is needed for querying clusters
        layerView = await view.whenLayerView(layer);

        // Disable clustering when user zooms beyond a 1:50,000 scale level
        // Re-enable clustering when the user zooms out to a scale smaller than 1:50,000
        view.watch("scale", (scale) => {
          layer.featureReduction = view.scale > 50000 ? featureReduction : null;
        });
      })
      .catch((error) => {
        console.error(error);
      });

    async function generateClusterConfig(layer) {
      // generates default popupTemplate
      const popupTemplate =
        await clusterPopupCreator
          .getTemplates({
            layer
          })
          .then((popupTemplateResponse) => popupTemplateResponse.primaryTemplate.value);

      // Add actions for exploring the features of each cluster
      popupTemplate.actions = [
        {
          title: "Statistics",
          id: "statistics",
          className: "esri-icon-line-chart"
        },
        {
          title: "Convex hull",
          id: "convex-hull",
          className: "esri-icon-polygon"
        },
        {
          title: "Show features",
          id: "show-features",
          className: "esri-icon-maps"
        }
      ];

      // generates default labelingInfo
      const { labelingInfo, clusterMinSize } =
        await clusterLabelCreator
          .getLabelSchemes({
            layer, view
          })
          .then((labelSchemes) => labelSchemes.primaryScheme);

      return {
        type: "cluster",
        popupTemplate,
        labelingInfo,
        clusterMinSize
      };
    }

    view.popup.on("trigger-action", (event) => {
      clearViewGraphics();

      const popup = view.popup;
      const selectedFeature = popup.selectedFeature && popup.selectedFeature.isAggregate

      const id = event.action.id;

      if(id === "convex-hull"){
        displayConvexHull(view.popup.selectedFeature);
      }
      if(id === "show-features"){
        displayFeatures(view.popup.selectedFeature);
      }
      if(id === "statistics"){
        calculateStatistics(view.popup.selectedFeature);
      }
    });

    watchUtils.watch(view, ["scale", "popup.selectedFeature", "popup.visible"], clearViewGraphics);

    let convexHullGraphic = null;
    let clusterChildGraphics = [];

    function clearViewGraphics(){
      view.graphics.remove(convexHullGraphic);
      view.graphics.removeMany(clusterChildGraphics);
    }

    // displays all features from a given cluster in the view
    async function displayFeatures(graphic){
      processParams(graphic, layerView);


      const query = layerView.createQuery();
      query.aggregateIds = [graphic.getObjectId()];
      const { features } = await layerView.queryFeatures(query);


      features.forEach( async (feature) => {
        const symbol = await symbolUtils.getDisplayedSymbol(feature)
        feature.symbol = symbol;
        view.graphics.add(feature);
      });
      clusterChildGraphics = features;
    }


    async function displayConvexHull(graphic){
      processParams(graphic, layerView);

      const query = layerView.createQuery();
      query.aggregateIds = [graphic.getObjectId()];
      const { features } = await layerView.queryFeatures(query);
      const geometries = features.map( feature => feature.geometry );
      const [ convexHull ] = geometryEngine.convexHull(geometries, true);

      convexHullGraphic = new Graphic({
        geometry: convexHull,
        symbol: {
          type: "simple-fill",
          outline: {
            width: 1.5,
            color: [ 75, 75, 75, 1 ]
          },
          style: "none",
          color: [ 0, 0, 0, 0.1 ]
        }
      });
      view.graphics.add(convexHullGraphic);
    }


    // calculates set statistics for features in a cluster
    // and displays them in the cluster popup

    async function calculateStatistics(graphic){
      processParams(graphic, layerView);

      const query = layerView.createQuery();

      query.aggregateIds = [graphic.getObjectId()];

      query.groupByFieldsForStatistics = [ "fuel1" ];
      query.outFields = [ "capacity_mw", "fuel1" ];
      query.orderByFields = [ "num_features desc" ];
      query.outStatistics = [
        {
          onStatisticField: "capacity_mw",
          outStatisticFieldName: "capacity_total",
          statisticType: "sum"
        },
        {
          onStatisticField: "1",
          outStatisticFieldName: "num_features",
          statisticType: "count"
        },
        {
          onStatisticField: "capacity_mw",
          outStatisticFieldName: "capacity_max",
          statisticType: "max"
        }
      ];

      const { features } = await layerView.queryFeatures(query);
      const stats = features.map( feature => feature.attributes);


      let table = `
        <div class="table-container">
          <span style="font-size: 14pt"><strong>Summary by fuel type</strong></span>
          <br/>
          <br/>
          <table class="esri-widget popup">
            <tr class="head"><td>Fuel</td><td>Count</td><td>Capacity (mW)</td><td>Largest plant (mW)</td></tr>
      `;

      let totalCapacity = 0;
      let totalCount = 0;

      stats.forEach( stat => {
        const fuel = stat.fuel1;
        const total = stat.capacity_total;
        const max = stat.capacity_max;
        const count = stat.num_features;

        totalCapacity += total;
        totalCount += count;

        table += `
          <tr><td><span style:'font-weight:bolder'>${fuel}</span></td><td class="num">${count}</td><td class="num">${roundDecimals(total, 2).toLocaleString()}</td><td class="num">${roundDecimals(max, 2).toLocaleString()}</td></tr>
        `;
      });

      table += `
        </table>
      </div>`;

      view.popup.content = `
        <div style="font-size: 12pt">
        Number of features: <strong>${totalCount.toLocaleString()}</strong><br>
        Total capacity (mW): <strong>${roundDecimals(totalCapacity, 2).toLocaleString()}</strong><br>
        </div><br>
      ` + table;
    }


    function processParams(graphic, layerView){
      if (!graphic || !layerView) {
        throw new Error("Graphic or layerView not provided.");
      }

      if (!graphic.isAggregate) {
        throw new Error("Graphic must represent a cluster.");
      }
    }

    function roundDecimals(num, places){
      return Math.round(num * Math.pow(10, places)) / Math.pow(10, places);
    }
  });
</script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>

查询聚类范围

您可能希望向用户显示聚类要素的范围。为此，请在 Query.aggregateIds 中引用聚类图形的 ObjectID，并在图层视图上调用 queryExtent 方法。

cluster query extent

async function displayClusterExtent(graphic){
  const query = layerView.createQuery();
  query.aggregateIds = [ graphic.getObjectId() ];

  const { extent } = await layerView.queryExtent(query);
  const extentGraphic = {
    geometry: extent,
    symbol: {
      type: "simple-fill",
      outline: {
        width: 1.5,
        color: [ 75, 75, 75, 1 ]
      },
      style: "none",
      color: [ 0, 0, 0, 0.1 ]
    }
  };
  view.graphics.add(extentGraphic);
}

默认情况下，单击 browse features 操作时，聚类弹出窗口已显示聚类范围。

显示聚类凸壳

也许最好显示聚类要素的凸壳，而不是范围，因为它更准确地表示点的分布。geometryEngine 允许您执行此操作。查询聚类中的所有要素，获取其几何，然后将其传递到 geometryEngine 的 convexHull 方法。

cluster convex hull

显示聚类凸壳
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
  name="viewport"
  content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<title>Point clustering - query clusters | Sample | GeoScene API for JavaScript 4.22</title>

<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>

<style>
  html,
  body,
  #viewDiv {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
  }
  #infoDiv {
    background: white;
    padding: 10px;
  }
  table td {
    padding: 3px;
  }

  table.popup td.num {
    text-align: right;
  }

  table.popup tr.head {
    text-align: center;
    font-weight: bold;
    background-color:rgba(50, 50, 50,0.08);
  }

  .table-container {
    width:100%;
    height:100%;
    text-align: center;
  }

  table {
    margin: 0 auto;
  }
</style>

<script>
  require([
    "geoscene/WebMap",
    "geoscene/Graphic",
    "geoscene/views/MapView",
    "geoscene/layers/FeatureLayer",
    "geoscene/widgets/Legend",
    "geoscene/widgets/Expand",
    "geoscene/smartMapping/labels/clusters",
    "geoscene/smartMapping/popup/clusters",
    "geoscene/core/watchUtils",
    "geoscene/symbols/support/symbolUtils",
    "geoscene/geometry/geometryEngine",
  ], (
    WebMap,
    Graphic,
    MapView,
    FeatureLayer,
    Legend,
    Expand,
    clusterLabelCreator,
    clusterPopupCreator,
    watchUtils,
    symbolUtils,
    geometryEngine
  ) => {

    let layerView;

    const layer = new FeatureLayer({
      portalItem: {
        id: "eb54b44c65b846cca12914b87b315169"
      },
      outFields: [ "capacity_mw" ]
    });

    const map = new WebMap({
      basemap: {
        portalItem: {
          id: "75a08e8cd8b64dcfa6945bb7f624ccc5"
        }
      },
      layers: [ layer ]
    });

    const view = new MapView({
      container: "viewDiv",
      map,
      extent: {
        spatialReference: {
          latestWkid: 3857,
          wkid: 102100
        },
        xmin: -15327459,
        ymin: 2740044,
        xmax: -6076744,
        ymax: 6878650
      },
      popup: {
        dockEnabled: true,
        dockOptions: {
          breakpoint: false,
          position: "top-right"
        }
      }
    });

    view.ui.add( new Expand({
      content: new Legend({ view }),
      view
    }), "top-left");

    layer
      .when()
      .then(generateClusterConfig)
      .then( async (featureReduction) => {

        // sets generated cluster configuration on the layer
        layer.featureReduction = featureReduction;

        // the layer view is needed for querying clusters
        layerView = await view.whenLayerView(layer);

        // Disable clustering when user zooms beyond a 1:50,000 scale level
        // Re-enable clustering when the user zooms out to a scale smaller than 1:50,000
        view.watch("scale", (scale) => {
          layer.featureReduction = view.scale > 50000 ? featureReduction : null;
        });
      })
      .catch((error) => {
        console.error(error);
      });

    async function generateClusterConfig(layer) {
      // generates default popupTemplate
      const popupTemplate =
        await clusterPopupCreator
          .getTemplates({
            layer
          })
          .then((popupTemplateResponse) => popupTemplateResponse.primaryTemplate.value);

      // Add actions for exploring the features of each cluster
      popupTemplate.actions = [
        {
          title: "Statistics",
          id: "statistics",
          className: "esri-icon-line-chart"
        },
        {
          title: "Convex hull",
          id: "convex-hull",
          className: "esri-icon-polygon"
        },
        {
          title: "Show features",
          id: "show-features",
          className: "esri-icon-maps"
        }
      ];

      // generates default labelingInfo
      const { labelingInfo, clusterMinSize } =
        await clusterLabelCreator
          .getLabelSchemes({
            layer, view
          })
          .then((labelSchemes) => labelSchemes.primaryScheme);

      return {
        type: "cluster",
        popupTemplate,
        labelingInfo,
        clusterMinSize
      };
    }

    view.popup.on("trigger-action", (event) => {
      clearViewGraphics();

      const popup = view.popup;
      const selectedFeature = popup.selectedFeature && popup.selectedFeature.isAggregate

      const id = event.action.id;

      if(id === "convex-hull"){
        displayConvexHull(view.popup.selectedFeature);
      }
      if(id === "show-features"){
        displayFeatures(view.popup.selectedFeature);
      }
      if(id === "statistics"){
        calculateStatistics(view.popup.selectedFeature);
      }
    });

    watchUtils.watch(view, ["scale", "popup.selectedFeature", "popup.visible"], clearViewGraphics);

    let convexHullGraphic = null;
    let clusterChildGraphics = [];

    function clearViewGraphics(){
      view.graphics.remove(convexHullGraphic);
      view.graphics.removeMany(clusterChildGraphics);
    }

    // displays all features from a given cluster in the view
    async function displayFeatures(graphic){
      processParams(graphic, layerView);


      const query = layerView.createQuery();
      query.aggregateIds = [graphic.getObjectId()];
      const { features } = await layerView.queryFeatures(query);


      features.forEach( async (feature) => {
        const symbol = await symbolUtils.getDisplayedSymbol(feature)
        feature.symbol = symbol;
        view.graphics.add(feature);
      });
      clusterChildGraphics = features;
    }


    async function displayConvexHull(graphic){
      processParams(graphic, layerView);

      const query = layerView.createQuery();
      query.aggregateIds = [graphic.getObjectId()];
      const { features } = await layerView.queryFeatures(query);
      const geometries = features.map( feature => feature.geometry );
      const [ convexHull ] = geometryEngine.convexHull(geometries, true);

      convexHullGraphic = new Graphic({
        geometry: convexHull,
        symbol: {
          type: "simple-fill",
          outline: {
            width: 1.5,
            color: [ 75, 75, 75, 1 ]
          },
          style: "none",
          color: [ 0, 0, 0, 0.1 ]
        }
      });
      view.graphics.add(convexHullGraphic);
    }


    // calculates set statistics for features in a cluster
    // and displays them in the cluster popup

    async function calculateStatistics(graphic){
      processParams(graphic, layerView);

      const query = layerView.createQuery();

      query.aggregateIds = [graphic.getObjectId()];

      query.groupByFieldsForStatistics = [ "fuel1" ];
      query.outFields = [ "capacity_mw", "fuel1" ];
      query.orderByFields = [ "num_features desc" ];
      query.outStatistics = [
        {
          onStatisticField: "capacity_mw",
          outStatisticFieldName: "capacity_total",
          statisticType: "sum"
        },
        {
          onStatisticField: "1",
          outStatisticFieldName: "num_features",
          statisticType: "count"
        },
        {
          onStatisticField: "capacity_mw",
          outStatisticFieldName: "capacity_max",
          statisticType: "max"
        }
      ];

      const { features } = await layerView.queryFeatures(query);
      const stats = features.map( feature => feature.attributes);


      let table = `
        <div class="table-container">
          <span style="font-size: 14pt"><strong>Summary by fuel type</strong></span>
          <br/>
          <br/>
          <table class="esri-widget popup">
            <tr class="head"><td>Fuel</td><td>Count</td><td>Capacity (mW)</td><td>Largest plant (mW)</td></tr>
      `;

      let totalCapacity = 0;
      let totalCount = 0;

      stats.forEach( stat => {
        const fuel = stat.fuel1;
        const total = stat.capacity_total;
        const max = stat.capacity_max;
        const count = stat.num_features;

        totalCapacity += total;
        totalCount += count;

        table += `
          <tr><td><span style:'font-weight:bolder'>${fuel}</span></td><td class="num">${count}</td><td class="num">${roundDecimals(total, 2).toLocaleString()}</td><td class="num">${roundDecimals(max, 2).toLocaleString()}</td></tr>
        `;
      });

      table += `
        </table>
      </div>`;

      view.popup.content = `
        <div style="font-size: 12pt">
        Number of features: <strong>${totalCount.toLocaleString()}</strong><br>
        Total capacity (mW): <strong>${roundDecimals(totalCapacity, 2).toLocaleString()}</strong><br>
        </div><br>
      ` + table;
    }


    function processParams(graphic, layerView){
      if (!graphic || !layerView) {
        throw new Error("Graphic or layerView not provided.");
      }

      if (!graphic.isAggregate) {
        throw new Error("Graphic must represent a cluster.");
      }
    }

    function roundDecimals(num, places){
      return Math.round(num * Math.pow(10, places)) / Math.pow(10, places);
    }
  });
</script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>