从 FeatureLayer 查询顶部要素

尝试一下在线预览

此示例演示如何在 FeatureLayer 上使用 queryTopFeatures() 方法以查询给定年份或所有时间总数内每个州访问量最多或最少的国家公园。queryTopFeatures() 方法将返回一个 FeatureSet，其中包含按州分组并按访问次数降序或升序排序的访问次数最多的公园或最少访问的公园数组。返回的公园的属性将显示在应用程序的右侧，生成的要素将显示在地图中。

工作原理

当应用程序启动时，UI 将显示用户输入的选项。在这里，用户可以指定结果是否应包括访问量最多或最少的公园、应从每个州返回的公园数以及查询的时间范围。调用 queryTopFeatures() 方法时，必须始终设置 TopFeaturesQuery 参数的 topFilter 属性。在此应用程序中，TopFeaturesQuery 参数设置如下图所示。

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Query top features from a FeatureLayer | Sample | GeoScene API for JavaScript 4.22</title>
    <script type="module"  src="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.esm.js"></script>
    <script nomodule="" src="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.css" />
    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      #infoDiv {
        padding: 6px;
        width: 370px;
        height: 97%;
        position: absolute;
        top: 10px;
        right: 10px;
        --calcite-ui-brand: #71C96E;
        --calcite-ui-brand-hover: #67B564;
      }

      #resultsDiv {
        overflow: auto;
        display: none;
      }
    </style>

    <script>
      require([
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/symbols/WebStyleSymbol",
        "geoscene/Basemap",
        "geoscene/rest/support/TopFeaturesQuery",
        "geoscene/rest/support/TopFilter"
      ], (Map, MapView, FeatureLayer, WebStyleSymbol, Basemap, TopFeaturesQuery, TopFilter) =>
        (async () => {

        // dark human geography basemap
        const basemap = new Basemap({
          portalItem: {
            id: "4f2e99ba65e34bb8af49733d9778fb8e"
          }
        });

        // national parks layer
        const layer = new FeatureLayer({
          url:
            "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_National_Parks_Annual_Visitation/FeatureServer/0",
          outFields: ["*"],
          renderer: await setRenderer(),
          popupTemplate: createPopupTemplate()
        });

        const map = new Map({
          basemap,
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-97.75188, 37.23308],
          zoom: 3,
          padding: {
            right: 380
          }
        });
        const layerView = await view.whenLayerView(layer);

        // get UI components involved in top features query
        const orderDirectionSelection = document.getElementById("orderDirectionSelection");
        const orderByFieldSelection = document.getElementById("orderByFieldSelect");
        const clearQueryButton = document.getElementById("clear-query");
        const queryParksButton = document.getElementById("query-parks");

        // *********************************************************
        // This function runs when user clicks on query parks button
        // *********************************************************
        document.getElementById("query-parks").addEventListener("click", async () => {
          clearQueryButton.appearance = "outline";
          queryParksButton.appearance = "solid";

          // check if the user wants to select the most or least visited parks
          // in each state
          const queryOrder = orderDirectionSelection.selectedItem.value;
          const orderByField = [
            `${orderByFieldSelection.selectedOption.value} ${queryOrder}`
          ];


          // TopFeatureQuery parameter for the queryTopFeatures method
          // collect user inputs to query either the most or the least
          // visited national parks in each state
          query = new TopFeaturesQuery({
            topFilter: new TopFilter({
              topCount: parseInt(topCountSelect.selectedOption.value),
              groupByFields: ["State"],
              orderByFields: orderByField
            }),
            orderByFields: orderByField,
            outFields: ["State, TOTAL, F2018, F2019, F2020, Park"],
            returnGeometry: true,
            cacheHint: false
          });
          const results = await layer.queryTopFeatures(query);


          document.getElementById("resultsDiv").style.display = "block";
          document.getElementById("resultsHeading").innerHTML = `Results: ${results.features.length} parks`;
          document.getElementById("results").innerHTML = "";


          graphics = results.features;
          graphics.forEach((result, index) => {
            const attributes = result.attributes;
            const item = document.createElement("calcite-pick-list-item");
            item.setAttribute("label", attributes.Park);
            item.setAttribute("value", index);

            const visitorTotal = orderByFieldSelection.selectedOption.value;
            const total = `Total visitors: ${attributes[visitorTotal]}`;
            const state = `State: ${attributes.State}`;
            const description = total + "\n" + state;
            item.setAttribute("description", description);
            item.addEventListener("click", parkResultClickHandler);
            document.getElementById("results").appendChild(item);
          });



          // set query for the queryTopObjectIds.
          query.orderByFields = [""];
          const objectIds = await layer.queryTopObjectIds(query);
          layerView.filter = {
            objectIds
          };

        });

        // ***************************************************
        // this function runs when user clicks on the park
        // in the list shown on the right side of the app
        // ***************************************************
        function parkResultClickHandler(event) {
          const target = event.target;
          const resultId = target.getAttribute("value");

          // get the graphic corresponding to the clicked zip code
          const result =
            resultId && graphics && graphics[parseInt(resultId, 10)];

          if (result) {
            view.popup.open({
              features: [result],
              location: result.geometry
            });
          }
        }

        clearQueryButton.addEventListener("click", () => {
          clearQueryButton.appearance = "solid";
          queryParksButton.appearance = "outline";
          layerView.filter = null;
          view.popup.close();
          document.getElementById("resultsHeading").innerHTML = `Results`;
          document.getElementById("results").innerHTML = "";
        });

        async function setRenderer() {
          const symbol = new WebStyleSymbol({
            name: "park",
            styleName: "Esri2DPointSymbolsStyle"
          });

          const cimSymbol = await symbol.fetchCIMSymbol();
          const symbolLayer = cimSymbol.data.symbol.symbolLayers[0];
          symbolLayer.size = 16;
          cimSymbol.data.symbol.symbolLayers = [symbolLayer];

          return {
            type: "simple",
            symbol: cimSymbol
          };
        }

        function createPopupTemplate(){
          return {
            title: "{Park}",
            content: [{
              type: "fields",
              fieldInfos: [{
                fieldName: "TOTAL",
                label: "Total visits",
                format: {
                  places: 0,
                  digitSeparator: true
                }
              }, {
               fieldName: "F2018",
               label: "2018",
               format: {
                 places: 0,
                 digitSeparator: true
               }
              },{
               fieldName: "F2019",
               label: "2019",
               format: {
                 places: 0,
                 digitSeparator: true
               }
              },{
               fieldName: "F2020",
               label: "2020",
               format: {
                 places: 0,
                 digitSeparator: true
               }
              }]
            }]
          };
        }
        })());
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <calcite-panel id="infoDiv" class="calcite-theme-dark">
      <h3 class="heading" slot="header-content">
        Most or least visited parks by states
      </h3>
      <div id="content" style="padding: 5px">
        <label>
          <calcite-radio-group id="orderDirectionSelection" layout="horizontal" appearance="outline" scale="m" width="auto">
            <calcite-radio-group-item value="DESC" checked="">Most visited</calcite-radio-group-item>
            <calcite-radio-group-item value="ASC">Least visited</calcite-radio-group-item>
          </calcite-radio-group>
        </label><br /><br />
        <label>
          Number of parks to be returned from each state:
          <calcite-select id="topCountSelect" scale="s" width="auto">
            <calcite-option label="1" value="1"></calcite-option>
            <calcite-option label="2" value="2"></calcite-option>
            <calcite-option label="3" value="3"></calcite-option>
          </calcite-select>
        </label><br />
        <label>
          Year:
          <calcite-select id="orderByFieldSelect" scale="s" width="auto">
            <calcite-option
              label="Total of all time"
              value="TOTAL"
            ></calcite-option>
            <calcite-option label="2018" value="F2018"></calcite-option>
            <calcite-option label="2019" value="F2019"></calcite-option>
            <calcite-option label="2020" value="F2020"></calcite-option>
          </calcite-select>
        </label><br />
        <div style="width: 360px; max-width: 100%; display: flex;flex-direction: row;">
          <calcite-button
            id="query-parks" width="half" appearance="solid" alignment="center"scale="s">
            Query parks
          </calcite-button>
          <calcite-button
            id="clear-query" width="half" appearance="outline" alignment="center" scale="s">
            Clear query
          </calcite-button>
        </div>
        <br />
      </div>
      <calcite-panel id="resultsDiv">
        <h3 class="heading" id="resultsHeading" slot="header-content">
          Results
        </h3>
        <div id="results"></div>
      </calcite-panel>
    </calcite-panel>
  </body>
