Fatal编程技术网
  • javascript/
  • Javascript ArcGIS 4.8 JS:悬停或单击时，状态未显示“选定”

Javascript ArcGIS 4.8 JS:悬停或单击时，状态未显示“选定”

javascript

Javascript ArcGIS 4.8 JS:悬停或单击时，状态未显示“选定”,javascript,arcgis,arcgis-js-api,Javascript,Arcgis,Arcgis Js Api,我正在使用ArcGis 4.8 Javascript库。我只停留在一点上。我正在用美国各州的图层创建地图，并希望在悬停或单击地图上的任何州时显示高亮显示。但不幸的是，我无法找到任何方法来实现这一目标 下面是我写的代码 <!DOCTYPE html> <html> <head> <title>Hosted Feature layer</title> <link rel="stylesheet" href="https:/

我正在使用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>


主体要素图层
要求([
“esri/Map”，
“esri/views/MapView”，
“esri/图层/功能图层”，
“esri/widgets/Legend”，
“esri/layers/GraphicsLayer”，
“esri/图形”，
“dojo/on”，
“dojo/dom”，
“dojo/domReady！”
]，功能(
地图、地图视图、功能层、图例、GraphicsLayer、图形、打开、dom
) {
设tempGraphicsLayer=new GraphicsLayer（）；
var过滤沉降计；
var searchInput=dom.byId（“searchInput”）；
var povLayer=新功能层({
url:“https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0",
外场：[“*”]
});
var映射=新映射({
底图：“深灰色”，
图层：[povLayer]
});
var view=新的地图视图({
容器：“viewDiv”，
地图：地图，
中心：[-99.244309,40.004476]，
缩放：5
});
查看（'单击'，（事件）=>{
view.hitTest（事件）
。然后（（res）=>{
console.log（“长度”，res.results）；
如果（res.results.length>1）{
回来
}
单击ResultData=res['results'][0]；
让stateCode=clickedResultData[“图形”][“属性”][“状态”]；
让stateName=clickedResultData[“图形”][“属性”][“状态名称”]；
日志（“clickedResultData”，clickedResultData）；
});
});
view.ui.add（“搜索”，“右下”）；
/******************************************************************
*
*将层添加到图例上的LayerFos
*
******************************************************************/
变量图例=新图例({
视图：视图，
layerInfos：[
{
图层：povLayer，
标题：“美国东南部的贫困”
}]
});
view.ui.add（图例，“右上”）；
});
在我的代码中，我使用FeatureLayer从FeatureLayer url读取美国的州。所有的州都在画这样的东西

现在我的要求是，当用户单击地图上的任何状态时，该状态应高亮显示，当用户单击另一个状态时，上一个选择的状态应取消选择，新选择的状态应显示高亮显示

我找到了一种在地图上的任何状态上悬停/单击时显示高亮显示状态的方法。下面是完整的代码

<!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>


主体要素图层
要求([
“esri/Map”，
“esri/views/MapView”，
“esri/图层/功能图层”，
“esri/widgets/Legend”，
“esri/layers/GraphicsLayer”，
“esri/图形”，
“dojo/on”，
“dojo/dom”，
“dojo/domReady！”
]，功能(
地图、地图视图、功能层、图例、GraphicsLayer、图形、打开、dom
) {
让重点突出；
设tempGraphicsLayer=new GraphicsLayer（）；
var过滤沉降计；
var searchInput=dom.byId（“searchInput”）；
var povLayer=新功能层({
url:“https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_States_Generalized/FeatureServer/0",
外场：[“*”]
});
var映射=新映射({
底图：“深灰色”，
图层：[povLayer]
});
var view=新的地图视图({
容器：“viewDiv”，
地图：地图，
中心：[-99.244309,40.004476]，
缩放：5
});
view.on（“指针移动”，eventHandler）；
view.on（“指针向下”，eventHandler）；
查看。打开（“单击”，eventHandler）；
函数eventHandler（事件）{
//hitTest（）检查视图中是否有任何图形
//与给定屏幕x、y坐标相交
view.hitTest（事件）
。然后（（res）=>{
console.log（“长度”，res.results）；
如果（res.results.length<1）{
回来
}
view.graphics.removeAll（）；
//创建新的选定图形
让selectedGraphic=新图形({
几何体：res.results[0]。graphic.geometry，
属性：res.results[0]。graphic.attributes，
符号：{
类型：“简单填充”，
//样式：“多边形”，
颜色：“橙色”，
//大小：“12px”，//像素
大纲：{//自动广播为新的SimpleLineSymbol（）
颜色：[255，255，0]，
宽度：2//点
}
}
});
//将选定图形添加到视图中
//此图形对应于单击的行