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, mapCente
4000
r;
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>