AnsweredAssumed Answered

How to use FeatureTable to display query results

Question asked by zhouleizhou on Jun 26, 2016
Latest reply on Jun 28, 2016 by zhouleizhou

I am studying the following ESRI "Select with Feature layer" sample codes: 

ArcGIS API for JavaScript Sandbox

 

After that query is finished, I would like to create a FeatureTable and let all the query pink points within the 1 mile buffer go to the FeatureTable. Currently all the records go to the Feature Table, but I just need want to display data in table for the points inside the buffer. Below is my codes. Thanks a lot!

 

<!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>Select with feature layer</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/tundra/tundra.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

    <style>

      html, body, #mapDiv {

        padding: 0;

        margin: 0;

        height: 100%;

      }

      #messages{

        background-color: #fff;

        box-shadow: 0 0 5px #888;

        font-size: 1.1em;

        max-width: 15em;

        padding: 0.5em;

        position: absolute;

        right: 20px;

        top: 20px;

        z-index: 40;

      }

    </style>

    <script src="https://js.arcgis.com/3.17/"></script>

    <script>

      var map;

      require([

        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/FeatureTable",

        "esri/tasks/query", "esri/geometry/Circle",

        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",

        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"

      ], function(

        Map, FeatureLayer,FeatureTable,

        Query, Circle,

        Graphic, InfoTemplate, SimpleMarkerSymbol,

        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,

        esriConfig, Color, dom

      ) {

        // use a proxy page if a URL generated by this page is greater than 2000 characters

        //

        // this should not be needed as nearly all query & select functions are performed on the client

        esriConfig.defaults.io.proxyUrl = "/proxy/";

 

 

        map = new Map("mapDiv", {

          basemap: "streets",

          center: [-95.249, 38.954],

          zoom: 14,

          slider: false

        });

       

        //add the census block points in on demand mode. Note that an info template has been defined so when

        //selected features are clicked a popup window will appear displaying the content defined in the info template.

        var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{

          //infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),

          outFields: ["*"]

        });

 

 

        // selection symbol used to draw the selected census block points within the buffer polygon

        var symbol = new SimpleMarkerSymbol(

          SimpleMarkerSymbol.STYLE_CIRCLE,

          12,

          new SimpleLineSymbol(

            SimpleLineSymbol.STYLE_NULL,

            new Color([247, 34, 101, 0.9]),

            1

          ),

          new Color([207, 34, 171, 0.5])

        );

        featureLayer.setSelectionSymbol(symbol);

       

        //make unselected features invisible

        var nullSymbol = new SimpleMarkerSymbol().setSize(0);

        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

       

        map.addLayer(featureLayer);

       

        var circleSymb = new SimpleFillSymbol(

          SimpleFillSymbol.STYLE_NULL,

          new SimpleLineSymbol(

            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,

            new Color([105, 105, 105]),

            2

          ), new Color([255, 255, 0, 0.25])

        );

        var circle;

 

 

        //when the map is clicked create a buffer around the click point of the specified distance.

        map.on("click", function(evt){

          circle = new Circle({

            center: evt.mapPoint,

            geodesic: true,

            radius: 1,

            radiusUnit: "esriMiles"

          });

          map.graphics.clear();

          map.infoWindow.hide();

          var graphic = new Graphic(circle, circleSymb);

          map.graphics.add(graphic);

 

 

          var query = new Query();

          query.geometry = circle.getExtent();

          //use a fast bounding box query. will only go to the server if bounding box is outside of the visible map

          featureLayer.queryFeatures(query, selectInBuffer);

        });

       

        

 

 

        function selectInBuffer(response){

          var feature;

          var features = response.features;

          var inBuffer = [];

          //filter out features that are not actually in buffer, since we got all points in the buffer's bounding box

          for (var i = 0; i < features.length; i++) {

            feature = features[i];

            if(circle.contains(feature.geometry)){

              inBuffer.push(feature.attributes[featureLayer.objectIdField]);

            }

          }

          var query = new Query();

          query.objectIds = inBuffer;

          myFeatureTable.selectedRowIds = query.objectIds;  // here is what I added

          myFeatureTable._showSelectedRecords(); //

 

 

          //use a fast objectIds selection query (should not need to go to the server)

          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){

            var totalPopulation = sumPopulation(results);

            var r = "";

            r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";

            dom.byId("messages").innerHTML = r;

           

           

           

           

          });

        }

       

        function sumPopulation(features) {

          var popTotal = 0;

          for (var x = 0; x < features.length; x++) {

            popTotal = popTotal + features[x].attributes["POP2000"];

          }

         

         

         

          return popTotal;

        }

 

 

          myFeatureTable = new FeatureTable({

            "featureLayer" : featureLayer,

            "outFields": [

              "POP2000"

            ],

            fieldInfos: [

              {

                name: 'POP2000',

                alias: 'POP2000',

              },

            

              {

                name: 'HOUSEHOLDS',

                alias: 'Household Name',

              }

            ],

            "map" : map

          }, 'myTableNode');

          myFeatureTable.startup();

 

 

      });

    </script>

  </head>

 

 

  <body>

    <span id="messages">Click on the map to select census block points within 1 mile.</span>

    <div id="mapDiv"></div>

    <div id="myTableNode"></div>

  </body>

</html>

Outcomes