所选功能不会在文本框中显示值

时间:2017-04-26 06:56:24

标签: javascript feature-selection arcgis-js-api

当我点击所选功能时。我想在文本框中显示其区域

else if(which == "Froom"){
            var frm = (id).toString();
            frm = frm.replace("Froom", "");
            query.where = "Room_No='" + frm + "'";
            console.info(query.where);
            query.returnGeometry = true;
            layerR.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
              thePoly = features[0].geometry;
              theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent
              map.setExtent(theExtent);

            });
var node = Dom.byId('areainacre');
                 On(layerR, 'click', function (e) {
      node.value = e.graphic.attributes.Area_Acres;
       });
          }

        }`

1 个答案:

答案 0 :(得分:1)

好吧,您可以直接连接要素图层上的点击事件,并在成功处理程序中将值附加到文本框中 -

以下是它的工作代码 -

注意 - 根据您的GIS图层更改字段名称。



<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Feature Layer - display results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      #mapDiv {
        position: relative;
        margin-top: 30px;
      }
      #info {
        background: #fff;
        box-shadow: 0 0 5px #888;
        left: 1em;
        padding: 0.5em;
        position: absolute;
        top: 1em;
        z-index: 40;
      }
    </style>

    <script src="https://js.arcgis.com/3.20/"></script>
    <script>
      var map, dialog;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
        "esri/Color", "dojo/number", "dojo/dom-style",
        "dijit/TooltipDialog", "dijit/popup", "dojo/parser", "dijit/form/TextBox",
        "dijit/registry", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, esriLang,
        Color, number, domStyle,
        TooltipDialog, dijitPopup, 
        parser, TextBox, registry
      ) {
        parser.parse();
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        });

        var southCarolinaCounties = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
        });
        southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");

        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,255,255,0.35]),
            1
          ),
          new Color([125,125,125,0.35])
        );
        southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));
        map.addLayer(southCarolinaCounties);

        map.infoWindow.resize(245,125);

        dialog = new TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();

        var highlightSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,0,0]), 3
          ),
          new Color([125,125,125,0.35])
        );

        //close the dialog when the mouse leaves the highlight graphic
        map.on("load", function(){
          map.graphics.enableMouseEvents();
          //map.graphics.on("mouse-out", closeDialog);

        });

        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        southCarolinaCounties.on("click", function(evt){
          closeDialog();
          //Update value here
          var container = registry.byId("areainacre");
          container.set("value", evt.graphic.attributes.NAME);
          
          var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>"
            + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>"
            + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>"
            + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";

          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
          map.graphics.add(highlightGraphic);

          dialog.setContent(content);

          domStyle.set(dialog.domNode, "opacity", 0.85);
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY
          });
        });

        function closeDialog() {
          map.graphics.clear();
          dijitPopup.close(dialog);
        }

      });
    </script>
  </head>
  <body class="tundra">
    Name of clicked feature is :-
    <input type="text" name="Name" value="Name Value"
    data-dojo-type="dijit/form/TextBox"
    data-dojo-props="trim:true, propercase:true" id="areainacre" />
    <div id="mapDiv">
      <div id="info">
        Click over a county in South Carolina to get more information.
      </div>
    </div>
  </body>
</html>
&#13;
&#13;
&#13;

希望这会对您有所帮助:)