开发者社区> 科技小毛> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

深入浅出 Javascript API(五)--Query & Find 查询

简介:
+关注继续查看
查询是webgis常用功能之一,基于地图的查询经历了多种形式的演变,现在用什么形式来展现查询已经没有固定模式,在适合webgis范围内,什么形式能够满足应用,就用什么形式的查询。举例描述一个最经典的场景,鼠标点击地图显示一个TIP小窗口,显示查询对象的简单信息,小窗口中提供一个"详细信息"链接,点击后弹出网页显示资料卡片。还有这样的形式,如拉框选择点要素,同时在地图下方的DIV显示出选择点的属性信息,这个在《[url=]ArcGIS Server 开发系列(五)--自定义 Toolbar 工具[/url]》通过ADF已经实现。Ags Javascript API如何完成这些功能呢?
    内容目录:

1.Query查询属性数据(无地图)
2.鼠标移动显示Query查询结果
3.Find查询地图,并在页面下方显示相应属性数据

1.仅用Query查询属性,不返回地图信息,此时就不再需要创建esri.layers.ArcGISMapServiceLayer对象来处理地图,但是需要引入"esri.tasks.query",并创建QueryTask对象:
queryTask =
new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");

    webgis查询一般涉决定返回结果的参数,包括是否返回几何图形,查询的属性字段,查询方式(默认"SPATIAL_REL_INTERSECTS"),查询Where语句等,例如:
query =
new esri.tasks.Query();
query.returnGeometry
=
false;
query.outFields
= ["SQMI","STATE_NAME","SUB_REGION","POP2000","POP2007","MALES","FEMALES"];

    执行查询,并将结果写入回调函数showResults:
function execute(stateName) {
    query.text
= stateName;
    queryTask.execute(query,showResults);
}


    所有的结果都会写入到showResults参数Featureset对象中,遍历该对象得到我们想要的属性结果。


    查询方式:


2.鼠标移动显示Query查询结果是常用的查询方式之一,最重要的就是利用了Ajax异步传输,将少量的信息显示在一个Tip中,访问效率高,体验较好。这里我们可以决定,是默认指定一图层区域要素进行hover查询,还是鼠标点击要查询的要素后,再hover查询,以实现前者为例,其他方式以此类推。

    查询功能主要是这几行代码完成:
var queryTask =
new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
var query =
new esri.tasks.Query();
query.returnGeometry
=
true;
query.outFields
= ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];
query.where
=
"STATE_NAME = 'South Carolina'";

    "query.text"和"query.where"区别在于,前者是通过"like"方式执行where查询,后者是直接写SQL语句。

    TIP UI是一个InfoWindow
var infoTemplate =
new esri.InfoTemplate();
infoTemplate.title
=
"${NAME}";
infoTemplate.content
=
"<b>2000 Population: </b>${POP2000}<br/>"
+
"<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>"
+
"<b>2007 Population: </b>${POP2007}<br/>"
+
"<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI}";
map.infoWindow.resize(
205,125);

    鼠标移动到指定区域后,通过对鼠标onmousemove和onmouseout事件来显示或隐藏查询TIPs
dojo.connect(map.graphics, "onMouseOver", function(evt) {
   
var content = evt.graphic.getContent();
    map.infoWindow.setContent(content);
   
var title = evt.graphic.getTitle();
    map.infoWindow.setTitle(title);
    evt.graphic.setSymbol(highlightSymbol);
    map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
}
);

dojo.connect(map.graphics,
"onMouseOut", function(evt) {
    map.infoWindow.hide();
    evt.graphic.setSymbol(symbol);
}
);





3.Find查询,和Query功能类似,但使用的REST服务不同,Query需要指定具体的REST图层服务,如"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3",而Find仅需提供当前地图服务"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer",然后通过属性来控制对哪个图层进行查找。
findTask =
new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
findParams
=
new esri.tasks.FindParameters();
findParams.returnGeometry
=
true;
findParams.layerIds
= [0,1,2];
findParams.searchFields
= ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"];

   这样做的好处是,可以方便的对多个图层进行查询,js代码只需要设置layerIds,在此之前添加"dojo.require("esri.tasks.find");"。页面下方显示查询结果,通过Ajax刷新,这里可以利用dojox.grid完成这个过程,Find搜索只能用like方式,并且不区分大小写,这是和Query另外一个区别。



    博客园链接:http://www.cnblogs.com/flyingis/archive/2008/07/29/1255373.html
 
 
本文转自温景良(Jason)博客园博客,原文链接:http://www.cnblogs.com/wenjl520/archive/2009/06/02/1494608.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【JavaScript】图片查看器
【JavaScript】图片查看器
18 0
JavaScript深入之bind的模拟实现
JavaScript深入系列第十一篇,通过bind函数的模拟实现,带大家真正了解bind的特性
36 0
javascript之有趣的【BOM】(深入)
Bom知识不难,就是东西比较多,耐心理解此篇文章,会让你收获满满。相信自己,认真看完。 BOM(全称:BrowserObjectModel)浏览器模型 有很多小白同学一听到Bom这个词,瞬间晕倒,根本不懂到底是什么,看以上的全称来翻译,就是浏览器中的东西,我们前端浏览器的主要方式在开发中来讲,核心就是window。
1525 0
深入理解javascript中的立即执行函数(function(){…})()
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。 ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。
5403 0
javascript中的原型
在JavaScript中,prototype对象是实现面向对象的一个重要机制。每个函数就是一个对象(Function),函数对象都有一个子对象prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。
550 0
+关注
580
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载