（六）ArcGISAPIForJavascript之查询功能
⽂章⽬录
1.引⾔
在ArcGIS API中查询功能是⾮常常⽤的，Esri给我们提供了三个类⽤于实现⽮量数据查询功能。FindTask,QueryTask,IdentifyTask，他们之间的区别为：
FindTask只能进⾏属性查询，QueryTask,IdentifyTask两个类既可以进⾏属性查询也可以进⾏空间查询。
对于QueryTask,IdentifyTask两个类，QueryTask只可应⽤于⼀个单独的图层，IdentifyTask可应⽤于地图服务和多个图层
QueryTask可以进⾏简单的统计功能。
2.需求
2.1利⽤FindTask实现简单的属性查询
我们将name属性为J4的教学楼查询出来，在页⾯上显⽰J4是哪⼀个学院？（机电学院），并且将J4的楼⾼亮显⽰
2.1.1.代码实现
在页⾯加⼊⼀个地图（略）
在页⾯添加⼀个button和⼀个div（button⽤于属性查询，div⽤于显⽰楼层的名字）
<input type="button" value="属性查询" id="Btn"/>
<div id="divShowResult"></div>
创建属性查询对象并给button绑定点击事件
//地图服务的URL
var MapServer ="localhost:6080/arcgis/rest/services/Test/MyService/MapServer";
//创建属性查询对象
var findTask =new FindTask(MapServer);
//创建属性查询参数
var findParams =new FindParameters();
on(dom.byId("Btn"),"click",function(){
//是否返回给我们⼏何信息
//对哪⼀个图层进⾏属性查询
findParams.layerIds =[1];
如何下载javascript//查询的字段
findParams.searchFields =["name"];
//searchText和searchFields结合使⽤，即查询name=J4
findParams.searchText ="J4";
//执⾏查询对象
})
处理属性查询返回给我们的数据
function ShowFindResult(queryResult){
//创建线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH,new dojo.Color([255,0,0]),3);
//创建⾯符号
var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
if(queryResult.length ==0){
dom.byId("divShowResult").innerHTML ="";
return;
}
var htmls ="";
if(queryResult.length >=1){
htmls = htmls +"<table style=\"width: 100%\">";
htmls = htmls +"<tr><td>名称</td></tr>";
for(var i =0; i < queryResult.length; i++){
//获得图形graphic
var graphic = queryResult[i].feature;
//赋予相应的符号
graphic.setSymbol(fill);
//将graphic添加到地图中，从⽽实现⾼亮效果
//获得教学楼名称（此处是和shp属性表对应的）
var ptName = graphic.attributes["alias"];
if(i %2==0)
htmls = htmls +"<tr>";
else
htmls = htmls +"<tr bgcolor=\"#F0F0F0\">";
htmls = htmls +"<td><a href=\"#\" \">"+ ptName +"</a></td>";
htmls = htmls +"</tr>";
}
htmls = htmls +"</table>";
//将属性绑定在divShowResult上⾯
dom.byId("divShowResult").innerHTML = htmls;
}
}
2.2.2全部代码
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>FindTask</title>
<link rel="stylesheet" type="text/css" href="localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/>
<script type="text/Javascript" src="localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<style type="text/css">
.MapClass{
width:100%;
height:600px;
border:1px solid #000;
}
</style>
<script type="text/javascript">
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/on",
"dojo/dom",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"dojo/domReady!"],
function(Map, ArcGISDynamicMapServiceLayer,on,dom,
FindTask, FindParameters,
SimpleLineSymbol,SimpleFillSymbol,Graphic){
var map =new esri.Map("mapDiv");
//地图服务的URL
var MapServer ="localhost:6080/arcgis/rest/services/Test/MyService/MapServer";
var layer =new esri.layers.ArcGISDynamicMapServiceLayer(MapServer);
map.addLayer(layer)
//创建属性查询对象
var findTask =new FindTask(MapServer);
//创建属性查询参数
var findParams =new FindParameters();
on(dom.byId("Btn"),"click",function(){
//是否返回给我们⼏何信息
//对哪⼀个图层进⾏属性查询
findParams.layerIds =[1];
//查询的字段
findParams.searchFields =["name"];
//searchText和searchFields结合使⽤，即查询name=J4
findParams.searchText ="J4";
//执⾏查询对象
})
function ShowFindResult(queryResult){
//创建线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH,new dojo.Color([255,0,0]),3);
//创建⾯符号
var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
if(queryResult.length ==0){
dom.byId("divShowResult").innerHTML ="";
return;
}
var htmls ="";
if(queryResult.length >=1){
htmls = htmls +"<table style=\"width: 100%\">";
htmls = htmls +"<tr><td>名称</td></tr>";
for(var i =0; i < queryResult.length; i++){
/
/获得图形graphic
var graphic = queryResult[i].feature;
//赋予相应的符号
graphic.setSymbol(fill);
//将graphic添加到地图中，从⽽实现⾼亮效果
//获得教学楼名称（此处是和shp属性表对应的）
var ptName = graphic.attributes["alias"];
if(i %2==0)
htmls = htmls +"<tr>";
else
htmls = htmls +"<tr bgcolor=\"#F0F0F0\">";
htmls = htmls +"<td><a href=\"#\" \">"+ ptName +"</a></td>";
htmls = htmls +"</tr>";
}
htmls = htmls +"</table>";
//将属性绑定在divShowResult上⾯
dom.byId("divShowResult").innerHTML = htmls;
}
}
});
</script>
</head>
<body>
<div id="mapDiv"class="MapClass"></div>
<input type="button" value="属性查询" id="Btn"/>
<div id="divShowResult"></div>
</body>
</html>
运⾏之后的结果为：
2.2利⽤QueryTask实现空间查询
此时的的需求是：我们在地图上画⼀个图形，然后和图形相交的教学楼选择出来。分析：
1.使⽤draw交互绘制⼏何形状
2.根据geometry形状构建空间查询参数
3.执⾏空间分析对象
4.处理空间分析的结果
2.2.1代码实现
创建⼀个button和⼀个div（button⽤于激活绘图⼯具，div⽤户显⽰⽤户选择的教学楼的名称）
<input type="button" value="空间查询" id="Btn"/>
<div id="divShowResult"></div>
给button绑定事件（激活绘图⼯具）
//定义⼀个绘图⼯具
var toolBar =new Draw(map);
//给button绑定事件
on(dom.byId("Btn"),"click",function(){
//激活绘图⼯具，我要绘制⼀个⾯图形
toolBar.activate(Draw.POLYGON);
})
给绘图⼯具绑定绘图完成事件，绘图完成执⾏queryGraphic函数，并将绘制的geometry传⼊函数
on(toolBar,"draw-complete",function(result){
//获得绘图得到的⾯
var ry;
//关闭绘图⼯具
toolBar.deactivate();
queryGraphic(geometry);
});
编写queryGraphic函数
function queryGraphic(geometry){
//创建查询对象，注意：服务的后⾯有⼀个编号，代表对那⼀个图层进⾏查询
var queryTask =new QueryTask("localhost:6080/arcgis/rest/services/Test/MyService/MapServer/1");
//创建查询参数对象
var query =new Query();
//空间查询的⼏何对象
//服务器给我们返回的字段信息，*代表返回所有字段
query.outFields =["*"];
//空间参考信息
query.outSpatialReference = map.spatialReference;
//查询的标准，此处代表和geometry相交的图形都要返回
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
//是否返回⼏何信息
//执⾏空间查询
}
处理返回的结果信息
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论