</html>

queryTopFeatures() 方法的结果将按如下所示进行处理，以在应用程序的右侧按降序或升序显示公园的属性。然后，用户可以单击排序结果以在地图上显示相应的弹出窗口。

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Query top features from a FeatureLayer | Sample | GeoScene API for JavaScript 4.22</title>
    <script type="module"  src="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.esm.js"></script>
    <script nomodule="" src="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.css" />
    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      #infoDiv {
        padding: 6px;
        width: 370px;
        height: 97%;
        position: absolute;
        top: 10px;
        right: 10px;
        --calcite-ui-brand: #71C96E;
        --calcite-ui-brand-hover: #67B564;
      }

      #resultsDiv {
        overflow: auto;
        display: none;
      }
    </style>

    <script>
      require([
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/symbols/WebStyleSymbol",
        "geoscene/Basemap",
        "geoscene/rest/support/TopFeaturesQuery",
        "geoscene/rest/support/TopFilter"
      ], (Map, MapView, FeatureLayer, WebStyleSymbol, Basemap, TopFeaturesQuery, TopFilter) =>
        (async () => {

        // dark human geography basemap
        const basemap = new Basemap({
          portalItem: {
            id: "4f2e99ba65e34bb8af49733d9778fb8e"
          }
        });

        // national parks layer
        const layer = new FeatureLayer({
          url:
            "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_National_Parks_Annual_Visitation/FeatureServer/0",
          outFields: ["*"],
          renderer: await setRenderer(),
          popupTemplate: createPopupTemplate()
        });

        const map = new Map({
          basemap,
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-97.75188, 37.23308],
          zoom: 3,
          padding: {
            right: 380
          }
        });
        const layerView = await view.whenLayerView(layer);

        // get UI components involved in top features query
        const orderDirectionSelection = document.getElementById("orderDirectionSelection");
        const orderByFieldSelection = document.getElementById("orderByFieldSelect");
        const clearQueryButton = document.getElementById("clear-query");
        const queryParksButton = document.getElementById("query-parks");

        // *********************************************************
        // This function runs when user clicks on query parks button
        // *********************************************************
        document.getElementById("query-parks").addEventListener("click", async () => {
          clearQueryButton.appearance = "outline";
          queryParksButton.appearance = "solid";

          // check if the user wants to select the most or least visited parks
          // in each state
          const queryOrder = orderDirectionSelection.selectedItem.value;
          const orderByField = [
            `${orderByFieldSelection.selectedOption.value} ${queryOrder}`
          ];


          // TopFeatureQuery parameter for the queryTopFeatures method
          // collect user inputs to query either the most or the least
          // visited national parks in each state
          query = new TopFeaturesQuery({
            topFilter: new TopFilter({
              topCount: parseInt(topCountSelect.selectedOption.value),
              groupByFields: ["State"],
              orderByFields: orderByField
            }),
            orderByFields: orderByField,
            outFields: ["State, TOTAL, F2018, F2019, F2020, Park"],
            returnGeometry: true,
            cacheHint: false
          });
          const results = await layer.queryTopFeatures(query);


          document.getElementById("resultsDiv").style.display = "block";
          document.getElementById("resultsHeading").innerHTML = `Results: ${results.features.length} parks`;
          document.getElementById("results").innerHTML = "";


          graphics = results.features;
          graphics.forEach((result, index) => {
            const attributes = result.attributes;
            const item = document.createElement("calcite-pick-list-item");
            item.setAttribute("label", attributes.Park);
            item.setAttribute("value", index);

            const visitorTotal = orderByFieldSelection.selectedOption.value;
            const total = `Total visitors: ${attributes[visitorTotal]}`;
            const state = `State: ${attributes.State}`;
            const description = total + "\n" + state;
            item.setAttribute("description", description);
            item.addEventListener("click", parkResultClickHandler);
            document.getElementById("results").appendChild(item);
          });



          // set query for the queryTopObjectIds.
          query.orderByFields = [""];
          const objectIds = await layer.queryTopObjectIds(query);
          layerView.filter = {
            objectIds
          };

        });

        // ***************************************************
        // this function runs when user clicks on the park
        // in the list shown on the right side of the app
        // ***************************************************
        function parkResultClickHandler(event) {
          const target = event.target;
          const resultId = target.getAttribute("value");

          // get the graphic corresponding to the clicked zip code
          const result =
            resultId && graphics && graphics[parseInt(resultId, 10)];

          if (result) {
            view.popup.open({
              features: [result],
              location: result.geometry
            });
          }
        }

        clearQueryButton.addEventListener("click", () => {
          clearQueryButton.appearance = "solid";
          queryParksButton.appearance = "outline";
          layerView.filter = null;
          view.popup.close();
          document.getElementById("resultsHeading").innerHTML = `Results`;
          document.getElementById("results").innerHTML = "";
        });

        async function setRenderer() {
          const symbol = new WebStyleSymbol({
            name: "park",
            styleName: "Esri2DPointSymbolsStyle"
          });

          const cimSymbol = await symbol.fetchCIMSymbol();
          const symbolLayer = cimSymbol.data.symbol.symbolLayers[0];
          symbolLayer.size = 16;
          cimSymbol.data.symbol.symbolLayers = [symbolLayer];

          return {
            type: "simple",
            symbol: cimSymbol
          };
        }

        function createPopupTemplate(){
          return {
            title: "{Park}",
            content: [{
              type: "fields",
              fieldInfos: [{
                fieldName: "TOTAL",
                label: "Total visits",
                format: {
                  places: 0,
                  digitSeparator: true
                }
              }, {
               fieldName: "F2018",
               label: "2018",
               format: {
                 places: 0,
                 digitSeparator: true
               }
              },{
               fieldName: "F2019",
               label: "2019",
               format: {
                 places: 0,
                 digitSeparator: true
               }
              },{
               fieldName: "F2020",
               label: "2020",
               format: {
                 places: 0,
                 digitSeparator: true
               }
              }]
            }]
          };
        }
        })());
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <calcite-panel id="infoDiv" class="calcite-theme-dark">
      <h3 class="heading" slot="header-content">
        Most or least visited parks by states
      </h3>
      <div id="content" style="padding: 5px">
        <label>
          <calcite-radio-group id="orderDirectionSelection" layout="horizontal" appearance="outline" scale="m" width="auto">
            <calcite-radio-group-item value="DESC" checked="">Most visited</calcite-radio-group-item>
            <calcite-radio-group-item value="ASC">Least visited</calcite-radio-group-item>
          </calcite-radio-group>
        </label><br /><br />
        <label>
          Number of parks to be returned from each state:
          <calcite-select id="topCountSelect" scale="s" width="auto">
            <calcite-option label="1" value="1"></calcite-option>
            <calcite-option label="2" value="2"></calcite-option>
            <calcite-option label="3" value="3"></calcite-option>
          </calcite-select>
        </label><br />
        <label>
          Year:
          <calcite-select id="orderByFieldSelect" scale="s" width="auto">
            <calcite-option
              label="Total of all time"
              value="TOTAL"
            ></calcite-option>
            <calcite-option label="2018" value="F2018"></calcite-option>
            <calcite-option label="2019" value="F2019"></calcite-option>
            <calcite-option label="2020" value="F2020"></calcite-option>
          </calcite-select>
        </label><br />
        <div style="width: 360px; max-width: 100%; display: flex;flex-direction: row;">
          <calcite-button
            id="query-parks" width="half" appearance="solid" alignment="center"scale="s">
            Query parks
          </calcite-button>
          <calcite-button
            id="clear-query" width="half" appearance="outline" alignment="center" scale="s">
            Clear query
          </calcite-button>
        </div>
        <br />
      </div>
      <calcite-panel id="resultsDiv">
        <h3 class="heading" id="resultsHeading" slot="header-content">
          Results
        </h3>
        <div id="results"></div>
      </calcite-panel>
    </calcite-panel>
  </body>
