Arcgis for Js之featurelayer实现空间查询和属性查询

空间查询和属性查询是常用的两种对数据的检索与查询方式，在本节，将讲述Arcgis for Js下如何实现featurelayer的这两种查询方式，先贴图给大家看看：

实现界面

属性查询

空间查询

看完了效果，下面说说我的实现思路。

首先，实现查询的关键是Query，属性查询时query.where来实现，空间查询时query.geometry来实现，具体代码如下：

1、属性查询

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));
    });
});

2、空间查询

    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.STYLE_DASHDOT,
                         new Color([255,0,0]),
                         2
                    ),
                    new Color([255,255,0,0.25])
                );
                map.graphics.add(new Graphic(evt.geometry, sfs));
                //根据空间进行查询
                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>
完整代码如下：<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">
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/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: "微软雅黑";
        }
        .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: "微软雅黑";
            width: 100px;
            background: #eee;
            border: 1px solid #000;
            border-bottom: none;
        }
        #map_attr{
            z-index: 99;
            font-size: 12px;
            font-family: "微软雅黑";
            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>
    <script src="jquery-1.8.3.js"></script>
    <script src="jquery.page.js"></script>
    <script>
        var map, mapCenter;
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "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,
             GraphicsLayer,
             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.STYLE_DASHDOT,
                         new Color([255,0,0]),
                         2
                    ),
                    new Color([255,255,0,0.25])
                );
                map.graphics.add(new Graphic(evt.geometry, sfs));
                //根据空间进行查询
                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));="" };="" <="" script>="" <="" head="">
 
 
<div id="map">
    <div id="map_ctrl">
        城市名称：<input type="text" id="name" value="北京市">查 询
        矩 形
     
 
 
<!--html></div></div></length;i++){></pre><br>
欢迎关注LZUGIS CSDN之Arcgis for JS系列文章，有疑问请联系：<p></p>
<p>QQ：1004740957<br>
</p>
<p>Mail：niujp08@qq.com</p>
<p>来信请注明您的来意，方便我为您解疑答惑。</p>