Arcgis for JS Featurelayer implementation of spatial query and attribute query

Spatial Query and attribute query is commonly used in two kinds of data retrieval and query, in this section, will tell the ArcGIS for JS How to implement the Featurelayer of these two ways, first map to show you:

Implementation interface

Property Query

Space query

After reading the effect, the following talk about my implementation ideas.

First of all, the key to the implementation of queries is query, property query Query.where to achieve, spatial query query.geometry to achieve, the specific code is as follows:

1. Property Query

On (Dom.byid ("Query"), "click", Function (event) {
    map.graphics.clear ();
    var name = Dom.byid ("name"). Value;
    var query = new query ();
    Query.where = "name = '" +name+ "";
    City.queryfeatures (query, function (results) {
        var features = Results.features;
        Console.log (features);
        Map.centerandzoom (features[0].geometry,8);
        var SMS = new Simplemarkersymbol (Simplemarkersymbol.style_diamond,
                new Simplelinesymbol ( Simplelinesymbol.style_solid,
                        new Color ([0,0,0]),
                        1
                ),
                new Color ([255,0,0])
        ;
        Map.graphics.add (New Graphic (features[0].geometry,sms));
    });

2, Space query

    var draw = new Esri.toolbars.Draw (map);
            Draw.on ("Draw-end", Addgraphictomap);
                On (Dom.byid ("extent"), "click", Function (event) {map.graphics.clear ();
                Map.setmapcursor ("pointer");
            Draw.activate (Esri.toolbars.Draw.EXTENT);
            });
                function Addgraphictomap (evt) {map.setmapcursor ("default");
                Draw.deactivate (); var SFS = new Simplefillsymbol (simplefillsymbol.style_solid, New Simplelinesymbol (simplelinesymbol.sty
                    Le_dashdot, New Color ([255,0,0]), 2,
                New Color ([255,255,0,0.25]));
                Map.graphics.add (New Graphic (Evt.geometry, SFS));
                Query by space var query = new query ();
                Query.geometry = Evt.geometry; City.selectfeatures (query, Featurelayer.selection_new,function (results) {Console.log (results); for (var i= 0,length=results.length;i<length;i++) {var= "" sms= "new" Simplemarkersymbol (Simplemarkersymbol.style_ circle,= "10,=" "new=" Simplelinesymbol (simplelinesymbol.style_solid,= "" Color ([255,0,0]), = "" 1= ""), = "" Color ([ 0,255,255,0.25] = ""); = "results[i].symbol=" SMS; "City.redraw (); =" "}="}); = "" Map.setextent ( Evt.geometry.getextent (). Expand (2)); = "};<=" "pre=" "><br> complete code is as follows:<p></p> <p></p ><pre class= "Brush:java;" > <meta http-equiv= "content-type" content= "text/html; Charset=utf-8 "> <meta name=" viewport "content=" initial-scale=1, Maximum-scale=1,user-scalable=no "> <ti Tle>simple map</title> <link rel= "stylesheet" href=
            Esri/css/esri.css "> <link rel=" stylesheet "href=" PAGE.CSS "> <style> html, Body, #map {
height:100%;            margin:0;
        padding:0;
            Body {background-color: #FFF;
            Overflow:hidden;
            font-family: "Trebuchet MS";
        font-size:12px;
            } #map_ctrl {z-index:99;
            Position:absolute;
            top:20pt;
            right:10pt;
        Background: #fff;
            }. button{padding:3px;
            Background: #eee;
            Text-align:center;
            font-size:12px;
        font-family: "Microsoft Ya Hei";
            }. button:hover,.attr_ctrl:hover{background: #ccc;
        Cursor:pointer;
            } #attr_ctrl {z-index:99;
            width:155px;
            Position:absolute;
            right:0px;
            bottom:5px;
        Text-align:right;
            }. attr_ctrl{padding:5px;
            font-size:12px;
            font-family: "Microsoft Ya Hei";
       width:100px;     Background: #eee;
            border:1px solid #000;
        Border-bottom:none;
            } #map_attr {z-index:99;
            font-size:12px;
            font-family: "Microsoft Ya Hei";
            width:176px;
            height:150px;
            Background: #eee;
            Position:absolute;
            bottom:0px;
            right:0px;
            border:1px solid #000;
        Border-bottom:none; } </style> <script src= "Http://localhost/arcgis_js_api/library/3.9/3.9/init.js" ></script> &L T;script src= "Jquery-1.8.3.js" ></script> <script src= "Jquery.page.js" ></script> <script&gt
        ;
        var map, Mapcenter; Require (["Esri/map", "Esri/layers/arcgistiledmapservicelayer", "Esri/layers/featurela
            Yer "," Esri/layers/graphicslayer "," esri/graphic "," Esri/geometry/point ", "Esri/symbols/simplefillsyMbol "," Esri/symbols/simplelinesymbol "," Esri/symbols/simplemarkersymbol "," dojo/_base /color "," Esri/tasks/query "," Esri/tasks/querytask "," dojo/on "," Dojo/dom " , "dojo/domready!"], function (Map, tiled, Featurelayer, Graphic
             Slayer, Graphic, Point, Simplefillsymbol, Simplelinesymbol,
        Simplemarkersymbol, Color, Query, Querytask, ON, DOM)
            {map = new map ("map", {logo:false,slider:true});
            var tiled = new Tiled ("Http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
            Map.addlayer (tiled,0);
            var labellayer = new Graphicslayer ();
            Map.addlayer (labellayer,2);
            Mapcenter = new Point (103.847, 36.0473, map.spatialreference); Map.cenTerandzoom (mapcenter,4);
            var city = new Featurelayer ("http://localhost:6080/arcgis/rest/services/city/MapServer/0");
 
            Map.addlayer (city);
                On (Dom.byid ("Query"), "click", Function (event) {map.graphics.clear ();
                var name = Dom.byid ("name"). Value;
                var query = new query ();
                Query.where = "name = '" +name+ "";
                    City.queryfeatures (query, function (results) {var features = Results.features;
                    Console.log (features);
                    Map.centerandzoom (features[0].geometry,8);
                            var SMS = new Simplemarkersymbol (Simplemarkersymbol.style_diamond, 10,
                                    New Simplelinesymbol (Simplelinesymbol.style_solid, New Color ([0,0,0]),
   1), New Color ([255,0,0])                 );
                Map.graphics.add (New Graphic (features[0].geometry,sms));
            });
 
            });
            var draw = new Esri.toolbars.Draw (map);
            Draw.on ("Draw-end", Addgraphictomap);
                On (Dom.byid ("extent"), "click", Function (event) {map.graphics.clear ();
                Map.setmapcursor ("pointer");
            Draw.activate (Esri.toolbars.Draw.EXTENT);
            });
                function Addgraphictomap (evt) {map.setmapcursor ("default");
                Draw.deactivate (); var SFS = new Simplefillsymbol (simplefillsymbol.style_solid, New Simplelinesymbol (simplelinesymbol.sty
                    Le_dashdot, New Color ([255,0,0]), 2,
                New Color ([255,255,0,0.25]));
                Map.graphics.add (New Graphic (Evt.geometry, SFS));
                Query according to the spacevar query = new query ();
                Query.geometry = Evt.geometry;
                    City.selectfeatures (query, featurelayer.selection_new, function (results) {Console.log (results); for (var i= 0,length=results.length;i<length;i++) {var= "" sms= "new" Simplemarkersymbol (Simplemarkersymbol . style_circle,= "" 10,= "" new= "" Simplelinesymbol (simplelinesymbol.style_solid,= "" Color ([255,0,0]), = "" 1 = ""), = "" Color ([0,255,255,0.25]) = ""); = "results[i].symbol=" SMS; "City.redraw (); =" "}="}); = "" Map.setextent ( Evt.geometry.getextent (). Expand (2)); = "};=" "<=" "script>=" "<=" "head=" "> <div id=" map "> <d IV id= "Map_ctrl" > City Name: <input type= "text" id= "name" value= "Beijing" > Query rectangle <!--html> </div></div></length;i++) {></pre><br> Welcome to Lzugis CSDN ArcGIS for JS series articles, have questions please contact: <p ></p> <p>QQ:1004740957<br> </p> &LT;P&GT;MAIL:NIUJP08@QQ.COM&LT;/P&GT <p> Letter Please specify your purpose, convenient for me for your resolving answer confused.       </p>