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网址读取美国的州。所有的州都在画这样的东西。

现在我的要求是，当用户单击地图上的任何状态时，该状态应突出显示；当用户单击另一状态时，则先前选择的状态应取消选择，而新选择的状态应显示突出显示。

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

0 个答案: