arcgis api for flex 开发入门(五)查询

简介:
在gis中,针对要素的查询是一个最基本的操作,也是最常用的操作之一。
下面我们介绍如何使用arcgis api for flex 来查询我们需要的东西。
要在arcgis api for flex中进行查询操作,首先需要定义一个查询任务面板。
使用<esri ueryTask>标签就可以了。
  <esri ueryTask id="queryTask"
url=" http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demogra
phics/ESRI_Census_USA/MapServer/5">
        <esri uery id="query"
            text="{qText.text}"
            returnGeometry="true"
            spatialRelati>
            <esri utFields>
                <mx:String>MED_AGE</mx:String>
                <mx:String>POP2007</mx:String>
            </esri utFields>
        </esri uery>
    </esri ueryTask
id 唯一标识这个查询任务,url告诉查询面板去哪查。
<esri uery>定义一个查询,text是你需要查询的东西,<esri utFields>子标
签告诉Query 查询的结果返回哪些字段的内容。
QueryTask 定义好之后,我们还需要在界面上来调用这个QueryTask。因此我们定
义一个文本输入框和一个查询按钮
<mx anel title="Query a layer (search for a state)"
layout="horizontal" backgroundColor="0xB2BFC6" borderStyle="solid">     
   <mx:TextInput width="100%" id="qText" enter="doQuery()"
text="California"/>        <mx:Button label="Do Query" click="doQuery
()"/>                </mx anel>
文本输入框 用来输入你想要查询的内容,button 用来执行查询的动作。
那么这个doQuery()怎么实现呢?我们在mxml的标签中已经无法实现,这就需要引
入activescript脚本。我们需要在mxml中使用activescript脚本历来编写代码,
实现我们想要的功能。
关于activescript的语法大家可以参考activescript的相关书籍。
要在mxml文档中插入activescript,需要使用<mx:Script>标签
<mx:Script>
        <![CDATA[
        ]]>
    </mx:Script>
activescript 是一种类java 语言,它本身有一个AVM,把activescript编译成
java 的代码,然后再通过JVM转换成字节码执行。
我们下面就开始实现doQuery();
首先,我们要用import 指令引入我们需要的命名空间,和java基本一样
<mx:Script>
        <![CDATA[
            import com.esri.ags.Graphic;
            import com.esri.ags.tasks.FeatureSet;
            import com.esri.ags.tasks.Query;
            import mx.controls.Alert;
            import mx.rpc.AsyncResponder;
        ]]>
    </mx:Script>
然后我们定义doQuery()函数: 注意activescript代码 要放到<mx:Script>标签

private function doQuery() : void
            {
                queryTask.execute( query, new AsyncResponder( onResult,
onFault ));
在doQuery()函数中直接调用了queryTask的execute方法,这是一个异步调用。
成功响应onResult函数,失败则响应onFault函数。
查询已经写好了,那么我们怎么得到查询的结果呢?得到结果肖恩么表现呢?
这就需要我们在onResult函数中做一些事情了。
首先,定义onResult函数
function onResult( featureSet : FeatureSet, token : Object = null ) :
void
                {   
                    var displayFieldName : String =
featureSet.displayFieldName;
                    for each ( var myGraphic : Graphic in
featureSet.features )
                    {
                        // ToolTip
                        myGraphic.toolTip = "The 2007 population of "
                            + myGraphic.attributes[displayFieldName] +
" was "
                            + myNumberFormatter.format
(myGraphic.attributes.POP2007)
                            + "\nMedian Age: " +
myGraphic.attributes.MED_AGE + ".";      
                        // show on map
                        myGraphicsLayer.add( myGraphic );
                    }
                }
查询结果返回一个 FeatureSet,我们现在遍历这个 FeatureSet,然后把每个
feature 绘制到GraphicLayer上。
如果查询失败了怎么办呢,我们是不是要弹个东西出来告诉用户呢?
这就需要我们在onFault函数中做一些工作
function onFault( info : Object, token : Object = null ) : void
                {
                    Alert.show( info.toString() );
                }                        
            }
我们弹个对话框出来告诉用户,查找失败啦!

完整代码:

ContractedBlock.gif ExpandedBlockStart.gif Code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    
xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:esri
="http://www.esri.com/2008/ags"
    pageTitle
="Query Task"
    
>    
    
<mx:Script>
        
<![CDATA[
            import com.esri.ags.Graphic;
            import com.esri.ags.tasks.FeatureSet;
            import com.esri.ags.tasks.Query;
            import mx.controls.Alert;
            import mx.rpc.AsyncResponder;
                        
            private function doQuery() : void
            {
                queryTask.execute( query, new AsyncResponder( onResult, 
onFault ));
                function onResult( featureSet : FeatureSet, token : 
Object = null ) : void
                {   
                    var displayFieldName : String = 
featureSet.displayFieldName;
                    for each ( var myGraphic : Graphic in 
featureSet.features )
                    {
                        // ToolTip
                        myGraphic.toolTip = "The 2007 population of " 
                            + myGraphic.attributes[displayFieldName] + 
" was " 
                            + myNumberFormatter.format
(myGraphic.attributes.POP2007)
                            + "\nMedian Age: " + 
myGraphic.attributes.MED_AGE + ".";       
                        // show on map
                        myGraphicsLayer.add( myGraphic ); 
                    }
                }
                function onFault( info : Object, token : Object = null 
) : void
                {
                    Alert.show( info.toString() );
                }                         
            }
        
]]>
    
</mx:Script>
    
<mx:NumberFormatter id="myNumberFormatter" 
useThousandsSeparator
="true"/>
    
<!-- Layer with US States -->
    
<esri:QueryTask id="queryTask" 
url
="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demogra
phics/ESRI_Census_USA/MapServer/5"
>
        
<esri:Query id="query" 
            text
="{qText.text}"
            returnGeometry
="true"
            spatialRelationship
="esriSpatialRelEnvelopeIntersects">
            
<esri:outFields>
                
<mx:String>MED_AGE</mx:String>
                
<mx:String>POP2007</mx:String>
            
</esri:outFields>
        
</esri:Query>
    
</esri:QueryTask>
    
<mx:Panel title="Query a layer (search for a state)" 
layout
="horizontal" backgroundColor="0xB2BFC6" borderStyle="solid">
        
<mx:TextInput width="100%" id="qText" enter="doQuery()" 
text
="California"/>
        
<mx:Button label="Do Query" click="doQuery()"/>            
    
</mx:Panel>
    
<esri:Map>
        
<esri:extent>
            
<esri:Extent xmin="-170" ymin="15" xmax="-65" ymax="75"/>
        
</esri:extent>
        
<esri:ArcGISTiledMapServiceLayer
            
url="http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_W
orld_2D/MapServer"
 />
        
<esri:GraphicsLayer id="myGraphicsLayer"/>
    
</esri:Map>
</mx:Application>

原文地址:http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=35621&extra=page%3D4%26amp%3Borderby%3Ddateline



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

相关文章
|
3天前
|
前端开发 API 数据处理
探索后端开发中的API设计哲学
【9月更文挑战第10天】在数字化时代的浪潮下,后端开发作为连接数据与前端界面的桥梁,其重要性不言而喻。本文将深入探讨如何通过精心设计的API来提升后端服务的可维护性、扩展性和用户体验。我们将从API设计的基本原则出发,逐步展开对RESTful API和GraphQL两种流行风格的比较分析,并结合具体场景讨论最佳实践。文章旨在为开发者提供一套实用的API设计指南,助力打造高效、稳定且易于协作的软件架构。
19 6
|
2天前
|
API 网络架构 微服务
探索 GraphQL:现代 API 开发的新范式
GraphQL 是一种高效的 API 查询语言,允许客户端精确请求所需数据,避免了传统 RESTful API 中的数据冗余问题。它由 Facebook 开发并开源,现广泛应用于现代 Web 和移动应用。本文将介绍 GraphQL 的核心概念、优势及其在不同场景下的应用,并指导你如何构建和优化 GraphQL API。
|
5天前
|
JavaScript 测试技术 API
探索后端开发:构建高效API的艺术
【9月更文挑战第8天】本文旨在揭示后端开发中一个经常被忽视的领域——API设计。通过深入浅出的方式,我们将探讨如何构建一个既高效又易于维护的API。文章将涵盖设计原则、最佳实践以及一些常见的陷阱和解决方案。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用的技巧,帮助你在后端开发的道路上更进一步。
|
5天前
|
前端开发 API 开发者
深入浅出:后端开发中的API设计艺术
在数字化时代的浪潮中,后端开发如同搭建一座座数据桥梁,连接着用户与服务的无限可能。而API设计,则是这座桥梁的精髓所在。本文将带领读者领略API设计的艺术,从基础原则到进阶实践,探索如何打造高效、稳定且易于使用的后端接口。无论你是初学者还是资深开发者,这篇文章都将为你打开一扇通往高质量后端开发的大门。
|
4天前
|
存储 安全 API
探索后端开发:构建高效API的艺术
【9月更文挑战第9天】在数字时代的浪潮中,后端开发如同一位默默无闻的艺术家,精心雕琢着每一个数据交互的细节。本文将带你走进后端的世界,从基础概念到实战技巧,一起学习如何打造高效、稳定且易于扩展的API。我们将通过深入浅出的方式,探讨后端开发的哲学与实践,让你在编码之旅中,找到属于自己的节奏和和谐。让我们一起跟随代码的脚步,解锁后端开发的无限可能。
|
8天前
|
XML JSON 缓存
探索后端开发中的RESTful API设计原则
【9月更文挑战第5天】在数字化时代的浪潮中,后端开发扮演着支撑整个互联网世界运行的基石角色。而作为连接前端与后端桥梁的RESTful API,其设计质量直接影响到应用的性能和用户体验。本文将深入探讨RESTful API的设计原则,通过浅显易懂的语言和实际代码示例,引导读者理解如何构建高效、易于维护的API。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和思考。
|
8天前
|
缓存 Java 应用服务中间件
随着微服务架构的兴起,Spring Boot凭借其快速开发和易部署的特点,成为构建RESTful API的首选框架
【9月更文挑战第6天】随着微服务架构的兴起,Spring Boot凭借其快速开发和易部署的特点,成为构建RESTful API的首选框架。Nginx作为高性能的HTTP反向代理服务器,常用于前端负载均衡,提升应用的可用性和响应速度。本文详细介绍如何通过合理配置实现Spring Boot与Nginx的高效协同工作,包括负载均衡策略、静态资源缓存、数据压缩传输及Spring Boot内部优化(如线程池配置、缓存策略等)。通过这些方法,开发者可以显著提升系统的整体性能,打造高性能、高可用的Web应用。
32 2
flex布局属性简介
flex布局属性简介
|
2天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
1月前
|
前端开发
FLex布局详解
Flex布局通过`flex-direction`定义主轴方向,包括横向`row`、反向横向`row-reverse`、纵向`column`及反向纵向`column-reverse`。`justify-content`控制主轴上子元素的排列,如起始端`flex-start`、末端`flex-end`、居中`center`、等间距`space-around`或两端对齐`space-between`。在Y轴上设置这些同样有效。`flex-wrap: wrap`使子元素在需要时换行。`align-items: center`实现侧轴(交叉轴)上的居中对齐
45 1
FLex布局详解