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

简介:

  查询是webgis常用功能之一,基于地图的查询经历了多种形式的演变,现在用什么形式来展现查询已经没有固定模式,在适合webgis范围内,什么形式能够满足应用,就用什么形式的查询。举例描述一个最经典的场景,鼠标点击地图显示一个TIP小窗口,显示查询对象的简单信息,小窗口中提供一个"详细信息"链接,点击后弹出网页显示资料卡片。还有这样的形式,如拉框选择点要素,同时在地图下方的DIV显示出选择点的属性信息,这个在《ArcGIS Server 开发系列(五)--自定义 Toolbar 工具》通过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:
ExpandedBlockStart.gif 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
复制代码
ExpandedBlockStart.gif 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));
}
);

ExpandedBlockStart.gifdojo.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另外一个区别。

 


本文转自Flyingis博客园博客,原文链接:http://www.cnblogs.com/flyingis/archive/2008/07/29/1255373.html,如需转载请自行联系原作者

相关文章
|
3天前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
37 0
|
3天前
|
API
egg.js 24.2写第一个api接口
egg.js 24.2写第一个api接口
72 0
|
3天前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
3天前
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
|
3天前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
1天前
|
设计模式 JavaScript API
Vue.js的provide/inject API实现了依赖注入
【5月更文挑战第17天】Vue.js的provide/inject API实现了依赖注入,允许父组件向深层子组件传递依赖,降低耦合,提高代码可维护性和测试性。通过provide选项提供依赖,如`provide: {foo: &#39;foo&#39;, bar: this.bar}`,子组件通过inject选项接收,如`inject: [&#39;foo&#39;, &#39;bar&#39;]`。适用于跨组件共享数据、插件开发和高阶组件。然而,应谨慎使用以防止过度复杂化代码结构。
13 0
|
3天前
|
缓存 监控 JavaScript
Node.js中构建RESTful API的最佳实践
【4月更文挑战第30天】本文介绍了在Node.js中构建RESTful API的最佳实践:选择合适的框架(如Express、Koa)、设计清晰的API接口(遵循HTTP动词和资源路径)、实现认证授权(JWT、OAuth 2.0)、错误处理、限流缓存、编写文档和测试,以及监控性能优化。这些实践有助于创建健壮、可维护和易用的API。
|
3天前
|
JavaScript API 开发者
深入了解Node.js的文件系统:Node.js文件系统API的使用与探索
【4月更文挑战第30天】本文深入探讨了Node.js的文件系统API,介绍了如何引入`fs`模块进行文件操作。内容包括异步读取和写入文件、删除文件、创建目录以及使用文件流进行高效操作。此外,还提到了文件系统的监视功能,帮助开发者全面掌握在Node.js中处理文件和目录的方法。
|
3天前
|
JavaScript API
Node.js API实例讲解——FS 文件夹操作
Node.js API实例讲解——FS 文件夹操作
32 0
|
3天前
|
JavaScript 前端开发 API
如何利用Python的Flask框架与Vue.js创建RESTful API服务
【4月更文挑战第10天】本文介绍了如何使用Flask和Vue.js创建一个前后端分离的RESTful API服务。Flask作为后端框架,负责提供CRUD操作,与SQLite数据库交互;Vue.js作为前端框架,构建用户界面并利用axios库与后端API通信。通过示例代码,展示了Flask设置路由处理用户数据以及Vue组件如何调用API获取和操作数据。此基础结构为构建更复杂的Web应用提供了起点。