ArcGIS – Performing Spatial Query in ArcGIS Javascript API 3.1

arcgis-javascript-apijavascriptquery-layer

I have scenario in which I have to select features drawing a polygon and and get the attribute values in to a tables or lists.The features on the map consist of polygon, line,point at the same time so when he selects the features according to layer name I have to bind to separate tables.Is there any example tackling this scenario.

Best Answer

Adapted from some code I have -- untested here -- the key is using the dojo DeferredList so that you know when all the queries to the seperate layers have returned.

When building the table I would reccomend the DataTables jquery based library -- works well for me, lots of features. http://www.datatables.net/

function selectFeaturesFromPolygon() {
    // CONNECT ON DRAW END EVENT
    drawToolbarDrawEndEvent = dojo.connect(drawToolbar, 'onDrawEnd', function (geom) {
        //clearCurrentSearchResults();
        var aDeferreds = [],
            deferredList,
            query = new esri.tasks.Query();

        query.geometry = geom;
        query.returnGeometry = true;
        query.outFields = ["*"];

        if (geom) {
            queryTask = new esri.tasks.QueryTask(FeatureServiceName1);
            //push multiple queries into this array
            aDeferreds.push(queryTask.execute(query));


            queryTask = new esri.tasks.QueryTask(FeatureServiceName2);
            //push multiple queries into this array
            aDeferreds.push(queryTask.execute(query));

            queryTask = new esri.tasks.QueryTask(FeatureServiceName3);
            //push multiple queries into this array
            aDeferreds.push(queryTask.execute(query));      

            // create a deferred list to aggregate the state for all identify queries
            deferredList = new dojo.DeferredList(aDeferreds);
            deferredList.then(function (aQueryResults) {
                //returns when all queries have finished
                //"aQueryResults" is 2D array of results
                //array[n][0] boolean true or false, success or failure of individual call
                //array[n][1] is the array of identity results returned
                buildTableFromMultipleResults(aQueryResults);
            }, function (err) {
                console.log("Error Occurred: " + err);
            });
        }       
        drawToolbar.activate(esri.toolbars.Draw.POLYGON);
    });
    drawToolbar.activate(esri.toolbars.Draw.POLYGON);
}


//datatable usage would be like this -- this is just a sample, you need to parse aQueryResults
//and put the values into cols, rows and data
//add some html somewhere <table id="tableSearchResults" cellpadding="0" cellspacing="0" border="0"   style="color: black;"></table>
function buildTableFromMultipleResults(aQueryResults) {

    var cols = [],
        row = [],
        data = [];

    //create columns
    $.each(results.fields, function (index, value) {
        cols.push({ 'sTitle': value.name });
    });

    //create rows and push into data
    $.each(results.features, function (index, value) {
        row = [];
        $.each(value.attributes, function (index2, value2) {
            row.push(value2);
        });
        data.push(dojo.clone(row));
    });

    oTable = $('#tableSearchResults').dataTable({
        "aaData": data,
        "aoColumns": cols,
        "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1] },
        { "bSearchable": false, "aTargets": [0, 1] },
        { "bVisible": false, "aTargets": currentSearchResults.hiddenFields },
        { "fnRender": function (o, val) {
            if (val !== null) {
                return Math.round(val * 1000) / 1000;
            }
            else {
                return "";
            }
        }, "aTargets": currentSearchResults.rounded
        }
        ],
        "aaSorting": [[5, 'asc']],
        "iDisplayLength": 25,
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "bDestroy": true,
        "sDom": 'liT<"clear">tp'    
    }); 
}