Question

我已经在页面中添加了图层，并尝试使用ARCGIS Javascript API在按钮单击时获取图层要素属性。 mapView与Legends及其中的所有详细信息正确加载。但是，用于在按钮单击时获取图层属性的工具不起作用。这是我的代码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with legend</title>
 <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">

  <style>
    html, body {
      height:100%;
        width:100%;
        margin:0;
        padding:0;
    }
#search{
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 74px;
      }
#execute{
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 74px;
      }
    #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
  </style>
 <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    var map;
    require([
      "esri/map","esri/layers/FeatureLayer","esri/dijit/Legend",
      "dojo/_base/array","dojo/parser",
      "dijit/layout/BorderContainer","dijit/layout/ContentPane", 
      "dijit/layout/AccordionContainer","esri/tasks/query", 
            "esri/tasks/QueryTask","dojo/dom","dojo/on","dojo/domReady!"
    ], function(
      Map, FeatureLayer, Legend,
      arrayUtils, parser,
            Query,QueryTask,dom,on
    ) {
      parser.parse();

      map = new Map("map", {
        basemap:"topo",
        center: [78.629, 18.092],
        zoom: 5
      });

            var offices = new FeatureLayer("http://localhost:6080/arcgis/rest/services/FrimData/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
            var route = new FeatureLayer("http://localhost:6080/arcgis/rest/services/FrimData/MapServer/1", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
             var depth = new FeatureLayer("http://localhost:6080/arcgis/rest/services/FrimData/MapServer/2", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
              var economicZone = new FeatureLayer("http://localhost:6080/arcgis/rest/services/FrimData/MapServer/3", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
       var boundary = new FeatureLayer("http://localhost:6080/arcgis/rest/services/FrimData/MapServer/4", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      //add the legend
      map.on("layers-add-result", function (evt) {
        var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
          return {layer:layer.layer, title:layer.layer.name};
        });
        if (layerInfo.length > 0) {
          var legendDijit = new Legend({
            map: map,
            layerInfos: layerInfo
          }, "legendDiv");
          legendDijit.startup();
        }
      });    

      map.addLayers([route,depth,economicZone,boundary,offices]);

            var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/FrimData/MapServer/0");

        var query = new Query();
        query.returnGeometry = false;

                query.outFields = [
          "Name", "OBJECTID"
        ];


            on(dom.byId("execute"), "click", executes); 

            function executes () {
        alert("df");
          query.text = dom.byId("stateName").value;
          queryTask.execute(query, showResults);
        }

        function showResults(results){
            var resultItems = [];
            var resultCount = results.features.length;
            for (var i = 0; i < resultCount; i++) {
                var featureAttributes = results.features[i].attributes;
                for (var attr in featureAttributes) {
                    alert(featureAttributes[attr]);
                    resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
                }
                resultItems.push("<br>");
            }
        }

    });

  </script>
</head>

<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

 <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Pane 2'">
        This pane could contain tools or additional content
      </div>
    </div>
  </div>
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
  </div>
    <div id="search"></div>
     <input type="text" id="stateName" value="1">
    <input id="execute" type="button" value="Get Details">
</div>
</body>

</html>

从步骤按钮点击on(dom.byId("execute"), "click", executes);它无效。我提到这个例子https://developers.arcgis.com/javascript/jssamples/query_nomap.html我是新手。请帮帮我们。

Answer 1

您所需的AMD模块与实际参考功能的模块不匹配。希望有所帮助

    var map;
require([
  "esri/map",
  "esri/layers/FeatureLayer",
  "esri/dijit/Legend",
  "dojo/_base/array",
  "dojo/parser",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane", 
  "dijit/layout/AccordionContainer",
  "esri/tasks/query", 
  "esri/tasks/QueryTask",
  "dojo/dom",
  "dojo/on","dojo/domReady!"
], function(
  Map, FeatureLayer, Legend, arrayUtils, parser, BorderContainer, ContentPane, AccordionContainer, Query, QueryTask, dom, on
) {
  parser.parse();

  map = new Map("map", {
    basemap:"topo",
    center: [78.629, 18.092],
    zoom: 5
  });


    on(dom.byId("execute"), "click", function() {
        console.info("got it");
        alert("df");                
    });          
});

ArcGIS Javascript API按钮单击无法正常工作

1 个答案: