ArcGIS 4.8 JS：悬停或单击时状态未显示选中

Question

我正在使用 ArcGis 4.8 Javascript 库。我被困在一点上。我正在使用美国各州的图层创建地图，并希望在悬停或单击地图上的任何州时显示突出显示。但不幸的是，我无法找到任何方法来实现这一目标。

下面是我写的代码。

<!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 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('click', (event) => {
          view.hitTest(event)
            .then((res) => {
              console.log("length",res.results);
              if (res.results.length > 1) {
                return
              }

              let clickedResultData = res['results'][0];
              let stateCode = clickedResultData["graphic"]['attributes']['state_abbr'];
              let stateName = clickedResultData["graphic"]['attributes']['state_name'];
              console.log("clickedResultData", clickedResultData);

            });
        });


        view.ui.add("searching", "bottom-right");

        /******************************************************************
         *
         * Add layers to layerInfos on the legend
         *
         ******************************************************************/

        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>

在我的代码中，我使用 FeatureLayer 从 FeatureLayer url 读取美国各州。所有的州都在画这样的东西。

现在我的要求是，当用户点击地图上的任何一个州时，该州应该突出显示，当用户点击另一个州时，之前选择的州应该 de-select 并且新选择的州应该突出显示。

Answer 1

我找到了一种在地图上的任何州 hover/click 时显示突出显示状态的方法。以下是完整代码。

<!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 4.8 JS：悬停或单击时状态未显示选中

ArcGIS 4.8 JS: State is not showing selected when hover or click

javascript

arcgis

arcgis-js-api