根据以下要求，我一次只能选择一个状态 . 但是我有一个要求，比如我需要逐个选择状态以及我所点击的应该选择的状态 . 假设我选择了三个状态处于选定状态，如果我进入第一个选定状态，我再次点击它应该取消选择特定状态反之亦然 . 根据下面的要求，当我点击下一层时，我将删除所有图层信息，但我需要保留它，如果我再次点击已选择的一个只应该取消选择 .

谁可以帮我这个事？

<!DOCTYPE html>
<html>
<head>
  <title>Hosted Feature layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
</head>
<body>

  <!-- Main content -->
  <section class="content pp-dashboard">
      <!-- Small boxes (Stat box) -->
      <div class="row">
          <div class="col-lg-12">
              <div id="viewDiv" style="height: 800px;"></div>
              <div id="searching">
                  <input type="text" name="name" id="searchInput">
                  <input type="submit" name="Search" id="searchBtn">
              </div>
          </div>
      </div>
      <!-- /.row -->
  </section>
  <script src="https://js.arcgis.com/4.8/"></script>
  <script>
    require([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer",
          "esri/widgets/Legend",
          "esri/layers/GraphicsLayer",
          "esri/Graphic",
          "dojo/on",
          "dojo/dom",
          "dojo/domReady!"
        ], function(
          Map, MapView, FeatureLayer, Legend, GraphicsLayer, Graphic, on, dom
        ) {
            let highlight;
            let tempGraphicsLayer = new GraphicsLayer();

            var filteredGeometries;
            var searchInput = dom.byId("searchInput");
            var povLayer = new FeatureLayer({
                url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_States_Generalized/FeatureServer/0",
                outFields: ["*"]
            });

            var map = new Map({
                basemap: "dark-gray",
                layers: [povLayer]
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-99.244309, 40.004476],
                zoom: 5
            });

            view.on("pointer-move", eventHandler);
            view.on("pointer-down", eventHandler);
            view.on("click", eventHandler);

            function eventHandler(event) {
                // the hitTest() checks to see if any graphics in the view
                // intersect the given screen x, y coordinates
                view.hitTest(event)
                  .then((res) => {
                        console.log("length",res.results);
                        if (res.results.length < 1) {
                            return
                        }
                        view.graphics.removeAll();

                        // create a new selected graphic
                        let selectedGraphic = new Graphic({
                            geometry: res.results[0].graphic.geometry,
                            attributes: res.results[0].graphic.attributes,
                            symbol: {
                                type: "simple-fill",
                                // style: "polygon",
                                color: "orange",
                                // size: "12px", // pixels
                                outline: { // autocasts as new SimpleLineSymbol()
                                    color: [255, 255, 0],
                                    width: 2 // points
                                }
                            }
                        });

                        // add the selected graphic to the view
                        // this graphic corresponds to the row that was clicked
                        view.graphics.add(selectedGraphic);
                  });
            }

            var legend = new Legend({
                view: view,
                layerInfos: [{
                    layer: povLayer,
                    title: "Poverty in the southeast U.S."
                }]
            });

            view.ui.add(legend, "top-right");


    });

    </script>
</body>
</html
arcgis