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

 

 

1、属性查询

[javascript] view plain copy
 print?
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>