</html>

公园也会在地图上过滤以只显示与查询结果匹配的公园。为此，调用 queryTopObjectIds() 方法以获取从 queryTopFeatures 方法返回的公园的 objectIds。然后使用 objectIds 数组设置代表国家公园要素图层的图层视图的过滤器。

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Query top features from a FeatureLayer | Sample | GeoScene API for JavaScript 4.22</title>
    <script type="module"  src="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.esm.js"></script>
    <script nomodule="" src="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.css" />
    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      #infoDiv {
        padding: 6px;
        width: 370px;
        height: 97%;
        position: absolute;
        top: 10px;
        right: 10px;
        --calcite-ui-brand: #71C96E;
        --calcite-ui-brand-hover: #67B564;
      }

      #resultsDiv {
        overflow: auto;
        display: none;
      }
    </style>

    <script>
      require([
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/symbols/WebStyleSymbol",
        "geoscene/Basemap",
        "geoscene/rest/support/TopFeaturesQuery",
        "geoscene/rest/support/TopFilter"
      ], (Map, MapView, FeatureLayer, WebStyleSymbol, Basemap, TopFeaturesQuery, TopFilter) =>
        (async () => {

        // dark human geography basemap
        const basemap = new Basemap({
          portalItem: {
            id: "4f2e99ba65e34bb8af49733d9778fb8e"
          }
        });

        // national parks layer
        const layer = new FeatureLayer({
          url:
            "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_National_Parks_Annual_Visitation/FeatureServer/0",
          outFields: ["*"],
          renderer: await setRenderer(),
          popupTemplate: createPopupTemplate()
        });

        const map = new Map({
          basemap,
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-97.75188, 37.23308],
          zoom: 3,
          padding: {
            right: 380
          }
        });
        const layerView = await view.whenLayerView(layer);

        // get UI components involved in top features query
        const orderDirectionSelection = document.getElementById("orderDirectionSelection");
        const orderByFieldSelection = document.getElementById("orderByFieldSelect");
        const clearQueryButton = document.getElementById("clear-query");
        const queryParksButton = document.getElementById("query-parks");

        // *********************************************************
        // This function runs when user clicks on query parks button
        // *********************************************************
        document.getElementById("query-parks").addEventListener("click", async () => {
          clearQueryButton.appearance = "outline";
          queryParksButton.appearance = "solid";

          // check if the user wants to select the most or least visited parks
          // in each state
          const queryOrder = orderDirectionSelection.selectedItem.value;
          const orderByField = [
            `${orderByFieldSelection.selectedOption.value} ${queryOrder}`
          ];


          // TopFeatureQuery parameter for the queryTopFeatures method
          // collect user inputs to query either the most or the least
          // visited national parks in each state
          query = new TopFeaturesQuery({
            topFilter: new TopFilter({
              topCount: parseInt(topCountSelect.selectedOption.value),
              groupByFields: ["State"],
              orderByFields: orderByField
            }),
            orderByFields: orderByField,
            outFields: ["State, TOTAL, F2018, F2019, F2020, Park"],
            returnGeometry: true,
            cacheHint: false
          });
          const results = await layer.queryTopFeatures(query);


          document.getElementById("resultsDiv").style.display = "block";
          document.getElementById("resultsHeading").innerHTML = `Results: ${results.features.length} parks`;
          document.getElementById("results").innerHTML = "";


          graphics = results.features;
          graphics.forEach((result, index) => {
            const attributes = result.attributes;
            const item = document.createElement("calcite-pick-list-item");
            item.setAttribute("label", attributes.Park);
            item.setAttribute("value", index);

            const visitorTotal = orderByFieldSelection.selectedOption.value;
            const total = `Total visitors: ${attributes[visitorTotal]}`;
            const state = `State: ${attributes.State}`;
            const description = total + "\n" + state;
            item.setAttribute("description", description);
            item.addEventListener("click", parkResultClickHandler);
            document.getElementById("results").appendChild(item);
          });



          // set query for the queryTopObjectIds.
          query.orderByFields = [""];
          const objectIds = await layer.queryTopObjectIds(query);
          layerView.filter = {
            objectIds
          };

        });

        // ***************************************************
        // this function runs when user clicks on the park
        // in the list shown on the right side of the app
        // ***************************************************
        function parkResultClickHandler(event) {
          const target = event.target;
          const resultId = target.getAttribute("value");

          // get the graphic corresponding to the clicked zip code
          const result =
            resultId && graphics && graphics[parseInt(resultId, 10)];

          if (result) {
            view.popup.open({
              features: [result],
              location: result.geometry
            });
          }
        }

        clearQueryButton.addEventListener("click", () => {
          clearQueryButton.appearance = "solid";
          queryParksButton.appearance = "outline";
          layerView.filter = null;
          view.popup.close();
          document.getElementById("resultsHeading").innerHTML = `Results`;
          document.getElementById("results").innerHTML = "";
        });

        async function setRenderer() {
          const symbol = new WebStyleSymbol({
            name: "park",
            styleName: "Esri2DPointSymbolsStyle"
          });

          const cimSymbol = await symbol.fetchCIMSymbol();
          const symbolLayer = cimSymbol.data.symbol.symbolLayers[0];
          symbolLayer.size = 16;
          cimSymbol.data.symbol.symbolLayers = [symbolLayer];

          return {
            type: "simple",
            symbol: cimSymbol
          };
        }

        function createPopupTemplate(){
          return {
            title: "{Park}",
            content: [{
              type: "fields",
              fieldInfos: [{
                fieldName: "TOTAL",
                label: "Total visits",
                format: {
                  places: 0,
                  digitSeparator: true
                }
              }, {
               fieldName: "F2018",
               label: "2018",
               format: {
                 places: 0,
                 digitSeparator: true
               }
              },{
               fieldName: "F2019",
               label: "2019",
               format: {
                 places: 0,
                 digitSeparator: true
               }
              },{
               fieldName: "F2020",
               label: "2020",
               format: {
                 places: 0,
                 digitSeparator: true
               }
              }]
            }]
          };
        }
        })());
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <calcite-panel id="infoDiv" class="calcite-theme-dark">
      <h3 class="heading" slot="header-content">
        Most or least visited parks by states
      </h3>
      <div id="content" style="padding: 5px">
        <label>
          <calcite-radio-group id="orderDirectionSelection" layout="horizontal" appearance="outline" scale="m" width="auto">
            <calcite-radio-group-item value="DESC" checked="">Most visited</calcite-radio-group-item>
            <calcite-radio-group-item value="ASC">Least visited</calcite-radio-group-item>
          </calcite-radio-group>
        </label><br /><br />
        <label>
          Number of parks to be returned from each state:
          <calcite-select id="topCountSelect" scale="s" width="auto">
            <calcite-option label="1" value="1"></calcite-option>
            <calcite-option label="2" value="2"></calcite-option>
            <calcite-option label="3" value="3"></calcite-option>
          </calcite-select>
        </label><br />
        <label>
          Year:
          <calcite-select id="orderByFieldSelect" scale="s" width="auto">
            <calcite-option
              label="Total of all time"
              value="TOTAL"
            ></calcite-option>
            <calcite-option label="2018" value="F2018"></calcite-option>
            <calcite-option label="2019" value="F2019"></calcite-option>
            <calcite-option label="2020" value="F2020"></calcite-option>
          </calcite-select>
        </label><br />
        <div style="width: 360px; max-width: 100%; display: flex;flex-direction: row;">
          <calcite-button
            id="query-parks" width="half" appearance="solid" alignment="center"scale="s">
            Query parks
          </calcite-button>
          <calcite-button
            id="clear-query" width="half" appearance="outline" alignment="center" scale="s">
            Clear query
          </calcite-button>
        </div>
        <br />
      </div>
      <calcite-panel id="resultsDiv">
        <h3 class="heading" id="resultsHeading" slot="header-content">
          Results
        </h3>
        <div id="results"></div>
      </calcite-panel>
    </calcite-panel>
  </body>
</html>

要创建访问量最多或最少访问量的公园列表，我们使用方解石组件，这是来自 Esri 新设计系统的一组响应式、可重用的 Web 组件。我们还对方解石组件进行样式设计，以匹配公园符号的颜色，如下所示：

#infoDiv {
  padding: 6px;
  width: 370px;
  height: 97%;
  position: absolute;
  top: 10px;
  right: 10px;
  --calcite-ui-brand: #71C96E;
  --calcite-ui-brand-hover: #67B564;
}